:root {
    color-scheme: dark;
    --bg: #090a0e;
    --txt: #f4f5f7;
    --muted: #a2a4ad;
    --line: rgba(255, 255, 255, .09);
    --gold: #ffc65c;
    --gold-2: #ffb03a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--txt);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.wrap { width: 100%; max-width: 940px; margin: 0 auto; padding: 24px 20px 0; }
.language-switcher { position: relative; z-index: 20; display: flex; justify-content: flex-end; margin: -4px 0 10px; }
.language-menu { position: relative; font-size: 12px; font-weight: 600; }
.language-toggle { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 12px; border: 1px solid rgba(255, 198, 92, .22); border-radius: 10px; background: rgba(255, 198, 92, .06); color: var(--txt); cursor: pointer; list-style: none; user-select: none; }
.language-toggle::-webkit-details-marker { display: none; }
.language-toggle:hover, .language-menu[open] .language-toggle { background: rgba(255, 198, 92, .10); border-color: rgba(255, 198, 92, .45); }
.language-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.language-flag { flex: 0 0 auto; width: 24px; height: 16px; object-fit: contain; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.language-chevron { width: 14px; height: 14px; margin-left: 3px; color: var(--gold); transition: transform .16s ease; }
.language-menu[open] .language-chevron { transform: rotate(180deg); }
.language-options { position: absolute; right: 0; top: calc(100% + 7px); width: 196px; padding: 6px; border: 1px solid rgba(255, 198, 92, .24); border-radius: 12px; background: #141416; box-shadow: 0 14px 36px rgba(0, 0, 0, .55); }
.language-options a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 11px; border-radius: 7px; color: var(--muted); transition: color .15s, background .15s; }
.language-options a:hover, .language-options a:focus-visible { color: var(--txt); background: rgba(255, 255, 255, .06); }
.language-options a[aria-current="page"] { color: var(--gold); background: rgba(255, 198, 92, .09); }
.language-check { width: 14px; height: 14px; margin-left: auto; visibility: hidden; }
.language-options a[aria-current="page"] .language-check { visibility: visible; }

/* A compact, typographic banner keeps the casino list above the fold. */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 30px;
    padding: 28px 30px;
    border: 1px solid rgba(255, 198, 92, .28);
    border-radius: 18px;
    background:
        linear-gradient(180deg, transparent 40%, rgba(9, 10, 14, .45)),
        linear-gradient(105deg, rgba(9, 10, 14, .42), rgba(9, 10, 14, .68)),
        url("img/de-flag-background.webp") center / 100% 100% no-repeat;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-title { margin: 0; line-height: 1; }
.hero-country { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #d8e8ff; }
.hero-intro-title { display: block; font-size: clamp(30px, 4.5vw, 46px); line-height: 1.1; letter-spacing: -1.2px; }
.geo-fi .hero {
    /* Scale the flag uniformly: both arms of the cross keep the same width. */
    background:
        linear-gradient(110deg, rgba(7, 14, 32, .80), rgba(4, 30, 64, .72)),
        url("img/fi-flag-background.svg") left center / auto 140% no-repeat,
        #14253d;
}
.geo-dk .hero {
    background:
        linear-gradient(110deg, rgba(30, 7, 15, .58), rgba(35, 8, 20, .72)),
        url("img/dk-flag-background.svg") left center / auto 140% no-repeat,
        #35121d;
}
.geo-cz .hero {
    background:
        linear-gradient(110deg, rgba(8, 16, 35, .60), rgba(16, 16, 34, .78)),
        url("img/cz-flag-background.svg") left center / auto 140% no-repeat,
        #172239;
}
.geo-no .hero {
    background:
        linear-gradient(110deg, rgba(10, 13, 32, .58), rgba(20, 13, 32, .76)),
        url("img/no-flag-background.svg") left center / auto 140% no-repeat,
        #211828;
}
.geo-es .hero {
    background:
        linear-gradient(110deg, rgba(35, 13, 16, .62), rgba(28, 16, 22, .79)),
        url("img/es-flag-background.svg") left center / auto 140% no-repeat,
        #30191e;
}
.geo-be .hero {
    background:
        linear-gradient(110deg, rgba(20, 14, 17, .48), rgba(30, 16, 23, .80)),
        url("img/be-flag-background.svg") left center / auto 100% no-repeat,
        #30191e;
}
.geo-ch .hero {
    background:
        linear-gradient(110deg, rgba(31, 10, 17, .62), rgba(29, 12, 22, .82)),
        url("img/ch-flag-background.svg") left center / auto 130% no-repeat,
        #361721;
}
.geo-ch .language-flag { width: 18px; height: 18px; }
.geo-pl .hero {
    background:
        linear-gradient(110deg, rgba(28, 13, 22, .70), rgba(29, 12, 22, .84)),
        url("img/pl-flag-background.svg") center / cover no-repeat,
        #361721;
}
.geo-it .hero {
    background:
        linear-gradient(110deg, rgba(10, 21, 22, .70), rgba(29, 12, 22, .82)),
        url("img/it-flag-background.svg") center / cover no-repeat,
        #262320;
}
.geo-ie .hero {
    background:
        linear-gradient(110deg, rgba(10, 24, 20, .70), rgba(30, 20, 15, .80)),
        url("img/ie-flag-background.svg") center / cover no-repeat,
        #25251c;
}
.hero-cta.hero-cta--single { grid-template-columns: 1fr; grid-template-areas: "btn"; }
.catalogue-note { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.hero-amount { display: flex; align-items: baseline; gap: 14px; }
.hero-number { font-size: clamp(96px, 11vw, 124px); font-weight: 700; letter-spacing: -6px; }
.hero-word { font-size: clamp(54px, 6vw, 68px); font-weight: 700; letter-spacing: -1px; }
.hero-description { max-width: 360px; margin: 0 0 14px; color: #e9dfcf; font-size: 14px; line-height: 1.6; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--gold);
    color: #211706;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: #ffda8c; }
.btn svg { flex: 0 0 auto; width: 15px; height: 15px; }
.hero-btn { min-width: 210px; background: linear-gradient(110deg, var(--gold), var(--gold-2)); }
.hero-btn:hover { background: #ffda8c; }

.casinos { margin-top: 22px; scroll-margin-top: 16px; }
.list-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.list-heading h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.4px; }
.list-heading p { margin: 0; color: var(--muted); font-size: 11px; white-space: nowrap; }
.list { display: flex; flex-direction: column; gap: 12px; }
.brand {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 32px 124px minmax(88px, 1fr) minmax(170px, 1.4fr) 94px minmax(116px, 1fr);
    grid-template-areas: "num logo name bonus meta cta";
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(9, 10, 14, .82);
    transition: background .15s ease;
}
.brand:hover { background: rgba(24, 24, 28, .9); }
.brand.top { border-color: rgba(255, 198, 92, .4); background: linear-gradient(100deg, rgba(41, 32, 18, .92), rgba(9, 10, 14, .86)); }
.num { grid-area: num; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 50%; color: var(--muted); font-family: "Space Grotesk", sans-serif; font-weight: 700; }
.brand.top .num { border-color: rgba(255, 198, 92, .5); background: rgba(255, 198, 92, .1); color: var(--gold); }
.name { grid-area: name; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.offer-meta { grid-area: meta; color: var(--muted); font-size: 11px; line-height: 1.6; }
.logo { grid-area: logo; display: flex; align-items: center; justify-content: center; min-width: 0; height: 46px; }
.logo img { display: block; width: auto; height: auto; max-width: min(100%, 106px); max-height: 100%; object-fit: contain; }
.bonus { grid-area: bonus; min-width: 0; }
.bonus-value { display: block; font-family: "Space Grotesk", Inter, sans-serif; font-size: 25px; line-height: 1.1; font-weight: 700; letter-spacing: -.8px; }
.bonus-value.pending { font-size: 17px; letter-spacing: -.3px; }
.bonus-extra { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.bonus-detail { white-space: nowrap; }
.cta { grid-area: cta; display: flex; min-width: 0; }
.row-btn { width: 100%; min-height: 48px; border-radius: 12px; font-size: 14px; letter-spacing: .8px; background: linear-gradient(135deg, var(--gold), var(--gold-2)); }

/* ---------- MOTION ----------
   The list enters once; after that the motion lives in the top 3 only:
   a light runs around the focus card's border, and a wave rolls over the top 3 every few seconds.
   Rows 4+ stay still, so the eye always lands on the top. */
@property --spin {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
:root {
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --ease-soft: cubic-bezier(.45, 0, .55, 1);
    --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* One-time entrance of the first rows (html.js is set inline in <head>). */
.js .brand.is-enter { animation: row-in .6s calc(150ms + var(--i, 0) * 70ms) var(--ease-out) both; }
.js .brand.is-enter .logo img { animation: logo-in .7s calc(210ms + var(--i, 0) * 70ms) var(--ease-back) both; }
@keyframes row-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
@keyframes logo-in {
    from { opacity: 0; transform: scale(.8); }
    to { opacity: 1; transform: none; }
}

/* Hover. */
.logo img { transition: transform .3s var(--ease-back); }
.brand:hover .logo img { transform: scale(1.08); }
.row-btn { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .2s var(--ease-out), box-shadow .2s ease; }
.row-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255, 176, 58, .3); }
.hero-btn svg { transition: transform .2s var(--ease-out); }
.hero-btn:hover svg { transform: translateX(3px); }

/* Rows 4+ get an outline button, so the bright buttons of the top 3 stand out. */
.brand:nth-child(n + 4) .row-btn {
    border-color: rgba(255, 198, 92, .45);
    background: rgba(255, 198, 92, .06);
    color: var(--gold);
}
.brand:nth-child(n + 4) .row-btn:hover { background: var(--gold); color: #211706; }

/* Focus card (#1, or the next unopened top bonus): a golden light runs around its border. */
.brand.is-focus { border-color: rgba(255, 198, 92, .3); }
.brand.is-focus::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 1;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--spin), transparent 0 55%, rgba(255, 176, 58, .25) 68%, #ffc65c 82%, #fff3cf 88%, #ffb03a 93%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: border-spin 3.6s linear infinite;
}
@keyframes border-spin { to { --spin: 360deg; } }

/* Soft warm halo behind the focus card that breathes. */
.brand.is-focus::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -2;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 10px 40px rgba(255, 176, 58, .22);
    animation: focus-breathe 3.6s var(--ease-soft) infinite;
}
@keyframes focus-breathe {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

/* Button shine + glow. */
.row-btn, .hero-btn { position: relative; isolation: isolate; overflow: hidden; }
.row-btn .btn-label, .hero-btn .btn-label, .hero-btn svg { position: relative; z-index: 1; }
.row-btn::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -40%;
    bottom: -40%;
    left: 0;
    width: 42%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12) 20%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .12) 80%, transparent);
    transform: translateX(-150%) skewX(-20deg);
}

/* The wave: rolls over the top 3 (staggered), then rests. Driven by .is-wave from JS. */
.row-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.row-glow::before {
    content: "";
    position: absolute;
    inset: 0 -40%;
    opacity: 0;
    background: linear-gradient(105deg, transparent 12%, rgba(144, 42, 26, .18) 30%, rgba(238, 139, 35, .36) 46%, rgba(255, 212, 115, .28) 55%, transparent 76%);
    transform: translate3d(-45%, 0, 0);
}
.brand.is-wave .row-glow::before { animation: row-flow 1.4s var(--wave-delay, 0ms) ease-in-out both; }
.brand.is-wave .logo img,
.brand.is-logo-wave .logo img { animation: logo-pop .8s calc(var(--wave-delay, 0ms) + 120ms) var(--ease-back) both; }
.brand.is-wave .row-btn { animation: button-pop .9s calc(var(--wave-delay, 0ms) + 260ms) var(--ease-soft) both; }
.brand.is-wave .row-btn::after { animation: button-shine 1s calc(var(--wave-delay, 0ms) + 320ms) ease-in-out both; }
@keyframes row-flow {
    0% { opacity: 0; transform: translate3d(-45%, 0, 0); }
    20%, 65% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(45%, 0, 0); }
}
@keyframes logo-pop {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.12); }
}
@keyframes button-pop {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 198, 92, 0); }
    45% { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(255, 198, 92, .22), 0 10px 28px rgba(255, 176, 58, .35); }
}
@keyframes button-shine {
    0% { opacity: 0; transform: translateX(-150%) skewX(-20deg); }
    25%, 65% { opacity: .8; }
    100% { opacity: 0; transform: translateX(400%) skewX(-20deg); }
}

/* Spotlight: the bigger, one-time version when the player comes back to the tab. */
.brand.is-spotlight .row-glow::before { animation: row-flow 1.6s .1s ease-in-out both; }
.brand.is-spotlight .logo img { animation: logo-pop 1s .15s var(--ease-back) both; }
.brand.is-spotlight .row-btn { animation: button-pop 1.1s .4s var(--ease-soft) 2 both; }
.brand.is-spotlight .row-btn::after { animation: button-shine 1.1s .5s ease-in-out both; }
.brand.is-spotlight::after { animation: focus-flash 1.8s ease-out both, focus-breathe 3.6s 1.8s var(--ease-soft) infinite; }
@keyframes focus-flash {
    0% { opacity: 0; }
    30% { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 198, 92, .6), 0 16px 54px rgba(255, 176, 58, .45); }
    100% { opacity: 1; }
}

/* Opened offers step back. */
.brand.is-opened .row-btn,
.brand.is-opened:nth-child(n + 4) .row-btn {
    border-color: rgba(255, 255, 255, .16);
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}
.brand.is-opened .row-btn:hover { border-color: rgba(255, 198, 92, .45); color: var(--gold); }
.brand.is-opened .logo img { opacity: .7; }

/* ">>>" chevrons inside "Spielen": they flow toward the edge of the button.
   Top 3 flow all the time; rows 4+ flow on hover; opened offers stop. */
.btn-chevrons {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    margin-left: -2px;
}
.btn-chevrons i {
    display: block;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 1px;
    opacity: .3;
    transform: rotate(45deg);
}
.btn-chevrons i + i { margin-left: 1px; }
.brand:nth-child(-n + 3) .btn-chevrons i,
.brand:hover .btn-chevrons i { animation: chevron-flow 2.6s ease-in-out infinite; }
.btn-chevrons i:nth-child(2) { animation-delay: .3s !important; }
.btn-chevrons i:nth-child(3) { animation-delay: .6s !important; }
.brand.is-opened .btn-chevrons i { animation: none; opacity: .3; }
@keyframes chevron-flow {
    0%, 100% { opacity: .25; transform: translateX(-1px) rotate(45deg); }
    30% { opacity: 1; transform: translateX(1.5px) rotate(45deg); }
    60% { opacity: .25; transform: translateX(2px) rotate(45deg); }
}
/* During the wave and on hover the chevrons speed up a little. */
.brand.is-wave .btn-chevrons i,
.brand.is-spotlight .btn-chevrons i,
.row-btn:hover .btn-chevrons i { animation-duration: 1.8s; }

/* Slot reel: each letter of "Spielen" is its own reel that spins through symbols
   and lands back on the letter, left to right, with a small mechanical overshoot.
   JS builds the reels and adds .is-spinning. */
.reel {
    position: relative;
    display: inline-block;
    height: 1.2em;
    line-height: 1.2em;
    vertical-align: top;
    clip-path: inset(0 -.45em);
}
.reel-sizer { display: block; visibility: hidden; white-space: pre; }
/* column-reverse + bottom: 0 → the strip moves DOWN like a real slot reel. */
.reel-strip {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    transform: translate(-50%, 0);
}
.reel-strip span { display: block; height: 1.2em; white-space: pre; }
.btn.is-spinning .reel-strip {
    animation:
        reel-spin var(--reel-dur, 700ms) var(--reel-delay, 0ms) cubic-bezier(.3, .85, .35, 1.12) both,
        reel-blur var(--reel-dur, 700ms) var(--reel-delay, 0ms) linear both;
}
@keyframes reel-spin {
    from { transform: translate(-50%, 0); }
    to { transform: translate(-50%, calc(1.2em * var(--reel-steps, 5))); }
}
@keyframes reel-blur {
    0%, 85%, 100% { filter: none; }
    15%, 60% { filter: blur(.7px); }
}

/* Press feedback (taps on mobile feel physical). */
.btn:active { transform: scale(.97); transition-duration: .06s; }

/* Rows below the first screen fade in once as they scroll into view. */
.js .brand.is-pending { opacity: 0; transform: translateY(14px); }
.js .brand.is-revealed { animation: row-in .55s var(--reveal-delay, 0ms) var(--ease-out) both; }

/* ---------- BANNER ---------- */

/* "150 FS": bold white with a pale-gold shimmer. Padding (offset by negative margin) gives
   the glyphs room, so background-clip: text never cuts the tops or the last digit. */
.hero-number,
.hero-word {
    padding: .12em .14em .06em .04em;
    margin: -.12em -.14em -.06em -.04em;
    background: linear-gradient(100deg, #fff 0%, #fff 38%, #ffe2a6 50%, #fff 62%, #fff 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .55)) drop-shadow(0 0 28px rgba(255, 190, 80, .18));
    animation: text-shine 6s 1.2s ease-in-out infinite;
}
.hero-word { animation-delay: 1.45s; }
@keyframes text-shine {
    0% { background-position: 100% 0; }
    22%, 100% { background-position: 0 0; }
}

/* A soft light sweeps across the whole banner now and then. */
.hero::after {
    content: "";
    position: absolute;
    inset: -20% auto -20% 0;
    z-index: -1;
    width: 35%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 230, 170, .1) 45%, rgba(255, 240, 200, .16) 50%, rgba(255, 230, 170, .1) 55%, transparent);
    transform: translateX(-120%) skewX(-18deg);
    animation: hero-sweep 8s 2s ease-in-out infinite;
}
@keyframes hero-sweep {
    0% { transform: translateX(-120%) skewX(-18deg); }
    18%, 100% { transform: translateX(380%) skewX(-18deg); }
}

/* Promo code "ticket" + CTA on one row; the caption sits above both. */
.hero-action { min-width: 0; }
.hero-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "code btn";
    gap: 6px 10px;
    align-items: stretch;
}
.hero-btn { grid-area: btn; width: 100%; min-width: 0; min-height: 46px; padding: 10px 14px; }
.promo-code {
    grid-area: code;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 46px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 198, 92, .45);
    border-radius: 10px;
    background: linear-gradient(180deg, #17140e, #0b0a08);
    color: var(--gold);
    font: 700 15px/1 "Space Grotesk", Inter, sans-serif;
    letter-spacing: 1.5px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 230, 170, .08);
    transition: background .2s ease, border-color .2s ease, transform .2s var(--ease-out);
}
.promo-code:hover { background: linear-gradient(180deg, #211b10, #110f0a); border-color: rgba(255, 198, 92, .8); }
.promo-code:active { transform: scale(.98); }
.promo-code:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.promo-value { position: relative; z-index: 1; margin-right: -2px; }
.promo-icon { position: relative; z-index: 1; flex: 0 0 auto; width: 16px; height: 16px; opacity: .85; }
.promo-icon-done { display: none; }
/* shine over the code every few seconds, so the eye finds it */
.promo-code::after {
    content: "";
    position: absolute;
    inset: -30% auto -30% 0;
    width: 30%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 236, 190, .35), transparent);
    transform: translateX(-150%) skewX(-20deg);
    animation: promo-shine 5s 2.4s ease-in-out infinite;
}
@keyframes promo-shine {
    0% { transform: translateX(-150%) skewX(-20deg); }
    16%, 100% { transform: translateX(450%) skewX(-20deg); }
}
/* copied state */
.promo.is-copied .promo-code {
    border-color: var(--gold);
    background: linear-gradient(180deg, #2a2110, #15110a);
    box-shadow: 0 0 0 3px rgba(255, 198, 92, .18), 0 6px 18px rgba(0, 0, 0, .45);
    animation: promo-pop .45s var(--ease-back);
}
.promo.is-copied .promo-icon-copy { display: none; }
.promo.is-copied .promo-icon-done { display: block; animation: logo-in .35s var(--ease-back) both; }
@keyframes promo-pop {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.04); }
}


.outro { margin-top: 32px; padding-top: 24px; text-align: center; }
.outro h2 { margin: 0; font-size: clamp(22px, 4.6vw, 28px); letter-spacing: -.6px; }
.accent { color: var(--gold); }
.outro p { max-width: 580px; margin: 12px auto 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.report { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: rgba(9, 10, 14, .76); text-align: center; }
.report h3 { margin: 0; font-size: 17px; }
.report p { max-width: 540px; margin: 10px auto 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.mail { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid rgba(255, 198, 92, .3); border-radius: 8px; color: var(--gold); font-size: 13px; font-weight: 600; }
.mail:hover { background: rgba(255, 198, 92, .06); }
.mail svg { flex: 0 0 auto; width: 16px; height: 16px; }
.footer { margin-top: 28px; padding: 22px 0 32px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 11px; line-height: 1.65; }
.footer p { max-width: 640px; margin: 0 auto; }
.footer .copy { margin-top: 12px; color: #787b87; }

@media (min-width: 621px) and (max-width: 880px) {
    .brand { grid-template-columns: 32px 120px minmax(0, 1fr) minmax(120px, 1fr); grid-template-areas: "num logo name meta" "num logo bonus cta"; gap: 8px 16px; }
    .logo { height: 40px; }
    .logo img { max-width: 100px; }
    .offer-meta { text-align: right; }
}

@media (max-width: 760px) {
    .hero { gap: 20px; padding: 24px; }
    .hero-number { font-size: 90px; letter-spacing: -5px; }
    .hero-word { font-size: 50px; }
    .hero-description { font-size: 12px; }
    .hero-btn { min-width: 0; width: 100%; }
    .promo-code { font-size: 14px; letter-spacing: 1.2px; padding: 8px; }
}

@media (max-width: 620px) {
    .wrap { padding: 12px 12px 0; }
    /* centered on phones */
    .hero { display: block; padding: 18px 16px 16px; border-radius: 14px; text-align: center; }
    .hero-amount { justify-content: center; gap: 10px; }
    .hero-number { font-size: 88px; letter-spacing: -5px; }
    .hero-word { font-size: 48px; }
    .hero-description { max-width: 340px; margin: 6px auto 10px; font-size: 12px; line-height: 1.45; }
    .hero-btn { min-height: 44px; padding: 8px 10px; gap: 6px; font-size: 12.5px; }
    .hero-btn svg { width: 13px; height: 13px; }
    .hero-cta { gap: 5px 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .promo-code { min-height: 44px; gap: 6px; padding: 6px 8px; font-size: 13.5px; letter-spacing: 1px; }
    .promo-icon { width: 14px; height: 14px; }
    .casinos { margin-top: 18px; }
    .list-heading { gap: 8px; margin-bottom: 8px; }
    .list-heading h2 { font-size: 16px; }
    .list-heading p { font-size: 10px; }
    .list { gap: 8px; }
    .brand { grid-template-columns: 90px minmax(100px, 1fr) minmax(76px, 1.25fr); grid-template-areas: "logo bonus cta"; gap: 12px; min-height: 64px; padding: 8px 10px 8px 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(9, 10, 14, .72); }
    .brand.top { border-color: rgba(255, 198, 92, .35); background: linear-gradient(90deg, rgba(51, 36, 15, .78), rgba(9, 10, 14, .64)); }
    .num, .name, .offer-meta { display: none; }
    .logo { height: 30px; }
    .bonus { justify-self: center; width: max-content; max-width: 100%; text-align: left; }
    .bonus-value { display: block; font-size: 19px; line-height: 1.05; letter-spacing: -.4px; }
    .bonus-value.pending { font-size: 14px; }
    .bonus-extra { display: block; margin-top: 2px; font-size: 11px; line-height: 1.18; }
    .bonus-detail { display: block; }
    .geo-fi .bonus-detail, .geo-dk .bonus-detail, .geo-cz .bonus-detail, .geo-no .bonus-detail, .geo-es .bonus-detail, .geo-be .bonus-detail, .geo-ch .bonus-detail, .geo-pl .bonus-detail, .geo-it .bonus-detail, .geo-ie .bonus-detail { white-space: normal; }
    .row-btn { min-height: 44px; padding: 8px 6px; border-radius: 10px; font-size: 12px; letter-spacing: .4px; }
    .row-btn { gap: 6px; }
    .btn-chevrons i { width: 5px; height: 5px; border-width: 1.5px; }
    .btn-chevrons i + i { margin-left: 0; }
    .outro { margin-top: 24px; padding-top: 12px; }
    .outro p { font-size: 13px; }
    .report { padding: 20px 14px; }
}

@media (max-width: 359px) {
    .wrap { padding: 10px 10px 0; }
    .hero { padding: 16px 14px 14px; }
    .hero-number { font-size: 84px; }
    .hero-word { font-size: 46px; }
    .hero-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hero-btn svg { display: none; }
    .promo-code { font-size: 12.5px; letter-spacing: .6px; }
    .promo-icon { width: 13px; height: 13px; }
    .brand { grid-template-columns: 76px minmax(96px, 1fr) minmax(76px, 1.25fr); gap: 8px; }
    .logo { height: 27px; }
    .geo-be .row-btn .btn-chevrons, .geo-ch .row-btn .btn-chevrons { display: none; }
    .list-heading h2 { font-size: 15px; }
    .list-heading p { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .brand.is-focus::before { background: linear-gradient(#ffc65c, #ffb03a); }
}