/* microgamingcasinocanada.com — bilingual Canadian guide on the lobby template.

   Every colour here is Microgaming's own. The company's corporate site shipped
   a :root block (microgaming.co.uk, Wayback 20220831230552) declaring
   --primary-color #31B6E9, --secondary-color #21E418, --background-color
   #070707 and a set of jackpot tier colours (mega #EAE8D5/#BAAD8B, major
   #F1D301, minor #E97A05, mini #D01516). Those are reused verbatim, so the
   tier strip on the slots page is painted in the real thing rather than an
   approximation.

   --brand #31b6e9 clears 8.63:1 on the void, so it works as fill AND as text.
   White on the brand cyan is only 2.33:1, so cyan buttons always take dark
   ink (--ink) — the same rule as every gold/lime sibling in the fleet. */

:root {
    --void: #070707;
    --panel: #0e1219;
    --raised: #151b24;
    --hover: #1d2530;
    --line: #29323f;
    --text: #f3f6fa;
    --muted: #aab4c2;
    --brand: #31b6e9;
    --brand-dim: #2596c4;
    --ink: #070707;
    --gold: #f1d301;
    --live: #e97a05;
    --live-dim: #b96205;
    --ok: #21e418;
    --tier-mega: #eae8d5;
    --tier-major: #f1d301;
    --tier-minor: #e97a05;
    --tier-mini: #d01516;
    --header-h: 64px;
    --sidebar-w: 228px;
    --sans: "Open Sans", system-ui, sans-serif;
    --display: "Roboto", system-ui, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    --focus: 0 0 0 2px var(--void), 0 0 0 4px var(--brand);
}

*,
*::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: 40px;
}

.logo img {
    height: 36px;
    width: auto;
}

.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(--brand-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(--brand);
    color: var(--ink);
}

.btn-primary:hover {
    background: #5ec8f0;
}

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

/* No `.lang` rule: this site is Spanish only. A language selector belongs in
   the header ONLY when there are two or more languages to switch between — a
   lone "ES" chip is decoration that implies a choice the site cannot offer. */

/* ── 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(--brand);
    border-radius: 0;
}

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

@keyframes pulse-live {
    0% { box-shadow: 0 0 0 0 rgba(233, 122, 5, 0.55); }
    100% { box-shadow: 0 0 0 8px rgba(233, 122, 5, 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;
    /* Swept offline against the real photos (scratchpad/scrim.py): the
       template's 0.1-at-20% top stop was tuned for banners whose text sits at
       the bottom. Measured worst-case pixel under the H1 was 1.34:1. These
       stops clear 4.5:1 for every text box on all three banners while keeping
       mean background luma in the high teens, so the photo still reads. */
    background: linear-gradient(180deg, rgba(7, 7, 7, 0.55) 0%, rgba(7, 7, 7, 0.78) 45%, rgba(7, 7, 7, 0.94) 100%);
}

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

.promo-banner p {
    /* --muted (--muted) cannot clear 4.5:1 over a photo under any scrim light
       enough to show the image — same finding as the beteum build. */
    color: #e6eaf0;
    font-size: 13px;
    max-width: 36ch;
    margin: 6px 0 12px;
}

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

.promo-a { background: #08202b; }
.promo-b { background: #1c1605; }
.promo-c { background: #14161d; }

/* ── 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(--brand);
    color: var(--ink);
    border-color: var(--brand);
}

/* ── 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(--brand);
}

.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: 1 / 1;
    object-fit: cover;
    background: #151b24;
}

.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, 7, 7, 0.62);
    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(--brand);
    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(--brand);
}

.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%;
}

.live-art {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    aspect-ratio: 3 / 4;
    background:
        linear-gradient(180deg, transparent 30%, rgba(7, 7, 7, 0.9)),
        repeating-linear-gradient(135deg, #101820 0 12px, #0b1016 12px 24px);
}

.live-art.bj { background-image: linear-gradient(180deg, transparent 30%, rgba(7,8,11,.9)), radial-gradient(circle at 50% 40%, #0d3b28, #07140e); }
.live-art.roulette { background-image: linear-gradient(180deg, transparent 30%, rgba(7,8,11,.9)), radial-gradient(circle at 50% 40%, #3b0d16, #14070a); }
.live-art.baccarat { background-image: linear-gradient(180deg, transparent 30%, rgba(7,8,11,.9)), radial-gradient(circle at 50% 40%, #0d1e3b, #070b14); }
.live-art.game-show { background-image: linear-gradient(180deg, transparent 30%, rgba(7,8,11,.9)), radial-gradient(circle at 50% 40%, #3b2a0d, #141007); }
.live-art.poker { background-image: linear-gradient(180deg, transparent 30%, rgba(7,8,11,.9)), radial-gradient(circle at 50% 40%, #1e0d3b, #0c0714); }
.live-art.wheel { background-image: linear-gradient(180deg, transparent 30%, rgba(7,8,11,.9)), radial-gradient(circle at 50% 40%, #0d3b36, #071413); }

.live-art .table-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
}

.live-art .seats {
    font-size: 11px;
    color: var(--muted);
}

/* ── 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(--brand);
    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 {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
}

.facts th {
    width: 38%;
    background: var(--raised);
    color: var(--text);
}

.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(--brand);
}

.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;
}

/* ── Modal ── */
.modal-root {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-root.is-open {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 7, 7, 0.78);
}

.modal {
    position: relative;
    width: min(420px, 100%);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.modal h2 {
    font-size: 22px;
    margin-bottom: 6px;
}

.modal .lede {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 18px;
}

.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--raised);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.tab {
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
}

.tab.is-active {
    background: var(--brand);
    color: var(--ink);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
}

.field input {
    height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--text);
    font-weight: 400;
}

.modal .btn {
    width: 100%;
    margin-top: 6px;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 8px;
}

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--brand);
    color: var(--ink);
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 999px;
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.toast.is-on {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.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;
}

.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(--brand);
}

/* ── 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, 7, 7, 0.68);
        z-index: 45;
    }

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

    .topbar-right .lang {
        display: none;
    }

    .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(--brand);
    }

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

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

/* ── lobby-template shared additions ───────────────────────────────────────
   Components the Kairon template did not have: a sub-page hero, the
   third-party-claim notice, the offer grid on /bonus/, the registration
   step box on /promo-kod/, and the small print under the pill strips. */

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

.search-spacer { flex: 1; }

.rail-note {
    color: var(--muted);
    font-size: 13px;
    margin: -6px 0 12px;
    max-width: 78ch;
}

.strip-note {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 10px;
    max-width: 78ch;
}

.strip-note + .strip { margin-top: 0; }

.pill-muted {
    color: var(--muted);
    border-style: dashed;
}

/* ── Sub-page hero ── */
.page-hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    min-height: 210px;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    margin-bottom: 24px;
    background: var(--raised);
    box-shadow: var(--shadow);
}

.page-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    z-index: -1;
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(7, 7, 7, 0.94) 30%, rgba(7, 7, 7, 0.35) 100%);
}

.page-hero-body { max-width: 60ch; }

.page-hero h1 {
    font-size: clamp(26px, 4vw, 38px);
    text-transform: uppercase;
}

.page-hero p {
    color: var(--muted);
    margin: 8px 0 0;
    font-size: 15px;
}

/* ── Notice ── */
.notice {
    border: 1px solid var(--line);
    border-left: 3px solid var(--live);
    border-radius: var(--radius-sm);
    background: var(--panel);
    padding: 18px 20px;
    margin: 26px 0;
}

.notice-warn { border-left-color: var(--brand); }

.notice h3 {
    font-size: 17px;
    margin: 0 0 8px;
    color: var(--text);
}

.notice-warn h3 { color: var(--brand); }

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

.notice em {
    color: var(--text);
    font-style: normal;
    background: var(--raised);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* ── Offer grid (/bonus/) ── */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0 28px;
}

.offer-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.offer {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--panel);
    display: flex;
    flex-direction: column;
}

.offer img {
    width: 100%;
    height: 128px;
    object-fit: cover;
    object-position: 50% 28%;
}

.offer-body { padding: 14px 16px 16px; }

.offer-body h3 {
    font-size: 19px;
    margin: 8px 0 6px;
    color: var(--brand);
}

.offer-body p {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.offer-tag {
    display: inline-block;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--brand);
    border-radius: 3px;
    padding: 2px 7px;
}

.offer-tag-alt { background: var(--live); }
.offer-tag-neutral { background: var(--muted); }

/* ── Registration step box (/promo-kod/) ── */
.steps-boxed {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 20px 22px;
    margin: 22px 0 26px;
}

.steps-title {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.01em;
    margin: 0 0 12px;
}

/* `.steps-title` is usually a <p>, so inside .prose the `.prose p` rule
   (specificity 0,1,1) beat it and painted the step box's title in --muted —
   the same ink as the body it heads, which flattens the hierarchy. */
.prose .steps-title {
    color: var(--text);
    font-weight: 700;
}

.pick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Without this the implicit `auto` column sizes to max-content, so a row
       holding a real sentence pushes past the parent instead of wrapping. */
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.pick-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--raised);
    padding: 10px 12px;
    font-size: 15px;
}

.pick-tag {
    flex: none;
    min-width: 74px;
    text-align: center;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--brand);
    border-radius: 3px;
    padding: 3px 6px;
}

.pick-tag-alt { background: var(--live); }
.pick-tag-neutral { background: var(--muted); }

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

/* ── Footer blurb + 404 ── */
.footer-blurb {
    color: var(--muted);
    margin-top: 12px;
    font-size: 14px;
    max-width: 42ch;
}

.prose-404 { padding-top: 40px; }

/* ── Facts table gets a header row here ── */
.facts thead th {
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding: 8px 12px;
}

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

@media (max-width: 620px) {
    .offer-grid,
    .offer-grid-3 { grid-template-columns: 1fr; }

    .page-hero {
        min-height: 168px;
        padding: 18px;
    }

    .pick-list li {
        flex-wrap: wrap;
        font-size: 14px;
    }
}

/* `manifest.json`, `display: standalone` and friends on /aplikace/ — the
   template had no code style, so they rendered as bare monospace runs. */
.prose code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.88em;
    color: var(--text);
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* Nine sidebar links sit between the top of the document and the lobby, so a
   keyboard user needs a way past them. Visible only when focused. */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 80;
    background: var(--brand);
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 12px;
}

main:focus {
    outline: none;
    box-shadow: none;
}

/* `.pick-list li` is a flex container, so every inline element and every run of
   bare text inside it becomes its own flex item. An item written as
   `<span class="pick-tag">X</span> texto <b>énfasis</b> más texto` therefore
   fragments into four columns — and under 620px, where `flex-wrap: wrap` is on,
   it breaks into stacked lines with orphaned punctuation. Found on /aplicacion/
   during the build. The markup fix is to wrap everything after the tag in a
   single `<span>`; this rule makes that wrapper behave as the row's text column
   and keeps a stray inline element from ever becoming a sibling flex item. */
.pick-list li > span:not([class]) {
    flex: 1 1 auto;
    min-width: 0;
}

.pick-list li > b,
.pick-list li > strong,
.pick-list li > em {
    flex: 1 1 auto;
    min-width: 0;
}

/* `.facts` is `width: 100%` but its cell content sets a minimum: with three
   columns of Spanish prose it stops fitting somewhere under ~400px and pushes
   the BODY's scrollWidth past the viewport. That overflow is invisible to a
   `document.documentElement.scrollWidth` check — measure `document.body` — and
   it makes the whole page pan sideways on a phone. Give the table its own
   scroll box instead, so wide content scrolls and the page never does.
   Wrapper-less fallback: a `display: block` table can scroll its own rows. */
@media (max-width: 620px) {
    .facts {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .facts thead,
    .facts tbody,
    .facts tr {
        /* keep table layout semantics inside the now-block scroll box */
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .facts caption {
        display: block;
    }
}

/* ── The catalogue tiles are illustrative, not playable ──
   This is an independent guide, not the casino, so no tile links anywhere and
   none of them opens a game. The cards are <article>, not <a>, and must not
   pretend otherwise: the template's pointer cursor and hover lift are
   affordances for a click that does not exist here. */
.game-card {
    cursor: default;
}

.game-card:hover {
    transform: none;
}

.rail-track .game-card h3 {
    color: var(--text);
}

/* In-article photographs sit flush in the prose column; the template never
   needed a rule because the sibling sites put every photo in a hero. */
.prose > img {
    border-radius: var(--radius);
    margin: 4px 0 18px;
    border: 1px solid var(--line);
}

/* The search box only exists on the homepage — it filters .game-card, and the
   sub-pages have no tiles to filter, so shipping a dead input there would be a
   control that does nothing. Without it the flex row has no spacer, so pin the
   CTA to the right explicitly instead of letting it collapse next to the logo. */
.topbar-right {
    margin-left: auto;
}

/* `.facts th { width: 38% }` was written for the two-column key/value table and
   silently breaks three-column ones: every <th> claims 38 %, so the three
   column heads ask for 114 % and the browser squeezes the body cells into
   whatever is left. That is what shipped on /opiniones/ — a "Qué publica"
   column about 90px wide next to a mostly empty "Fuente". Scope the width to
   the row-header column, and give three-column tables their own split. */
.facts th {
    width: auto;
}

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

/* Above the phone breakpoint only: at <= 620px these tables sit in a
   `table-layout: fixed` scroll box where a 20 % first column is narrower than
   the row labels and clips them, and auto layout already sizes the columns by
   content there. */
@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%;
    }
}

/* The header CTA overflowed the viewport on a phone: burger + a 146px logo +
   a 160px button do not fit in 375px, and body.scrollWidth read 388 on every
   page. (documentElement.scrollWidth also read 388 here, but measure body —
   it is the one that catches this class of bug.) Shrink the lockup and the
   button below 560px instead of hiding either: the CTA is the proof that the
   casino is closed, and the logo is the brand. */
@media (max-width: 560px) {
    .topbar {
        gap: 10px;
        padding: 0 12px;
    }

    .topbar .logo img {
        width: 110px;
    }

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

/* ── Language switcher ────────────────────────────────────────────────────
   This site really is bilingual (en-CA at the root, fr-CA under /fr/), so the
   chip advertises a choice that exists — the condition the single-language
   siblings failed. */
.langs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
}

.langs a {
    display: block;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.langs a:hover {
    color: var(--text);
    background: var(--hover);
}

.langs a[aria-current="true"] {
    color: var(--ink);
    background: var(--brand);
}

/* The header lockup is the official Microgaming mark plus wordmark, so the
   site's own name is carried as real text beside it rather than baked into the
   image. It is the first thing to go when the bar gets tight. */
.logo-tag {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--line);
    color: var(--brand);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .logo-tag { display: none; }
}

/* On a phone the bar has room for the burger, the logo and ONE control. The
   language chip wins over the CTA: this site is bilingual, so a French reader
   landing on an English URL needs a way across, while the CTA's destination is
   already the second item in the mobile tab bar. */
@media (max-width: 560px) {
    .topbar-right .btn { display: none; }
}

/* ── Jackpot tier strip ───────────────────────────────────────────────────
   Painted in Microgaming's own published tier colours. */
.tiers {
    display: grid;
    /* Fixed 2x2, not auto-fit: four items in an auto-fit track count land on
       3 + 1 inside the prose column, and an orphan row reads as a mistake. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.tiers li {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
}

.tiers b {
    display: block;
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tiers span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.tier-mega { border-left-color: var(--tier-mega) !important; }
.tier-mega b { color: var(--tier-mega); }
.tier-major { border-left-color: var(--tier-major) !important; }
.tier-major b { color: var(--tier-major); }
.tier-minor { border-left-color: var(--tier-minor) !important; }
.tier-minor b { color: var(--tier-minor); }
.tier-mini { border-left-color: var(--tier-mini) !important; }
/* #d01516, Microgaming's own Mini colour, is only 3.4:1 on the panel; lift the
   label to a tint of it that clears 4.5:1 and keep the real value on the rule. */
.tier-mini b { color: #ef4b4c; }

@media (max-width: 520px) {
    .tiers { grid-template-columns: minmax(0, 1fr); }
}

/* ── Provider badge ───────────────────────────────────────────────────────
   The official Microgaming mark, used nominatively next to the sentence that
   names the company. Never a header lockup on its own. */
.provider-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}

.provider-badge img {
    flex: none;
    width: 168px;
    height: auto;
}

.provider-badge p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 560px) {
    .provider-badge {
        flex-direction: column;
        align-items: flex-start;
    }
}