/* unibetquebec.com — lobby chrome in Unibet's own greens.
   Palette read out of the inline styles of www.unibet.be: #3EAB37, #147B45,
   #002B00, #00531D, #00BEFF. Generated by build_css_unibetquebec.py from the
   zodiaccasinoquebec.com stylesheet; do not hand-edit the palette block. */

:root {
    --void: #071710;
    --panel: #0c2418;
    --raised: #123322;
    --hover: #18452d;
    --line: #1f5638;
    --text: #f2f7f3;
    --muted: #a9bfb1;
    --chartreuse: #3eab37;
    --chartreuse-dim: #2a7a26;
    --ink: #04140c;
    --gold: #147b45;
    --live: #00beff;
    --live-dim: #0a89b8;
    --header-h: 68px;
    --sidebar-w: 228px;
    --sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: "Archivo", "Roboto", system-ui, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    --focus: 0 0 0 2px var(--void), 0 0 0 4px var(--chartreuse);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--void);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select {
    font-family: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

strong {
    font-weight: 700;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Icon sprite ── */
.icon {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.icon-lg {
    width: 1.35em;
    height: 1.35em;
}

/* ── Top bar ── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.burger {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.logo {
    display: flex;
    align-items: center;
    height: 48px;
}

/* The real Zodiac mark is a badge, not a wordmark strip: it needs more height
   than the template's 36px or "CASINO" on the red plate stops being legible. */
.logo img {
    height: 44px;
    width: auto;
}

.site-footer .logo img {
    height: 56px;
}

.search {
    flex: 1;
    max-width: 420px;
    position: relative;
    margin: 0 auto;
}

.search.is-mobile {
    display: none;
}

.search .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.search input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-size: 14px;
}

.search input::placeholder {
    color: var(--muted);
}

.search input:focus {
    border-color: var(--chartreuse-dim);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    border: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
}

.btn-ghost:hover {
    background: var(--hover);
}

.btn-primary {
    background: var(--chartreuse);
    color: var(--ink);
}

.btn-primary:hover {
    background: #ffd76a;
}

.btn-live {
    background: var(--live);
    color: #fff;
}

/* ── Shell ── */
.shell {
    display: flex;
    min-height: calc(100vh - var(--header-h));
}

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--line);
    padding: 16px 12px 32px;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
}

.nav-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 12px 6px;
}

.nav-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
}

.nav-list a:hover {
    background: var(--hover);
}

.nav-list a.is-active {
    background: var(--raised);
    box-shadow: inset 3px 0 0 var(--chartreuse);
    border-radius: 0;
}

.nav-list .dot-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 0 0 rgba(0, 190, 255, 0.7);
    animation: pulse-live 1.8s ease-out infinite;
    margin-left: auto;
}

@keyframes pulse-live {
    0% { box-shadow: 0 0 0 0 rgba(0, 190, 255, 0.55); }

    100% { box-shadow: 0 0 0 8px rgba(0, 190, 255, 0); }

}

.sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 8px 0 0;
    text-align: center;
}

/* ── Main ── */
.main {
    flex: 1;
    min-width: 0;
    padding: 20px 24px 64px;
}

/* ── Promo track ── */
.promo-track {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}

.promo-banner {
    position: relative;
    min-height: 168px;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    background: var(--raised);
    box-shadow: var(--shadow);
}

.promo-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.promo-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(7, 23, 16, 0.1) 20%, rgba(7, 23, 16, 0.88) 100%);
}

.promo-banner h2,
.promo-banner .promo-kicker-off {
    font-size: 22px;
}

.promo-banner p {
    color: var(--muted);
    font-size: 13px;
    max-width: 36ch;
    margin: 6px 0 12px;
}

.promo-banner .btn {
    width: fit-content;
}

.promo-a { background: #14210c; }

.promo-b { background: #1a1210; }

.promo-c { background: #10141f; }

/* ── Chips ── */
.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 22px;
    scrollbar-width: none;
}

.chips::-webkit-scrollbar {
    display: none;
}

.chip {
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--text);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.chip:hover {
    background: var(--hover);
}

.chip.is-active {
    background: var(--chartreuse);
    color: var(--ink);
    border-color: var(--chartreuse);
}

/* ── Game rails ── */
.rail {
    margin-bottom: 28px;
}

.rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.rail-head h2 {
    font-size: 20px;
}

.rail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rail-actions a {
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
}

.rail-actions a:hover {
    color: var(--chartreuse);
}

.rail-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rail-btn:hover {
    background: var(--hover);
}

.rail-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.game-card {
    flex: 0 0 148px;
    scroll-snap-align: start;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--raised);
    cursor: pointer;
    border: 0;
    padding: 0;
    text-align: left;
    color: inherit;
}

.game-card img,
.game-card .orig-art {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #0a0c12;
}

.game-card h3 {
    font-size: 13px;
    padding: 8px 10px 2px;
}

.game-card .meta {
    font-size: 11px;
    color: var(--muted);
    padding: 0 10px 10px;
}

.game-card .play {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 23, 16, 0.55);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.game-card:hover .play,
.game-card:focus-visible .play {
    opacity: 1;
}

.play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--chartreuse);
    color: var(--ink);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.play-btn .icon {
    margin-left: 2px;
}

.badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--ink);
    color: var(--chartreuse);
}

.badge-live {
    background: var(--live);
    color: #fff;
}

.badge-jackpot {
    background: var(--gold);
    color: var(--ink);
}

/* Originals — authored tiles, not slot art */
.orig-art {
    display: grid;
    place-items: center;
    position: relative;
}

.orig-crash { background: radial-gradient(circle at 30% 80%, #2a1a0c, #0c1014); }

.orig-mines { background: radial-gradient(circle at 70% 20%, #12301a, #0c1014); }

.orig-dice { background: radial-gradient(circle at 50% 40%, #1a2040, #0c1014); }

.orig-plinko { background: radial-gradient(circle at 50% 0%, #301428, #0c1014); }

.orig-limbo { background: radial-gradient(circle at 80% 80%, #102830, #0c1014); }

.orig-wheel { background: radial-gradient(circle at 50% 50%, #302010, #0c1014); }

.orig-art svg {
    width: 72%;
    height: 72%;
}

/* ── Ticker ── */
.ticker {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 28px;
    overflow: hidden;
}

.ticker-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.ticker-mask {
    overflow: hidden;
    flex: 1;
}

.ticker-move {
    display: flex;
    gap: 28px;
    width: max-content;
    animation: ticker 32s linear infinite;
}

.win {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 13px;
    color: var(--muted);
}

.win b {
    color: var(--gold);
}

@keyframes ticker {
    from { transform: translateX(0); }

    to { transform: translateX(-50%); }

}

/* ── Providers / payments ── */
.strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 28px;
}

.pill {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--raised);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

/* ── Prose ── */
.prose {
    max-width: 75ch;
}

.prose h2 {
    font-size: 24px;
    margin: 2.2em 0 0.55em;
}

.prose h3 {
    font-size: 18px;
    margin: 1.6em 0 0.45em;
}

.prose p,
.prose li {
    color: var(--muted);
}

.prose strong {
    color: var(--text);
}

.prose ul {
    padding-left: 1.2em;
    margin: 0 0 1em;
}

.prose a {
    color: var(--chartreuse);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.facts {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 28px;
    font-size: 14px;
}

.facts caption {
    text-align: left;
    font-weight: 700;
    margin-bottom: 8px;
    font-family: var(--display);
}

.facts th,
.facts td,
.facts th {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

/* Width belongs on the row-header column only. A blanket `.facts th` width
   silently breaks any three-column table: all three column heads in <thead>
   claim it, the row asks for 114 %, and the browser squeezes the body cells
   until the widest column ends up the narrowest. */
.facts th {
    background: var(--raised);
    color: var(--text);
}

.facts tbody tr > th:first-child {
    width: 38%;
}

/* Above the phone breakpoint only: a site that gives `.facts` a
   `table-layout: fixed` scroll box on small screens turns this into a hard
   width, and 20 % is narrower than the row labels. Below 621px auto layout
   already sizes the columns by content. */
@media (min-width: 621px) {
    .facts:has(thead th:nth-child(3)) thead th:first-child,
    .facts:has(thead th:nth-child(3)) tbody tr > th:first-child {
        width: 20%;
    }

}

.facts td {
    color: var(--muted);
}

.faq details {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 8px;
}

.faq summary {
    font-weight: 700;
    cursor: pointer;
    font-family: var(--display);
}

.faq details p {
    color: var(--muted);
    margin: 10px 0 0;
    font-size: 14px;
}

/* ── Footer ── */
.site-footer {
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding: 40px 24px 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto 28px;
}

.footer-grid h2 {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}

.footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-grid li {
    margin-bottom: 8px;
}

.footer-grid a:hover {
    color: var(--chartreuse);
}

.footer-note {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
}

.footer-note p {
    margin-bottom: 8px;
}

.search-empty {
    display: none;
    padding: 32px;
    text-align: center;
    color: var(--muted);
}

.search-empty.is-on {
    display: block;
}

body.nav-open {
    overflow: hidden;
}

.sidebar-backdrop {
    display: none;
}

.mobile-tabbar {
    display: none;
}

/* ── Live / bonus page extras ── */
.page-hero {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 24px;
    margin-bottom: 22px;
}

.page-hero h1 {
    font-size: 32px;
    margin-bottom: 8px;
}

.page-hero p {
    color: var(--muted);
    max-width: 62ch;
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.promo-card {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.promo-card h2 {
    font-size: 20px;
}

.promo-card p {
    color: var(--muted);
    font-size: 14px;
    flex: 1;
}

.live-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.live-grid .game-card {
    flex: none;
    width: 100%;
}

/* ── Breadcrumb ── */
.crumbs {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 16px;
}

.crumbs a:hover {
    color: var(--chartreuse);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .promo-track {
        grid-template-columns: 1fr 1fr;
    }

    .promo-track .promo-banner:first-child {
        grid-column: 1 / -1;
        min-height: 200px;
    }

    .footer-grid,
    .promo-grid,
    .live-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 768px) {
    .burger {
        display: inline-flex;
    }

    .search {
        display: none;
    }

    .search.is-mobile {
        display: block;
        max-width: none;
        margin: 12px 0 16px;
    }

    .sidebar {
        position: fixed;
        z-index: 50;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow);
    }

    body.nav-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(7, 23, 16, 0.6);
        z-index: 45;
    }

    body.nav-open .sidebar-backdrop {
        display: block;
    }

    .main {
        padding: 16px 12px 96px;
    }

    .promo-track,
    .promo-grid,
    .live-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .game-card {
        flex-basis: 132px;
    }

    .mobile-tabbar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 35;
        background: var(--panel);
        border-top: 1px solid var(--line);
        padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    }

    .mobile-tabbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
        color: var(--muted);
        padding: 6px;
        border-radius: 8px;
    }

    .mobile-tabbar a.is-active,
    .mobile-tabbar a:hover {
        color: var(--chartreuse);
    }

    .page-hero h1 {
        font-size: 26px;
    }

}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

}

/* ── zodiaccasinoquebec.com additions ─────────────────────────────────────
   Long-form pages sit on the same chrome as the lobby, so they need a few
   classes the template never had. Nothing here is decorative for its own
   sake: a readable body colour, a citation line (this site quotes third
   parties constantly and must show where every number came from), two
   callout kinds, a numbered-step list, the VIP tier grid, and a figure. */

.prose p {
    color: var(--muted);
    max-width: 75ch;
}

.prose p.lede {
    color: var(--text);
    font-size: 17px;
}

.prose h2 {
    scroll-margin-top: calc(var(--header-h) + 12px);
}

/* Where a figure came from. Always visible, never a tooltip. */
.src {
    display: block;
    font-size: 12px;
    color: var(--muted);
    opacity: 0.8;
    margin: -0.6em 0 1.6em;
}

.note {
    border: 1px solid var(--line);
    border-left: 3px solid var(--chartreuse);
    background: var(--raised);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin: 20px 0 24px;
}

.note-warn {
    border-left-color: var(--live);
}

.note h3 {
    font-family: var(--display);
    font-size: 16px;
    margin: 0 0 6px;
}

.note p {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.note p + p {
    margin-top: 8px;
}

.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 16px 0 28px;
    display: grid;
    gap: 10px;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding: 14px 16px 14px 52px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 14px;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 14px;
    top: 13px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--chartreuse);
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
    font-size: 13px;
    display: grid;
    place-items: center;
}

.steps li b {
    color: var(--text);
}





.tier-gold h3 { color: var(--chartreuse); }
.tier-silver h3 { color: #c3c9d2; }
.tier-green h3 { color: #7fbf6a; }

/* Both of these were used by the template's own markup and defined nowhere,
   so the footer blurb and the sidebar footnote inherited body type and sat at
   full brightness and full width. */
.footer-blurb {
    color: var(--muted);
    font-size: 14px;
    margin-top: 12px;
    max-width: 44ch;
}

.nav-foot {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 20px 8px 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.live-grid .game-card {
    flex: none;
    width: 100%;
}

/* Promo banners, remeasured against THESE photos. The template's scrim starts
   at 10% opacity 20% down, which was enough for its own synthetic art but not
   for a lit roulette table or a crown on black: the headline sat on highlights
   and disappeared. Darker floor, and enough height that a real French headline
   is not forced up into the bright part of the frame. */
.promo-banner {
    min-height: 208px;
}

.promo-banner::after {
    background: linear-gradient(180deg, rgba(7, 23, 16, 0.55) 0%, rgba(7, 23, 16, 0.94) 100%);
}

.promo-banner h1 {
    font-size: 27px;
    line-height: 1.14;
}

.promo-banner h2 {
    font-size: 20px;
    line-height: 1.2;
}

.promo-track .promo-banner:first-child {
    min-height: 248px;
}

.figure {
    margin: 20px 0 24px;
}

.figure img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.figure figcaption {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
}

@media (max-width: 900px) {
    .tier-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .tier-grid {
        grid-template-columns: 1fr;
    }
}

/* ── unibetquebec.com additions ───────────────────────────────────────────
   Four things this build needs that the inherited sheet has no rule for:
   a dated timeline (the Canadian exit is a sequence, not a paragraph), a
   two-column verification table whose whole point is that the reader can
   re-run each check, a quotation that always shows its source, and the
   "absent" state used wherever a thing simply does not exist here. */

/* The Canadian timeline. A rule down the left, a dot per entry. */
.timeline {
    list-style: none;
    margin: 22px 0 26px;
    padding: 0 0 0 26px;
    border-left: 2px solid var(--line);
}

.timeline li {
    position: relative;
    margin: 0 0 20px;
}

.timeline li:last-child {
    margin-bottom: 0;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: -33px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--chartreuse);
    box-shadow: 0 0 0 4px var(--void);
}

.timeline li.is-end::before {
    background: var(--live);
}

.timeline time {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--chartreuse);
    margin-bottom: 2px;
}

.timeline li.is-end time {
    color: var(--live);
}

.timeline p {
    margin: 0;
    color: var(--muted);
    max-width: 70ch;
}

/* "Go and check it yourself" — one row per verification, with the verdict. */
.proof {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 8px;
    font-size: 14px;
}

.proof caption {
    caption-side: top;
    text-align: left;
    font-family: var(--display);
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    padding-bottom: 10px;
}

.proof th,
.proof td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.proof thead th {
    background: var(--raised);
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}

.proof tbody th {
    background: var(--panel);
    font-weight: 600;
    color: var(--text);
    width: 34%;
}

.proof td {
    color: var(--muted);
}

.proof td code,
.proof th code {
    font-size: 12.5px;
    word-break: break-all;
    color: var(--text);
}

.proof .verdict {
    font-family: var(--display);
    font-weight: 700;
    color: var(--live);
    white-space: nowrap;
}

.proof .verdict-yes {
    color: var(--chartreuse);
}

@media (max-width: 620px) {
    .proof,
    .proof tbody,
    .proof tr,
    .proof th,
    .proof td {
        display: block;
        width: auto;
    }

    .proof thead {
        display: none;
    }

    /* Once the table is display:block, a table-caption shrink-wraps to its
       longest word and the heading falls down the page one word per line. */
    .proof caption {
        display: block;
    }

    .proof tr {
        margin-bottom: 12px;
    }

    /* More specific than the `width: auto` above, so it has to be repeated:
       otherwise the row header keeps its desktop 34 % and the label sits in a
       narrow box with the rest of the row empty beside it. */
    .proof tbody th {
        width: auto;
        border-bottom: 0;
    }
}

/* A quotation that cannot be published without saying where it came from. */
.quote {
    margin: 20px 0 24px;
    padding: 14px 18px;
    border-left: 3px solid var(--gold);
    background: var(--panel);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.quote p {
    margin: 0;
    color: var(--text);
    font-size: 15px;
}

.quote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 12.5px;
    color: var(--muted);
}

/* The state this whole site is about: the thing is simply not here. */
.absent {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 18px 20px;
    margin: 22px 0 24px;
}

.absent .icon {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--live);
    margin-top: 2px;
}

.absent h3 {
    font-family: var(--display);
    font-size: 17px;
    margin: 0 0 6px;
}

.absent p {
    margin: 0;
    color: var(--muted);
    max-width: 68ch;
}

.absent p + p {
    margin-top: 8px;
}

/* Side-by-side "here vs there" comparison cards. */
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 20px 0 26px;
}

.split > div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--raised);
    padding: 16px 18px;
}

.split h3 {
    font-family: var(--display);
    font-size: 16px;
    margin: 0 0 8px;
    color: var(--text);
}

.split p {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.split ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.split li {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 5px;
}

.split-yes {
    border-color: var(--chartreuse-dim);
}

.split-no {
    border-color: var(--live-dim);
}

/* Game cards, sized to the art we actually ship. Unibet's own tile art is
   portrait for slots (312x416) and landscape for live tables (416x312), so one
   aspect-ratio for both would crop a wordmark in half either way. Two shapes,
   each matching its source exactly, so object-fit: cover has nothing to cut. */
.game-card {
    flex: 0 0 156px;
}

.game-card img,
.game-card .orig-art,
.game-card .play {
    aspect-ratio: 3 / 4;
}

.rail-live .game-card {
    flex: 0 0 232px;
}

.rail-live .game-card img,
.rail-live .game-card .play {
    aspect-ratio: 4 / 3;
}

/* Inline code: domains, package names and query parameters appear constantly
   in this copy, and the default monospace at body size reads as a typo. */
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--raised);
    border: 1px solid var(--line);
    color: var(--text);
    white-space: nowrap;
}

.proof code,
.facts code {
    background: transparent;
    border: 0;
    padding: 0;
}

/* ── Banner text over photography ────────────────────────────────────────
   --muted (#A9BFB1) is calibrated for the flat --void and --panel grounds.
   Over a photograph it is not good enough: measured against the real WebP
   files, banner copy in --muted bottomed out at 3.25:1 on four of the eight
   banners even under the inherited 0.55 -> 0.94 scrim, and no scrim rescued
   it. So banner copy gets its own near-white, and the scrim is then free to
   be much lighter at the bottom than the one we inherited — 0.80 instead of
   0.94 — which is why the pictures actually read.

   Verified by check_scrim_unibetquebec.py: worst pixel under any banner text,
   across all eight banners, 5.13:1. Keep the two files in step. */
:root {
    --on-art: #dfe9e2;
}

.promo-banner::after {
    background: linear-gradient(180deg, rgba(7, 23, 16, 0.66) 0%, rgba(7, 23, 16, 0.80) 100%);
}

.promo-banner p {
    color: var(--on-art);
}

/* The lobby promo track is a 1.4fr/1fr/1fr grid built for the homepage's three
   banners. Every sub-page carries exactly one, which then occupies only the
   first column — a 245px-wide card with a squeezed photograph beside two
   empty columns. `.promo-solo` gives the single-banner case its own track. */
.promo-track.promo-solo {
    grid-template-columns: 1fr;
}

.promo-track.promo-solo .promo-banner {
    min-height: 236px;
}

.promo-track.promo-solo .promo-banner p {
    max-width: 60ch;
}

/* ── Mobile header ───────────────────────────────────────────────────────
   The inherited sheet has NO mobile rule for .topbar at all: the burger, the
   44px-tall logo and a full-length CTA add up to 386px inside a 375px bar, so
   the button is clipped at the right edge. (Measured, not guessed — the same
   fleet-wide overflow first found on royalwinner.) The search field is already
   hidden at this width and reappears in the page body, so only the three
   remaining items need to shrink. */
@media (max-width: 620px) {
    .topbar {
        gap: 10px;
        padding: 0 10px;
    }

    .topbar .logo img {
        height: 32px;
    }

    .topbar-right .btn {
        height: 36px;
        padding: 0 11px;
        font-size: 12px;
        white-space: nowrap;
    }
}