/* ============================================================ SPINIA — satellite theme. Prefix: sp- Palette locked to the real SPINIA logo (spinialogo.svg). ============================================================ */ :root{ /* logo-derived brand colours */ --sp-green:#37AC55; --sp-lime:#9BC230; --sp-amber:#F5AE33; --sp-orange:#E29F2F; --sp-red:#E44031; --sp-magenta:#8B298F; --sp-blue:#2377B1; --sp-indigo:#4f55a7; --sp-violet:#7654a4; --sp-navy:#102444; /* site accents */ --sp-teal:#16c4bb; --sp-teal-2:#0fb3aa; --sp-mint:#e9f9f7; --sp-cream:#f4f8f7; --sp-bg:#ffffff; --sp-pink:#ff4d8d; --sp-pink-2:#ff2b7a; --sp-coral:#ff5a5f; --sp-coral-2:#ff3d6e; --sp-gold:#ffc21e; --sp-gold-2:#ffab00; --sp-ink:#16303a; --sp-deep:#0e3944; /* darkened so small text clears 4.5:1 on white/cream/mint/depcard tints */ --sp-muted:#5a6a70; --sp-teal-ink:#0a6f6a; --sp-line:#e4eeeb; --sp-line-2:#d4e6e2; --sp-max:1180px; --sp-rail:150px; --sp-body:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; --sp-display:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; --sp-shadow:0 10px 30px rgba(14,57,68,.10); --sp-shadow-lg:0 18px 50px rgba(14,57,68,.18); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* overflow-wrap: Greek and Hungarian carry long unbreakable words (e.g. "Szabályozott Tevékenységek Felügyeleti Hatósága") that pushed the layout 3-64px wide at 320-375px. Break them rather than let the page scroll. */ body{margin:0;font-family:var(--sp-body);color:var(--sp-ink);background:var(--sp-bg); font-size:16px;line-height:1.62;overflow-x:hidden;overflow-wrap:break-word} img{max-width:100%;display:block} a{color:var(--sp-teal-ink);text-decoration:none} h1,h2,h3{font-family:var(--sp-display);line-height:1.15;color:var(--sp-ink);font-weight:800} /* dark ring + light halo: clears 3:1 on the cream/mint/white surfaces AND on the dark ticker/footer, where the halo carries the contrast instead. */ :focus-visible{outline:3px solid var(--sp-navy);outline-offset:2px;border-radius:6px; box-shadow:0 0 0 6px rgba(255,255,255,.92)} .sp-footer :focus-visible,.sp-ticker :focus-visible,.sp-jackpot :focus-visible{ outline-color:#fff;box-shadow:0 0 0 6px rgba(16,36,68,.92)} /* skip link — ~40 focusable items sit between and the article */ .sp-skip{position:fixed;top:0;left:0;z-index:100;background:var(--sp-navy);color:#fff; padding:12px 20px;border-radius:0 0 12px 0;font-weight:800;font-size:.9rem; transform:translateY(-120%);transition:transform .18s} .sp-skip:focus{transform:none} /* ---------- Buttons ------------------------------------------------------ */ .sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;cursor:pointer; font-family:var(--sp-display);font-weight:800;letter-spacing:.02em;border-radius:999px;padding:.72em 1.5em; color:#fff;line-height:1;transition:transform .16s,box-shadow .16s,filter .16s;text-transform:uppercase;font-size:.9rem} .sp-btn:hover{transform:translateY(-2px);filter:saturate(1.08)} .sp-btn:active{transform:translateY(0)} /* CTA fills are deepened versions of the brand hues so white label text clears 4.5:1 (the bright brand tints measured 2.2-3.1:1). Hue is preserved. */ .sp-btn--coral{background:linear-gradient(180deg,#dd2f3d,#c92433);box-shadow:0 8px 20px rgba(201,36,51,.35)} .sp-btn--teal{background:linear-gradient(180deg,#0b857e,#07736d);box-shadow:0 8px 20px rgba(7,115,109,.32)} .sp-btn--pink{background:linear-gradient(180deg,#e02a6a,#c41e5a);box-shadow:0 8px 20px rgba(196,30,90,.32)} .sp-btn--gold{background:linear-gradient(180deg,var(--sp-gold),var(--sp-gold-2));color:#4a3300;box-shadow:0 8px 20px rgba(255,171,0,.35)} .sp-btn--lg{font-size:1.05rem;padding:.9em 1.9em} /* ============================================================ LEFT RAIL (desktop >=1180px) ============================================================ */ /* no scrollport: it produced a visible scrollbar under Live chat and also clipped the language dropdown horizontally. Gaps are tuned so the rail fits short screens. */ .sp-rail{position:fixed;top:0;left:0;width:var(--sp-rail);height:100vh;z-index:60;background:#fff; border-right:1px solid var(--sp-line);display:none;flex-direction:column;align-items:center; padding:10px 6px;gap:9px;overflow:visible} .sp-rail__logo{width:92px;flex:0 0 auto;display:block} .sp-rail__logo img{width:100%;height:auto} .sp-rail__auth{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center} .sp-rail__auth .sp-btn{width:126px;padding:.72em .55em;font-size:.72rem} .sp-rail__nav{display:flex;flex-direction:column;gap:5px;width:100%;align-items:center;margin-top:2px} .sp-rail__item{display:flex;flex-direction:column;align-items:center;gap:3px;width:126px;padding:9px 6px; border-radius:14px;color:var(--sp-muted);font-size:.68rem;font-weight:700;text-transform:uppercase; letter-spacing:.02em;transition:background .15s,color .15s} .sp-rail__item:hover,.sp-rail__item.is-active{background:var(--sp-mint);color:var(--sp-teal-ink)} .sp-rail__item svg{width:22px;height:22px;fill:currentColor} .sp-rail__vip{width:126px;border-radius:16px;padding:11px 6px;text-align:center; background:linear-gradient(160deg,#1fd0c6,#12a79f);color:#053f3b;font-weight:800;font-size:.66rem; text-transform:uppercase;box-shadow:var(--sp-shadow);transition:transform .15s} .sp-rail__vip:hover{transform:translateY(-2px)} .sp-rail__vip b{display:block;font-size:1.4rem;line-height:1;margin-bottom:2px} .sp-rail__foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;align-items:center;width:100%;padding-top:10px} .sp-rail__foot > a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--sp-muted); font-size:.56rem;font-weight:700;text-transform:uppercase;text-align:center} /* ============================================================ MOBILE TOP BAR + DRAWER ============================================================ */ .sp-topbar{position:sticky;top:0;z-index:55;background:#fff;border-bottom:1px solid var(--sp-line); display:flex;align-items:center;gap:10px;padding:9px 14px} .sp-topbar__logo img{height:38px;width:auto} .sp-topbar__spacer{flex:1} .sp-burger{width:44px;height:40px;border:0;border-radius:12px;background:var(--sp-mint);cursor:pointer; display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:4px} .sp-burger span{width:20px;height:2px;background:var(--sp-teal-ink);border-radius:2px} .sp-drawer-overlay{position:fixed;inset:0;background:rgba(10,43,52,.55);opacity:0;visibility:hidden;transition:opacity .25s;z-index:80} .sp-drawer-overlay.open{opacity:1;visibility:visible} /* visibility (not just translate) so the closed drawer leaves the tab order */ .sp-drawer{position:fixed;top:0;left:0;height:100vh;width:284px;max-width:86vw;background:#fff;z-index:81; transform:translateX(-100%);visibility:hidden;transition:transform .28s,visibility .28s; padding:16px;overflow-y:auto;box-shadow:var(--sp-shadow-lg)} .sp-drawer.open{transform:none;visibility:visible} .sp-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .sp-drawer__head img{height:36px} .sp-drawer-close{width:38px;height:38px;border:0;border-radius:10px;background:var(--sp-mint);color:var(--sp-teal-ink);font-size:1.2rem;cursor:pointer;flex:0 0 auto} /* :not(.sp-btn) — these generic link rules used to outrank .sp-btn and repaint the drawer's CTA text dark (and the :hover rule turned it mint). Exclude buttons. */ .sp-drawer a:not(.sp-btn){display:block;padding:11px 12px;border-radius:12px;color:var(--sp-ink);font-weight:700;font-size:.95rem} .sp-drawer a:not(.sp-btn):hover,.sp-drawer a:not(.sp-btn).is-active{background:var(--sp-mint);color:var(--sp-teal-ink)} /* Stacked, not side-by-side: long labels ("PŘIHLÁSIT SE" / "REGISTROVAT SE", "REGISTRIEREN") do not fit two-up on a 280px drawer and broke the buttons. The colour override is required because `.sp-drawer a` (0-1-1) outranks `.sp-btn` (0-1-0) and was repainting the button text with the dark ink. */ .sp-drawer__auth{display:flex;flex-direction:column;gap:10px;margin:12px 0} .sp-drawer__auth .sp-btn{width:100%;padding:.8em 1em;font-size:.86rem;text-align:center;color:#fff} .sp-drawer__auth .sp-btn--gold{color:#3d2a00} .sp-drawer__label{margin:16px 0 4px;padding:0 12px;font-size:.66rem;font-weight:800; text-transform:uppercase;letter-spacing:.06em;color:var(--sp-muted);border-top:1px solid var(--sp-line);padding-top:14px} .sp-drawer a img{width:21px;height:14px;border-radius:3px;display:inline-block;vertical-align:-2px;margin-right:9px} /* ============================================================ SHELL ============================================================ */ .sp-container{max-width:var(--sp-max);margin:0 auto;padding:0 18px} /* ============================================================ HERO CAROUSEL ============================================================ */ /* match the 1708x360 artwork's own ratio so wide screens show the whole banner instead of slicing it vertically; the cap only bites on ultra-wide monitors */ .sp-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#3fbf9a,#0e8f88); aspect-ratio:1708/360;max-height:460px} .sp-hero__track{position:absolute;inset:0} .sp-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.03); transition:opacity .7s ease,transform 1.2s ease,visibility .7s} .sp-hero__slide.is-active{opacity:1;visibility:visible;transform:scale(1)} .sp-hero__slide img{width:100%;height:100%;object-fit:cover;object-position:left center} /* vertical dots on the right, like the original */ .sp-hero__dots{position:absolute;top:50%;right:14px;transform:translateY(-50%);z-index:3; display:flex;flex-direction:column;gap:9px} .sp-hero__dot{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.85); background:transparent;cursor:pointer;padding:0;transition:transform .18s,background .18s,box-shadow .18s} .sp-hero__dot:hover{transform:scale(1.25)} .sp-hero__dot.is-active{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.28)} @media(max-width:640px){ /* deliberately taller than the artwork ratio: cover crops the right-hand art and keeps the left-anchored headline + Get bonus button legible */ .sp-hero{aspect-ratio:auto;height:clamp(150px,42vw,220px)} .sp-hero__dots{right:8px;gap:7px} .sp-hero__dot{width:9px;height:9px} } /* ============================================================ CATEGORY ROW (icons, under the hero — like the original) ============================================================ */ .sp-catnav{background:#fff} .sp-catnav__row{max-width:var(--sp-max);margin:0 auto;display:flex;gap:0;overflow-x:auto; padding:16px 14px;scrollbar-width:none;justify-content:space-between} .sp-catnav__row::-webkit-scrollbar{display:none} .sp-cat{flex:1 0 auto;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:7px; padding:6px 8px;color:var(--sp-muted);font-weight:700;font-size:.64rem;white-space:nowrap; text-transform:uppercase;letter-spacing:.03em;position:relative;transition:color .15s,transform .15s} .sp-cat + .sp-cat::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--sp-line)} .sp-cat svg{width:30px;height:30px;transition:transform .18s} .sp-cat:hover{color:var(--sp-ink)} .sp-cat:hover svg{transform:translateY(-3px) scale(1.08)} .sp-cat.is-active{color:var(--sp-teal-ink)} /* ---------- Toolbar: providers + search -------------------------------- */ .sp-toolbar{max-width:var(--sp-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:6px 18px 16px;flex-wrap:wrap} .sp-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--sp-line-2);border-radius:999px; padding:10px 18px;color:var(--sp-ink);font-weight:700;font-size:.78rem;text-transform:uppercase; letter-spacing:.03em;transition:border-color .15s,box-shadow .15s,transform .15s;background:#fff} .sp-chip:hover{border-color:var(--sp-teal);box-shadow:0 6px 16px rgba(22,196,187,.18);transform:translateY(-1px)} .sp-chip svg{width:17px;height:17px;fill:var(--sp-teal)} .sp-search__box{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--sp-line-2); border-radius:999px;padding:10px 18px;color:var(--sp-muted);font-weight:600;font-size:.82rem; min-width:0;flex:0 1 230px; text-transform:uppercase;letter-spacing:.03em;transition:border-color .15s,box-shadow .15s} .sp-search__box:hover{border-color:var(--sp-teal);box-shadow:0 6px 16px rgba(22,196,187,.18)} .sp-search__box svg{width:17px;height:17px;fill:var(--sp-teal-ink);flex:0 0 auto} /* must be allowed to wrap AND to shrink: with nowrap, the longer translations ("Βρείτε το παιχνίδι σας", "Találd meg a játékod") forced 3-64px of page overflow at 320-375px. A two-line chip is cosmetic; a horizontal scroll is a defect. */ .sp-search__box span{flex:1;min-width:0} /* ============================================================ WINNERS TICKER ============================================================ */ .sp-ticker{background:var(--sp-deep);overflow:hidden;position:relative} .sp-ticker::before,.sp-ticker::after{content:"";position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none} .sp-ticker::before{left:0;background:linear-gradient(90deg,var(--sp-deep),transparent)} .sp-ticker::after{right:0;background:linear-gradient(270deg,var(--sp-deep),transparent)} .sp-ticker-track{display:flex;gap:26px;white-space:nowrap;padding:11px 0;will-change:transform} .sp-ticker-item{display:inline-flex;align-items:center;gap:7px;color:#cfeee9;font-size:.85rem;font-weight:600} .sp-ticker-item b{color:#fff} .sp-ticker-item .win{color:var(--sp-teal);font-weight:800} .sp-ticker-item .win.big{color:#ffe14d;text-shadow:0 0 10px rgba(255,225,77,.55)} .sp-ticker-item .game{color:#9ec7c1} /* ============================================================ WAVE scallop dividers ============================================================ */ .sp-wave{height:22px;background-repeat:repeat-x;background-size:38px 22px; background-image:radial-gradient(20px 22px at 19px 26px,transparent 18px,var(--sp-mint) 19px)} .sp-wave--up{transform:rotate(180deg)} .sp-wave--line{height:14px;background-repeat:repeat-x;background-size:26px 14px; background-image:radial-gradient(13px 14px at 13px 17px,transparent 11px,var(--sp-line) 12px)} /* ============================================================ MAIN / PROSE ============================================================ */ .sp-main{background:var(--sp-cream);padding:34px 0 10px} .sp-prose{max-width:880px;margin:0 auto;padding:0 18px} .sp-h1{text-align:center;font-size:clamp(1.7rem,4.4vw,2.5rem);font-weight:900;margin:6px 0 6px;color:var(--sp-ink)} /* brand kicker: keeps the brand inside the H1 without touching the document's own title */ .sp-h1-brand{display:block;font-size:.4em;font-weight:900;letter-spacing:.16em;text-transform:uppercase; color:var(--sp-teal-ink);margin-bottom:6px} .sp-pagehero .sp-h1-brand{color:var(--sp-teal)} .sp-lead{text-align:center;color:var(--sp-muted);font-size:1.06rem;max-width:730px;margin:0 auto 10px} .sp-prose p{margin:0 0 1.05em} .sp-prose h2{display:flex;align-items:center;justify-content:center;gap:14px;text-align:center; text-transform:uppercase;color:var(--sp-teal-ink);letter-spacing:.04em; font-size:clamp(1.15rem,2.8vw,1.55rem);margin:2.2em 0 .9em} .sp-prose h2::before,.sp-prose h2::after{content:"";height:9px;flex:0 1 74px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='9'%3E%3Cpath d='M0 5 Q6 0 12 5 T24 5 T36 5' fill='none' stroke='%2316c4bb' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:repeat-x;background-size:24px 9px;opacity:.85} .sp-prose h3{font-size:1.12rem;color:var(--sp-teal-ink);margin:1.5em 0 .5em} .sp-prose ul{list-style:none;padding:0;margin:0 0 1.1em} .sp-prose ul li{position:relative;padding:4px 0 4px 30px;margin:0} .sp-prose ul li::before{content:"";position:absolute;left:6px;top:12px;width:8px;height:8px; border-right:2.4px solid var(--sp-teal);border-bottom:2.4px solid var(--sp-teal);transform:rotate(-45deg)} .sp-prose ol{padding-left:0;margin:0 0 1.1em;counter-reset:s;list-style:none} .sp-prose ol li{position:relative;padding:6px 0 6px 44px;margin:0 0 6px;counter-increment:s} .sp-prose ol li::before{content:counter(s);position:absolute;left:0;top:6px;width:30px;height:30px;border-radius:50%; background:linear-gradient(180deg,var(--sp-teal),var(--sp-teal-2));color:#fff;font-weight:800; display:flex;align-items:center;justify-content:center;font-size:.9rem;box-shadow:0 4px 10px rgba(15,179,170,.3)} /* ---------- Tables (only the table scrolls) ---------------------------- */ .sp-table-wrap{margin:1.1em 0 1.4em;border-radius:18px;overflow:hidden;box-shadow:var(--sp-shadow);background:#fff} .sp-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .sp-table{border-collapse:collapse;width:100%;min-width:440px;font-size:.94rem} .sp-table caption{text-align:left;font-weight:800;color:var(--sp-teal-ink);padding:14px 16px 0; text-transform:uppercase;letter-spacing:.04em;font-size:.8rem} .sp-table th,.sp-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--sp-line)} .sp-table thead th{background:var(--sp-mint);color:var(--sp-teal-ink);text-transform:uppercase;font-size:.72rem;letter-spacing:.05em} .sp-table tbody tr:nth-child(even){background:#fafdfc} .sp-table tbody tr:hover{background:var(--sp-mint)} .sp-table td:first-child{font-weight:700;color:var(--sp-ink)} .sp-table tbody tr:last-child td{border-bottom:0} /* ---------- Pro / con cards -------------------------------------------- */ .sp-pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.2em 0 1.4em} .sp-pc__col{border-radius:20px;padding:18px 18px 10px;box-shadow:var(--sp-shadow)} .sp-pc__col--pro{background:linear-gradient(180deg,#effaf0,#e3f6e6);border:1px solid #cfeccf} .sp-pc__col--con{background:linear-gradient(180deg,#fff2f4,#ffe6ea);border:1px solid #f6cdd6} .sp-pc__h{display:flex;align-items:center;gap:8px;font-weight:800;text-transform:uppercase; letter-spacing:.04em;font-size:.9rem;margin-bottom:8px} .sp-pc__col--pro .sp-pc__h{color:#2f8a3f} .sp-pc__col--con .sp-pc__h{color:#d1476a} .sp-pc__col--pro ul li::before{border-color:var(--sp-green)} .sp-pc__col--con ul li{padding-left:30px} .sp-pc__col--con ul li::before{border:0;content:"—";left:8px;top:4px;width:auto;height:auto;transform:none;color:#d1476a;font-weight:900} /* ============================================================ PROMO BANDS ============================================================ */ .sp-bonusband{position:relative;background:linear-gradient(160deg,var(--sp-pink),var(--sp-pink-2));color:#fff; text-align:center;padding:28px 18px;border-radius:24px;margin:1.6em 0;box-shadow:var(--sp-shadow-lg);overflow:hidden} .sp-bonusband h3{color:#fff;font-size:clamp(1.3rem,3.6vw,2rem);margin:0 0 4px;font-weight:900;text-shadow:0 3px 0 rgba(150,20,70,.3)} .sp-bonusband p{margin:0 0 14px;opacity:.95;font-weight:600} .sp-bonusband::before,.sp-bonusband::after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.12)} .sp-bonusband::before{top:-42px;left:-32px} .sp-bonusband::after{bottom:-52px;right:-22px} .sp-deposits{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.4em 0} .sp-depcard{background:linear-gradient(170deg,#eafaf8,#d9f2ee);border:1px solid var(--sp-line-2); border-radius:22px;padding:22px 20px;text-align:center;box-shadow:var(--sp-shadow);transition:transform .18s,box-shadow .18s} .sp-depcard:hover{transform:translateY(-4px);box-shadow:var(--sp-shadow-lg)} .sp-depcard__n{width:56px;height:56px;margin:0 auto 10px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe38a,var(--sp-gold-2));color:#5a3d00;font-weight:900; font-size:1.7rem;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 3px rgba(180,120,0,.3)} .sp-depcard h3{margin:0 0 6px;text-transform:uppercase;letter-spacing:.04em;color:var(--sp-teal-ink);font-size:.9rem} .sp-depcard p{margin:0 0 14px;color:var(--sp-muted);font-size:.92rem} .sp-jackpot{position:relative;background:radial-gradient(120% 120% at 50% -10%,#175a68,var(--sp-deep) 62%); color:#fff;text-align:center;border-radius:26px;padding:32px 18px;margin:1.6em 0;overflow:hidden;box-shadow:var(--sp-shadow-lg)} .sp-jackpot__label{text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:var(--sp-teal);font-size:.8rem;margin-bottom:8px} .sp-jackpot__num{font-family:var(--sp-display);font-weight:900;font-size:clamp(2rem,7vw,3.6rem); background:linear-gradient(180deg,#fff3c4,var(--sp-gold));-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--sp-gold);line-height:1.1;display:inline-block;padding:4px 20px} .sp-jackpot__cta{margin-top:14px} .sp-slotcomp{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center; text-align:center;background:linear-gradient(160deg,#1fd0c6,#0e8f88);color:#fff;border-radius:24px; padding:26px 20px;margin:1.6em 0;box-shadow:var(--sp-shadow)} .sp-slotcomp h3{color:#fff;margin:0 0 4px;font-size:clamp(1.2rem,3vw,1.7rem);font-weight:900} .sp-slotcomp p{margin:0 0 12px;opacity:.95;max-width:520px} .sp-flag{font-size:1.7rem} /* ============================================================ GAME CARD GRID (real Spinia-style covers) ============================================================ */ .sp-games{margin:1.4em 0} .sp-games__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .sp-games__count{color:var(--sp-muted);font-size:.8rem;font-weight:600} .sp-games__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .sp-card{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--sp-shadow);background:#0e3944; aspect-ratio:200/269;transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s} .sp-card img{width:100%;height:100%;object-fit:cover} .sp-card::after{content:"";position:absolute;inset:0;border-radius:14px; box-shadow:inset 0 0 0 2px rgba(255,255,255,0);transition:box-shadow .2s} .sp-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 34px rgba(14,57,68,.32)} .sp-card:hover::after{box-shadow:inset 0 0 0 2px var(--sp-teal)} .sp-card__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,rgba(14,57,68,0) 40%,rgba(14,57,68,.75));opacity:0;transition:opacity .2s;z-index:2} .sp-card:hover .sp-card__play{opacity:1} .sp-card__play span{background:linear-gradient(180deg,var(--sp-coral),var(--sp-coral-2));color:#fff; font-weight:800;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;padding:8px 14px;border-radius:999px; box-shadow:0 6px 14px rgba(0,0,0,.3)} .sp-loadmore{display:flex;justify-content:center;margin-top:18px} /* ============================================================ SCORECARD / FAQ / BYLINE ============================================================ */ .sp-score__overall{text-align:center;margin:1em 0 0} .sp-score__badge{display:inline-flex;align-items:baseline;gap:8px; background:linear-gradient(180deg,var(--sp-teal),var(--sp-teal-2));color:#fff;padding:12px 28px;border-radius:999px; box-shadow:var(--sp-shadow);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem} .sp-score__badge b{font-size:1.8rem;line-height:1} .sp-faq{max-width:840px;margin:1em auto 0} .sp-faq-item{background:#fff;border:1px solid var(--sp-line);border-radius:16px;margin-bottom:10px; overflow:hidden;box-shadow:0 4px 14px rgba(14,57,68,.05);transition:box-shadow .18s} .sp-faq-item:hover{box-shadow:0 8px 22px rgba(14,57,68,.10)} .sp-faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:15px 50px 15px 18px; position:relative;font-family:var(--sp-display);font-weight:800;font-size:1rem;color:var(--sp-ink)} .sp-faq-q::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.5rem; color:var(--sp-teal);font-weight:400} .sp-faq-item.open .sp-faq-q::after{content:"–"} /* visibility keeps collapsed answers out of the a11y tree and the tab order, matching what aria-expanded="false" promises */ .sp-faq-a{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility .3s} .sp-faq-item.open .sp-faq-a{visibility:visible} .sp-faq-a__inner{padding:0 18px 16px;color:var(--sp-muted)} .sp-byline{background:linear-gradient(180deg,#fff8ec,#fff1d6);border:1px solid #ffe2a6; border-left:5px solid var(--sp-gold);border-radius:16px;padding:16px 18px;margin:1.6em 0;color:#6a5320;font-size:.94rem} .sp-byline b{color:#4a3300} .sp-legal{color:var(--sp-muted);font-size:.86rem;border-top:1px solid var(--sp-line);padding-top:16px;margin-top:1.6em} /* ============================================================ LEGAL PAGES (no carousel / ticker / wheel — utility pages) ============================================================ */ .sp-pagehero{background:radial-gradient(120% 150% at 50% -25%,#175a68,var(--sp-deep) 65%);color:#fff;padding:36px 0 32px;text-align:center} .sp-pagehero .sp-h1{color:#fff;margin:0 0 6px;font-size:clamp(1.5rem,3.6vw,2.15rem)} .sp-pagehero__meta{color:#8fd8d1;font-size:.85rem;margin:0} .sp-legalpage{padding-top:28px;padding-bottom:8px} /* legal headings stay quiet and left-aligned — the wavy centred h2 is for the review */ .sp-legalpage h2{display:block;text-align:left;font-size:1.12rem;color:var(--sp-teal-ink); margin:1.9em 0 .5em;text-transform:none;letter-spacing:0} .sp-legalpage h2::before,.sp-legalpage h2::after{content:none;display:none} .sp-legalpage p{color:#3d5259} .sp-legalpage strong{color:var(--sp-ink)} /* ============================================================ FOOTER ============================================================ */ /* Scalloped seam into the footer. The field is the FOOTER colour and the domes are cream hanging off the top edge: the top row is 100% cream (merges with the content above) and the bottom strip is 100% navy (merges with the footer), so neither side can show a gap. Dome radius = half the tile so they tile flush. */ .sp-foot-wave{height:24px;background-color:var(--sp-deep); background-image:radial-gradient(circle 19px at 19px 0,var(--sp-cream) 18px,transparent 19px); background-size:38px 24px;background-repeat:repeat-x;margin-bottom:-1px} .sp-footer{background:var(--sp-deep);color:#bcd6d2;padding:8px 0 26px} .sp-footer__links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08)} .sp-footer__links a{color:#cfe6e2;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;transition:color .15s} .sp-footer__links a:hover{color:#fff} .sp-logos{display:flex;flex-wrap:wrap;gap:16px 26px;justify-content:center;align-items:center;padding:20px 18px} .sp-brand-logo{height:24px;width:auto;opacity:.68;filter:brightness(0) invert(1);transition:opacity .15s} .sp-brand-logo:hover{opacity:1} .sp-logos--pay .sp-brand-logo{height:20px} .sp-footer__legal{max-width:var(--sp-max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px; padding:16px 18px 0;font-size:.76rem;line-height:1.5;color:#9cbcb7} .sp-footer__legal .sp-mga{font-weight:900;color:#fff;font-size:1.1rem;letter-spacing:.05em} .sp-footer__badges{margin-left:auto;display:flex;align-items:center;gap:14px} .sp-badge-safe{display:flex;align-items:center;gap:6px;color:#7fe0d8;font-weight:800;font-size:.8rem} .sp-badge-18{width:34px;height:34px;border-radius:50%;background:var(--sp-red);color:#fff;display:flex; align-items:center;justify-content:center;font-weight:900;font-size:.8rem;flex:0 0 auto} /* ============================================================ LANGUAGE dropdown ============================================================ */ .sp-lang{position:relative} .sp-lang-cur{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:var(--sp-muted); font-weight:700;font-size:.56rem;text-transform:uppercase;background:none;border:0;padding:2px;font-family:inherit} .sp-lang-cur img{width:22px;height:15px;border-radius:3px} .sp-lang-menu{position:absolute;bottom:120%;left:50%;transform:translateX(-50%);background:#fff; border:1px solid var(--sp-line);border-radius:14px;box-shadow:var(--sp-shadow-lg);padding:6px;display:none; min-width:158px;max-height:290px;overflow:auto;z-index:70} .sp-lang.open .sp-lang-menu{display:block} /* fixed (not absolute) so the menu can never be clipped by the rail column */ .sp-lang--rail .sp-lang-menu{position:fixed;left:calc(var(--sp-rail) + 8px);bottom:16px;transform:none;min-width:172px} .sp-lang-menu a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;color:var(--sp-ink); font-size:.82rem;font-weight:600;text-transform:none} .sp-lang-menu a:hover{background:var(--sp-mint)} .sp-lang-menu img{width:21px;height:14px;border-radius:3px} /* ============================================================ SCROLL-REVEAL ============================================================ */ .js [data-animate]{opacity:0;will-change:transform,opacity} .js [data-animate="up"]{transform:translateY(24px)} .js [data-animate="left"]{transform:translateX(-26px)} .js [data-animate="right"]{transform:translateX(26px)} .js [data-animate="pop"]{transform:scale(.92)} .js [data-animate].sp-in{opacity:1;transform:none; transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0ms)} /* ============================================================ RESPONSIVE ============================================================ */ @media(min-width:1180px){ .sp-rail{display:flex} .sp-topbar{display:none} .sp-shell{margin-left:var(--sp-rail)} } @media(max-width:1179px){ .sp-rail{display:none} } @media(max-width:980px){ .sp-games__grid{grid-template-columns:repeat(4,1fr)} } @media(max-width:720px){ .sp-pc,.sp-deposits{grid-template-columns:1fr} .sp-games__grid{grid-template-columns:repeat(3,1fr)} .sp-footer__legal{flex-direction:column;align-items:flex-start} .sp-footer__badges{margin-left:0} .sp-toolbar{gap:8px} .sp-search__box{flex:1 1 auto} /* single-column here: sideways reveals would overhang the viewport, so rise instead */ .js [data-animate="left"],.js [data-animate="right"]{transform:translateY(24px)} } @media(max-width:440px){ .sp-games__grid{grid-template-columns:repeat(2,1fr)} .sp-prose h2::before,.sp-prose h2::after{flex-basis:20px} /* keep "All providers" + "Find your game" on one line each at 360-375px */ .sp-chip,.sp-search__box{padding:9px 12px;font-size:.7rem} .sp-chip svg,.sp-search__box svg{width:14px;height:14px} } @media(prefers-reduced-motion:reduce){ .js [data-animate]{opacity:1!important;transform:none!important} .sp-hero__slide{transition:opacity .2s ease} *{scroll-behavior:auto!important} }