/* ==========================================================================
   Bonus Landing – tile design (Landing settings → Layout switches → Page design: Tiles). Loaded only when it is on.
   Head bar · featured hero tinted with the casino colour · tiles in each casino's colour with its background image ·
   fullscreen Lisätietoja. Buttons and pills: white on dark casino colours, navy on light ones (kk-tile--light / kk-hero--light).
   ========================================================================== */

@font-face{font-family:"Urbanist";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/urbanist-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/urbanist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.bl-design-tiles{
	--kk-page:#eef0f4;--kk-surface:#fff;--kk-surface-2:#e4e8ee;--kk-ink:#141c2b;--kk-text:#3f4a5c;--kk-muted:#6f7b8e;
	--kk-navy:#1f2b3f;--kk-navy-deep:#131b29;--kk-line:rgba(31,43,63,.14);
	--kk-display:"Urbanist","Manrope","Helvetica Neue",Arial,sans-serif;--kk-body:"Manrope","Helvetica Neue",Arial,sans-serif;
	--kk-r:18px;--kk-gutter:16px;
	background:var(--kk-page);color:var(--kk-text);font:500 15px/1.5 var(--kk-body);
}
.bl-design-tiles .site-content{padding:0;background:transparent}
.bl-design-tiles [hidden]{display:none!important}
.kk-wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--kk-gutter)}
/* One content width for everything: the classic container (SEO text, newsletter, footer) follows the tile width */
.bl-design-tiles .container{max-width:1120px;padding-left:var(--kk-gutter);padding-right:var(--kk-gutter)}
.bl-design-tiles :focus-visible{outline:3px solid var(--kk-ink);outline-offset:3px}

/* ---- Head bar ---- */
.kk-top{position:relative;z-index:20;background:var(--kk-navy);color:#fff}
.kk-top .kk-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px}
.kk-top__logo{display:inline-flex;align-items:center;color:#fff;text-decoration:none}
.kk-top__logo img{height:26px;width:auto;display:block}
.kk-top__title{font:800 20px/1 var(--kk-display)}
.kk-age{display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid rgba(255,255,255,.6);border-radius:50%;font:800 12px/1 var(--kk-display);letter-spacing:.02em}

/* ---- Buttons and pills: colours come from the tile through --btn / --btn-ink / --ghost / --ghost-ink / --ghost-line / --chip / --chip-ink ---- */
.kk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border:0;border-radius:13px;background:var(--btn,#fff);color:var(--btn-ink,#1f2b3f);
	font:800 15px/1 var(--kk-display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .12s}
.kk-btn:hover{text-decoration:none;color:var(--btn-ink,#1f2b3f)}
.kk-btn:active{transform:scale(.98)}
.kk-btn--primary::after{content:"";width:9px;height:9px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg) translate(-1px,1px)}
.kk-btn--ghost{background:var(--ghost,rgba(255,255,255,.14));color:var(--ghost-ink,#fff);box-shadow:inset 0 0 0 2px var(--ghost-line,rgba(255,255,255,.85));backdrop-filter:blur(6px)}
.kk-btn--ghost:hover{color:var(--ghost-ink,#fff)}
.kk-btn--navy{--btn:#1f2b3f;--btn-ink:#fff}
.kk-chips{display:flex;flex-wrap:wrap;gap:6px}
.kk-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:var(--chip,#fff);color:var(--chip-ink,#1f2b3f);font:800 11px/1 var(--kk-display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.kk-tile--light,.kk-hero--light,.kk-full--light{--ink:#1f2b3f;--btn:#1f2b3f;--btn-ink:#fff;--chip:#1f2b3f;--chip-ink:#fff;--ghost:rgba(31,43,63,.06);--ghost-ink:#1f2b3f;--ghost-line:#1f2b3f}

/* ---- Hero: the featured offer in the casino's exact colour (same treatment as the tiles), its image fading in on the right ---- */
/* The hero band runs edge to edge; its text sits on the same content grid as the cards (.kk-wrap) */
.kk-hero{position:relative;overflow:hidden;color:#fff;background:var(--c,#1f2b3f);isolation:isolate;border-radius:0 0 22px 22px}
.kk-hero--light{color:#1f2b3f}
.kk-hero__art{position:absolute;inset:0;z-index:0;background:var(--art) 78% 40%/cover no-repeat}
.kk-hero__art::after{content:"";position:absolute;inset:0;
	background:linear-gradient(90deg,var(--c) 30%,color-mix(in srgb,var(--c) 82%,transparent) 55%,color-mix(in srgb,var(--c) 28%,transparent) 100%),
	           linear-gradient(0deg,color-mix(in srgb,var(--c) 92%,transparent) 0%,transparent 45%)}
.kk-hero .kk-wrap{position:relative;z-index:1;display:grid;gap:14px;justify-items:center;text-align:center;padding-block:28px 34px}
.kk-hero .kk-wrap > *{grid-column:1;min-width:0}
.kk-hero__eyebrow{margin:0;color:inherit;opacity:.85;font:800 12px/1.2 var(--kk-display);letter-spacing:.18em;text-transform:uppercase}
.kk-hero__logo{display:flex;align-items:center;justify-content:center;height:76px;max-width:min(78%,300px)}
.kk-hero__logo img{height:76px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.kk-hero__logo .offer-logo-text{color:inherit;font:900 34px/1 var(--kk-display)}
.kk-hero__title{margin:2px 0 0;max-width:14ch;color:inherit;font:900 clamp(32px,9.6vw,54px)/1.02 var(--kk-display);letter-spacing:-.02em;text-wrap:balance}
.kk-hero__sub{margin:0;max-width:34ch;color:inherit;opacity:.92;font-size:16px;font-weight:600;line-height:1.4;text-wrap:balance}
.kk-hero .kk-chips{justify-content:center}
.kk-hero__actions{display:grid;gap:10px;width:100%;max-width:420px;margin-top:6px}
.kk-hero__actions .kk-btn{min-height:52px}

/* ---- Sections ---- */
.kk-section{padding-block:26px 6px}
.kk-section__head{display:grid;gap:6px;margin-bottom:16px;text-align:center} /* centred on phones, left from 860px */
.kk-h2{margin:0;color:var(--kk-ink);font:900 26px/1.1 var(--kk-display);letter-spacing:-.02em}
.kk-lede{margin:0;color:var(--kk-text);font-size:14.5px;line-height:1.45}
.kk-feed{display:grid;gap:16px}

/* ---- Tile: the casino's colour, its own background image on the right, content on the left ---- */
.kk-tile{position:relative;display:grid;min-height:300px;overflow:hidden;border-radius:var(--kk-r);background:var(--c,#fff);color:var(--ink,#fff);isolation:isolate}
.kk-tile__art{position:absolute;inset:0;z-index:0;background:var(--art) 80% 50%/cover no-repeat}
.kk-tile__art::after{content:"";position:absolute;inset:0;
	background:linear-gradient(90deg,var(--c) 34%,color-mix(in srgb,var(--c) 82%,transparent) 54%,color-mix(in srgb,var(--c) 28%,transparent) 100%),
	           linear-gradient(0deg,color-mix(in srgb,var(--c) 92%,transparent) 0%,transparent 42%)}
.kk-tile .offer-ribbon-wrap{z-index:3}
.kk-tile .offer-ribbon{--ribbon-d:54px;--ribbon-fit:175px;--ribbon-size:14px;padding:6px 0;letter-spacing:.14em;text-indent:.14em;font-family:var(--kk-display)} /* bigger on tiles: the top-right corner is always free */
.kk-tile__body{position:relative;z-index:2;display:grid;align-content:start;gap:10px;padding:18px 18px 16px;max-width:min(100%,340px)}
.kk-tile__logo{display:flex;align-items:center;height:84px;max-width:min(72%,260px)}
.kk-tile__logo img{height:84px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.kk-tile__logo .offer-logo-text{color:inherit;font:900 28px/1 var(--kk-display);mix-blend-mode:normal}
.kk-tile__eyebrow{margin:0;opacity:.78;font:800 11px/1.2 var(--kk-display);letter-spacing:.16em;text-transform:uppercase}
.kk-tile__title{margin:0;color:inherit;font:900 27px/1.02 var(--kk-display);letter-spacing:-.02em;text-wrap:balance;max-width:11ch}
.kk-tile__sub{margin:0;font-size:14px;font-weight:700;line-height:1.35;opacity:.92;max-width:26ch}
.kk-code{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:8px 12px;border-radius:10px;background:#fff;color:var(--kk-navy);font:800 12px/1 var(--kk-display);letter-spacing:.08em;text-transform:uppercase}
.kk-code b{font-size:15px;letter-spacing:.06em}
.kk-tile--light .kk-code{background:#1f2b3f;color:#fff}
.kk-tile__actions{display:flex;gap:8px;margin-top:6px}
.kk-tile__actions .kk-btn--primary{flex:1 1 auto;min-height:46px}
.kk-tile__actions .kk-btn--ghost{flex:none;min-height:46px;padding-inline:16px;text-transform:none;letter-spacing:0;font-weight:700}
.kk-tile__note{margin:0;font-size:11.5px;font-weight:600;opacity:.75}

/* ---- Wheel teaser tile ---- */
.kk-teaser{position:relative;overflow:hidden;display:grid;gap:12px;padding:22px 18px;border-radius:var(--kk-r);background:var(--kk-navy);color:#fff;isolation:isolate}
.kk-teaser__title{margin:0;color:#fff;font:900 26px/1.05 var(--kk-display);letter-spacing:-.02em}
.kk-teaser__text{margin:0;max-width:26ch;font-size:14px;font-weight:600;opacity:.9}
.kk-teaser .kk-btn{width:max-content;position:relative;z-index:2}
.kk-teaser__fig{position:absolute;right:0;bottom:-8px;z-index:1;width:124px;height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.5));pointer-events:none}

/* ---- VIP tile ---- */
.kk-vip{display:grid;gap:14px;padding:22px 18px 20px;border-radius:var(--kk-r);background:var(--kk-surface)}
.kk-vip .kk-h2{font-size:24px}
.kk-vip__copy{display:grid;gap:8px;text-align:center}
.kk-vip__copy .kk-checks li{justify-content:center}
.kk-checks{display:grid;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.kk-checks li{display:flex;align-items:center;gap:10px;color:var(--kk-ink);font:700 14px/1.3 var(--kk-body)}
.kk-checks li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--kk-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.kk-vip__form{display:grid;gap:12px}
.kk-field{display:grid;gap:5px}
.kk-field span{color:var(--kk-ink);font:800 12px/1 var(--kk-display);letter-spacing:.1em;text-transform:uppercase}
.kk-field input{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--kk-line);border-radius:12px;background:var(--kk-surface-2);color:var(--kk-ink);font:600 16px/1.2 var(--kk-body)}
.kk-vip__note{margin:0;color:var(--kk-muted);font-size:12.5px;line-height:1.4;text-align:center}

/* ---- Fullscreen Lisätietoja: hero in the casino's colour, then the offer text and the details table ---- */
.kk-full{position:fixed;inset:0;z-index:100;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--kk-page);color:var(--kk-text)}
.kk-full[hidden]{display:none}
html.kk-full-open{overflow:hidden}
.kk-full__head{position:relative;min-height:320px;padding:18px 18px 22px;display:grid;align-content:end;gap:10px;color:var(--ink,#fff);background:var(--c,#1f2b3f);isolation:isolate}
.kk-full--light .kk-full__head{--ink:#1f2b3f}
.kk-full__art{position:absolute;inset:0;z-index:0;background:var(--art) 80% 50%/cover no-repeat}
.kk-full__art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--c) 30%,color-mix(in srgb,var(--c) 70%,transparent) 55%,color-mix(in srgb,var(--c) 15%,transparent)),linear-gradient(0deg,color-mix(in srgb,var(--c) 85%,transparent) 0%,transparent 45%)}
.kk-full__head > :not(.kk-full__art):not(.kk-full__close){position:relative;z-index:1}
.kk-full__close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font:800 22px/1 var(--kk-display);cursor:pointer;backdrop-filter:blur(6px)}
.kk-full__logo{height:90px;width:auto;max-width:min(72%,300px);object-fit:contain;object-position:left center;margin-bottom:4px}
.kk-full__eyebrow{margin:0;font:800 12px/1.2 var(--kk-display);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.kk-full__title{margin:0;color:inherit;font:900 30px/1.04 var(--kk-display);letter-spacing:-.02em;text-wrap:balance}
.kk-full__sub{margin:0;font-size:15px;font-weight:700;opacity:.92}
.kk-full__status{width:max-content}
.kk-full__body{display:grid;gap:20px;padding:22px 18px 110px}
.kk-full__desc{margin:0;color:var(--kk-ink);font-size:17px;font-weight:600;line-height:1.5}
.kk-codebox{display:grid;gap:10px;justify-items:center;padding:18px;border-radius:16px;background:var(--kk-surface-2);text-align:center}
.kk-codebox__label{margin:0;color:var(--kk-ink);font:800 15px/1 var(--kk-display)}
.kk-codebox__code{display:inline-flex;align-items:center;gap:10px;min-width:220px;justify-content:center;padding:14px 18px;border:0;border-radius:14px;background:#fff;color:var(--kk-navy);font:900 22px/1 var(--kk-display);letter-spacing:.08em;cursor:pointer}
.kk-codebox__code small{font:700 11px/1 var(--kk-display);letter-spacing:.1em;text-transform:uppercase;color:var(--kk-muted)}
.kk-full__h{margin:0 0 6px;color:var(--kk-ink);font:900 17px/1.2 var(--kk-display)}
.kk-details{display:grid;margin:0;padding:0 16px;border-radius:16px;background:var(--kk-surface)}
.kk-details > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--kk-line)}
.kk-details > div:last-child{border-bottom:0}
.kk-details dt{margin:0;color:var(--kk-muted);font-size:14px;font-weight:600;line-height:1.35}
.kk-details dd{margin:0;color:var(--kk-ink);font:800 15px/1.3 var(--kk-display);text-align:right}
.kk-full__bar{position:fixed;left:0;right:0;bottom:0;z-index:101;padding:12px var(--kk-gutter) 12px;background:linear-gradient(0deg,var(--kk-page) 70%,transparent)}
.kk-full__bar .kk-btn{width:100%;max-width:520px;margin-inline:auto;display:flex;min-height:54px;font-size:16px}

/* ---- Footer and newsletter keep the classic styles; a little air above them ---- */
.bl-design-tiles .site-footer{margin-top:34px}

/* ---- Wider screens ---- */
@media (min-width:600px){
	.kk-hero .kk-wrap{padding-block:48px 56px}
	.kk-hero__logo,.kk-hero__logo img{height:88px}
	.kk-tile{min-height:320px}
	.kk-tile__body{max-width:400px;padding:22px}
	.kk-tile__title{font-size:30px}
	.kk-full__head{min-height:360px;padding-inline:28px}
	.kk-full__body{padding-inline:28px}
}
@media (min-width:860px){
	.kk-hero .kk-wrap{grid-template-columns:minmax(0,54%) minmax(0,1fr);justify-items:start;text-align:left;padding-block:64px 72px}
	.kk-hero .kk-chips{justify-content:start}
	.kk-hero__actions{grid-template-columns:1fr 1fr;max-width:460px}
	.kk-feed{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
	.kk-feed > .kk-teaser,.kk-feed > .kk-vip{grid-column:1 / -1}
	.kk-section{padding-block:34px 10px}
	.kk-section__head,.kk-vip__copy{text-align:left}
	.kk-vip__copy .kk-checks li{justify-content:start}
	.kk-h2{font-size:30px}
	.kk-teaser{padding:28px}
	.kk-teaser__fig{width:170px;right:20px}
	.kk-vip{grid-template-columns:1fr 1fr;align-items:start;gap:28px;padding:28px}
	.kk-full__head,.kk-full__body{padding-inline:max(28px,calc(50vw - 360px))}
	.kk-full__bar .kk-btn{max-width:720px}
}
@media (prefers-reduced-motion:reduce){.kk-btn{transition:none}}

/* ---- Wheel of fortune: the modal takes the Lisätietoja look – fullscreen, a navy head for the spin view, the casino's
   colour for the win screen; segments are coloured by each casino (inc/wheel.php) ---- */
.bl-design-tiles .bl-wheel-modal{padding:0;align-items:stretch;justify-content:stretch}
.bl-design-tiles .bl-wheel-modal__backdrop{display:none}
.bl-design-tiles .bl-wheel-modal__card{max-width:none;max-height:none;width:100%;height:100%;padding:0;border-radius:0;background:var(--kk-page);box-shadow:none;overflow-y:auto;color:var(--kk-text);font-family:var(--kk-body)}
.bl-design-tiles .bl-wheel-modal__close{top:14px;right:14px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font:800 22px/1 var(--kk-display);backdrop-filter:blur(6px)}
.bl-design-tiles .bl-wheel-modal__close:hover{background:rgba(0,0,0,.55);color:#fff}
.bl-design-tiles .bl-wheel-view__head{display:grid;gap:8px;justify-items:center;align-content:end;min-height:150px;padding:22px 18px;background:var(--c,#1f2b3f);color:var(--ink,#fff);text-align:center}
.bl-design-tiles .bl-wheel-view--spin .bl-wheel-view__head{--c:#1f2b3f;--ink:#fff;min-height:0;padding-top:64px}
.bl-design-tiles .bl-wheel-view--light .bl-wheel-view__head{--ink:#1f2b3f}
.bl-design-tiles .bl-wheel-view__body{display:grid;gap:14px;justify-items:center;padding:22px 18px 40px;text-align:center}
.bl-design-tiles .bl-wheel__title{margin:0;color:inherit;font:900 28px/1.05 var(--kk-display);letter-spacing:-.02em}
.bl-design-tiles .bl-wheel__intro{margin:0;color:inherit;opacity:.85;font-size:15px;font-weight:600;line-height:1.4}
.bl-design-tiles .bl-wheel{margin:4px auto 6px;width:min(320px,82vw)}
.bl-design-tiles .bl-wheel__disc{border-color:#fff;box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
.bl-design-tiles .bl-wheel__seg span{font-family:var(--kk-display);font-weight:800}
.bl-design-tiles .bl-wheel__spin,.bl-design-tiles .bl-wheel__cta{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:420px;min-height:54px;padding:12px 20px;border:0;border-radius:13px;background:var(--btn,#1f2b3f);color:var(--btn-ink,#fff);font:800 16px/1 var(--kk-display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;box-shadow:none}
.bl-design-tiles .bl-wheel__spin:hover,.bl-design-tiles .bl-wheel__cta:hover{background:var(--btn,#1f2b3f);color:var(--btn-ink,#fff);box-shadow:none}
.bl-design-tiles .bl-wheel__spin[disabled]{opacity:.5}
.bl-design-tiles .bl-wheel__note{margin:0;color:var(--kk-muted);font-size:12.5px;line-height:1.4}
.bl-design-tiles .bl-wheel__kicker{margin:0;color:inherit;opacity:.85;font:800 12px/1.2 var(--kk-display);letter-spacing:.18em;text-transform:uppercase}
.bl-design-tiles .bl-wheel__logo{display:flex;align-items:center;justify-content:center;height:84px;margin:0 auto;padding:0;border:0;background:transparent!important}
.bl-design-tiles .bl-wheel__logo img{height:84px;width:auto;max-width:min(72vw,260px);object-fit:contain}
.bl-design-tiles .bl-wheel__logo .offer-logo-text{color:inherit;font:900 28px/1 var(--kk-display);mix-blend-mode:normal}
.bl-design-tiles .bl-wheel__prize{margin:0;color:inherit;font:900 30px/1.04 var(--kk-display);letter-spacing:-.02em;text-wrap:balance}
.bl-design-tiles .bl-wheel__brand{margin:0;color:inherit;opacity:.85;font:800 12px/1.2 var(--kk-display);letter-spacing:.16em;text-transform:uppercase}
.bl-design-tiles .bl-wheel__offer{margin:0;color:inherit;opacity:.92;font-size:15px;font-weight:700}
.bl-design-tiles .bl-wheel__again{padding:8px;border:0;background:none;color:var(--kk-navy);font:700 14px/1 var(--kk-display);text-decoration:underline;cursor:pointer}
@media (min-width:860px){.bl-design-tiles .bl-wheel-view__head,.bl-design-tiles .bl-wheel-view__body{padding-inline:max(28px,calc(50vw - 360px))}}