/* ==========================================================================
   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 Key terms. 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:#eef6ee;--kk-surface:#fff;--kk-surface-2:#dde9df;--kk-ink:#0a1811;--kk-text:#3a4a40;--kk-muted:#6d8576;
	--kk-navy:#0e2018;--kk-navy-deep:#0a1811;--kk-line:rgba(14,32,24,.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,#0e2018);
	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,#0e2018)}
.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:#0e2018;--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,#0e2018);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:#0e2018;--btn:#0e2018;--btn-ink:#fff;--chip:#0e2018;--chip-ink:#fff;--ghost:rgba(14,32,24,.06);--ghost-ink:#0e2018;--ghost-line:#0e2018}

/* ---- 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) */
/* The hero is a card like the tiles: same side gutters, a gutter-wide gap below the head bar, rounded all round, tile type scale */
.kk-hero{position:relative;overflow:hidden;width:min(100% - 2 * var(--kk-gutter),1120px - 2 * var(--kk-gutter));margin:var(--kk-gutter) auto 0;color:#fff;background:var(--c,#0e2018);isolation:isolate;border-radius:var(--kk-r)}
.kk-hero--light{color:#0e2018}
.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:10px;justify-items:center;text-align:center;padding:20px 18px 18px}
.kk-hero .kk-wrap > *{grid-column:1;min-width:0}
.kk-hero__eyebrow{margin:0;color:inherit;opacity:.85;font:800 11px/1.2 var(--kk-display);letter-spacing:.16em;text-transform:uppercase}
.kk-hero__logo{display:flex;align-items:center;justify-content:center;height:84px;max-width:min(78%,300px)}
.kk-hero__logo img{height:84px;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:100%;color:inherit;font:900 27px/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:14px;font-weight:700;line-height:1.35;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) 38%,color-mix(in srgb,var(--c) 82%,transparent) 60%,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:100%}
.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:100%;overflow-wrap:anywhere} /* no ch cap: the headline gets the whole text column */
.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:#0e2018;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 Key terms: 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,#0e2018);isolation:isolate}
.kk-full--light .kk-full__head{--ink:#0e2018}
.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}
/* Phones: a compact head so the whole Key terms table fits on one screen above the PLAY NOW bar */
@media (max-width:599px){
	.kk-full__head{min-height:0;padding:14px 64px 14px 16px;align-content:start;gap:6px;grid-template-columns:minmax(0,1fr)}
	.kk-full__art{display:none}
	.kk-full__close{top:12px;right:12px;width:36px;height:36px;font-size:20px}
	.kk-full__logo{height:40px;max-width:60%;margin-bottom:2px}
	.kk-full__eyebrow{font-size:10px;letter-spacing:.12em}
	.kk-full__title{font-size:22px;line-height:1.1}
	.kk-full__sub{font-size:13px}
	.kk-full__status{width:auto;max-width:100%;justify-self:start;white-space:normal;font-size:10px;line-height:1.3}
	.kk-full__body{gap:12px;padding:14px 16px 84px}
	.kk-full__desc{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
	.kk-codebox{padding:10px;gap:6px}
	.kk-codebox__code{padding:10px 14px;font-size:18px}
	.kk-full__h{margin-bottom:4px;font-size:15px}
	.kk-details{padding:0 12px;border-radius:12px}
	.kk-details > div{padding:7px 0}
	.kk-details dt{font-size:13px}
	.kk-details dd{font-size:14px}
	.kk-full__bar{padding:8px var(--kk-gutter) calc(8px + env(safe-area-inset-bottom))}
	.kk-full__bar .kk-btn{min-height:48px;font-size:15px}
}
/* Short phones (SE-size viewports): tighten further */
@media (max-width:599px) and (max-height:700px){
	.kk-full__logo{height:32px}
	.kk-full__title{font-size:19px}
	.kk-full__desc{-webkit-line-clamp:2}
	.kk-details > div{padding:5px 0}
	.kk-codebox{grid-auto-flow:column;justify-content:space-between;align-items:center;text-align:left}
	.kk-codebox__code{min-width:0;padding:8px 12px;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:24px 22px 22px}
	.kk-hero__logo,.kk-hero__logo img{height:88px}
	.kk-hero__title{font-size:30px}
	.kk-tile{min-height:320px}
	.kk-tile__body{max-width:460px;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:36px 32px}
	.kk-hero__title{font-size:34px}
	.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 Key terms 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,#0e2018);color:var(--ink,#fff);text-align:center}
.bl-design-tiles .bl-wheel-view--spin .bl-wheel-view__head{--c:#0e2018;--ink:#fff;min-height:0;padding-top:64px}
.bl-design-tiles .bl-wheel-view--light .bl-wheel-view__head{--ink:#0e2018}
.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,#0e2018);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,#0e2018);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))}}

/* ==========================================================================
   WickedSpinz brand – "Cheeky mischief", dark and unified.
   Deep aubergine page; every offer card shares one style (aubergine card, lime PLAY NOW, outlined Key terms, soft
   lilac pills), centred like the editor's pick. Only the casino's logo (on a small plate in its own logo colour) and its
   background image differ between offers. Lime and hot pink are accents only.
   ========================================================================== */
.bl-design-tiles{
	--kk-lime:#c6f432;--kk-pink:#ff4fa3;--kk-navy:#0e2018;
	--kk-page:#0a1811;--kk-surface:#0e2018;--kk-surface-2:#1a3527;
	--kk-ink:#eef6ee;--kk-text:#cfe0d2;--kk-muted:#9db5a3;--kk-line:rgba(238,246,238,.12);
	--kk-card:#0e2018;--kk-card-line:rgba(238,246,238,.10);
}
.bl-design-tiles :focus-visible{outline-color:var(--kk-lime)}
::selection{background:var(--kk-lime,#c6f432);color:#0e2018}

/* Head bar */
.kk-top{background:var(--kk-navy);box-shadow:inset 0 -3px 0 var(--kk-lime)}
.kk-top__logo img{height:30px}
.kk-age{border-color:var(--kk-lime);color:var(--kk-lime)}

/* Section titles: light text with a short lime bar under it */
.kk-section__head .kk-h2{justify-self:center;padding-bottom:10px;background:linear-gradient(var(--kk-lime),var(--kk-lime)) center bottom/56px 4px no-repeat}
.kk-section__head{text-align:center}

/* ---- Shared offer look: hero (editor's pick) and every tile ---- */
.kk-hero,.kk-tile{--ink:#eef6ee;--btn:var(--kk-lime);--btn-ink:var(--kk-navy);--chip:rgba(238,246,238,.12);--chip-ink:#eef6ee;--ghost:transparent;--ghost-ink:#eef6ee;--ghost-line:rgba(238,246,238,.55);
	background:var(--kk-card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--kk-card-line)}
.kk-hero__art,.kk-tile__art{background:var(--art) center 35%/cover no-repeat;opacity:.9}
.kk-hero__art::after,.kk-tile__art::after{background:linear-gradient(180deg,rgba(14,32,24,.25) 0%,rgba(14,32,24,.72) 34%,var(--kk-card) 62%)}
/* Logo plate in the casino's logo colour: the logo is the one thing that changes per offer */
.kk-hero__logo,.kk-tile__logo{display:flex;align-items:center;justify-content:center;width:min(100%,250px);height:92px;max-width:none;padding:12px 20px;border-radius:16px;background:var(--c,#fff);box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
.kk-hero__logo img,.kk-tile__logo img{height:auto;max-height:68px;width:auto;max-width:100%;object-fit:contain;object-position:center;filter:none}
.kk-hero__logo .offer-logo-text,.kk-tile__logo .offer-logo-text{color:#0e2018}
.kk-hero__eyebrow,.kk-tile__eyebrow{color:var(--kk-lime);opacity:1}
.kk-hero__title,.kk-tile__title{color:#eef6ee}
.kk-hero__sub,.kk-tile__sub{color:var(--kk-text);opacity:1;max-width:34ch}
.kk-chip{box-shadow:inset 0 0 0 1px rgba(238,246,238,.14)}
.kk-btn--ghost{backdrop-filter:none;text-transform:uppercase;letter-spacing:.04em}

/* Tiles: centred like the hero */
.kk-tile{min-height:0}
.kk-tile__body{justify-items:center;text-align:center;gap:10px;max-width:none;padding:22px 18px 18px}
.kk-tile .kk-chips{justify-content:center}
.kk-tile__actions{display:grid;gap:10px;width:100%;max-width:420px;margin-top:6px}
.kk-tile__actions .kk-btn--primary,.kk-tile__actions .kk-btn--ghost{width:100%;min-height:50px;font-weight:800}
.kk-tile__note{color:var(--kk-muted);opacity:1}
.kk-code{background:var(--kk-surface-2);color:#eef6ee;box-shadow:inset 0 0 0 1px rgba(198,244,50,.5)}
.kk-code b{color:var(--kk-lime)}

/* Hero stays centred on desktop too */
@media (min-width:600px){.kk-tile__body{max-width:none;padding:26px 24px 22px}}
@media (min-width:860px){
	.kk-hero .kk-wrap{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:36px 32px}
	.kk-hero .kk-chips{justify-content:center}
	.kk-hero__actions{grid-template-columns:1fr 1fr;max-width:520px}
	.kk-section__head,.kk-vip__copy{text-align:center}
	.kk-section__head .kk-h2{justify-self:center}
}

/* Wheel teaser and VIP tile */
.kk-teaser{background:var(--kk-card);box-shadow:inset 0 0 0 1px var(--kk-card-line)}
.kk-teaser__title{color:var(--kk-lime)}
.kk-teaser .kk-btn{--btn:var(--kk-lime);--btn-ink:var(--kk-navy)}
.kk-vip{box-shadow:inset 0 0 0 1px var(--kk-card-line)}
.kk-vip .kk-btn--navy{--btn:var(--kk-lime);--btn-ink:var(--kk-navy);background:var(--kk-lime);color:var(--kk-navy)}
.kk-checks li::before{background-color:var(--kk-pink)}
.kk-field input{border-color:rgba(238,246,238,.18)}
.kk-field input::placeholder{color:var(--kk-muted)}
.bl-design-tiles .bl-wheel-tab{background:var(--kk-pink);color:var(--kk-navy)}
.bl-design-tiles .bl-wheel-tab:hover{background:#ff6bb4}

/* Fullscreen Key terms: the same aubergine card look, logo plate, lime PLAY NOW */
.bl-design-tiles .kk-full{background:var(--kk-page);color:var(--kk-text)}
.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{--ink:#eef6ee;background:var(--kk-card);color:#eef6ee;box-shadow:inset 0 -1px 0 var(--kk-card-line)}
.bl-design-tiles .kk-full__art{opacity:.5}
.bl-design-tiles .kk-full__art::after{background:linear-gradient(180deg,rgba(14,32,24,.3),var(--kk-card) 85%)}
.bl-design-tiles .kk-full__logo{box-sizing:content-box;padding:8px 14px;border-radius:12px;background:var(--c,#fff)}
.bl-design-tiles .kk-full__eyebrow{color:var(--kk-lime);opacity:1}
.bl-design-tiles .kk-full__status{background:rgba(238,246,238,.12);color:#eef6ee}
.bl-design-tiles .kk-full__h::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:3px;background:var(--kk-pink);vertical-align:1px}
.bl-design-tiles .kk-details{background:var(--kk-card);box-shadow:inset 0 0 0 1px var(--kk-card-line)}
.bl-design-tiles .kk-full__bar{background:linear-gradient(0deg,var(--kk-page) 70%,transparent)}
.bl-design-tiles .kk-full__bar .kk-btn{background:var(--kk-lime);color:var(--kk-navy)}
.bl-design-tiles .kk-codebox{background:var(--kk-card);box-shadow:inset 0 0 0 1px var(--kk-card-line)}
.bl-design-tiles .kk-codebox__code{background:var(--kk-surface-2);color:var(--kk-lime)}

/* Wheel modal: aubergine heads for spin and result, lime buttons, logo plate on the result */
.bl-design-tiles .bl-wheel-view__head,.bl-design-tiles .bl-wheel-view--light .bl-wheel-view__head{background:var(--kk-card);color:#eef6ee}
.bl-design-tiles .bl-wheel__spin,.bl-design-tiles .bl-wheel__cta,.bl-design-tiles .bl-wheel__spin:hover,.bl-design-tiles .bl-wheel__cta:hover{background:var(--kk-lime);color:var(--kk-navy)}
.bl-design-tiles .bl-wheel__logo img{box-sizing:content-box;padding:10px 18px;border-radius:14px;background:var(--c,#fff)}
.bl-design-tiles .bl-wheel__again{color:var(--kk-lime)}
.bl-design-tiles .bl-wheel__kicker{color:var(--kk-lime);opacity:1}

/* SEO article and footer on the dark page */
.bl-design-tiles .bl-seo-text{color:var(--kk-text)}
.bl-design-tiles .bl-seo-text h2,.bl-design-tiles .bl-seo-text h3{color:#eef6ee}
.bl-design-tiles .bl-seo-text a{color:var(--kk-lime);text-decoration-color:rgba(198,244,50,.5);text-decoration-thickness:2px}
.bl-design-tiles .bl-seo-text strong{color:#eef6ee}
.bl-design-tiles footer.site-footer{background:#0a1811;border-top:1px solid var(--kk-card-line)}
.bl-design-tiles footer.site-footer h3{color:var(--kk-lime)}
.bl-design-tiles footer.site-footer a{color:var(--kk-lime);text-decoration:underline;text-decoration-color:rgba(198,244,50,.4)}
.bl-design-tiles footer .footer-rg__badge{border-color:var(--kk-lime);color:var(--kk-lime)}
.kk-tile__actions .kk-btn--ghost{text-transform:uppercase;letter-spacing:.04em;padding-inline:20px}
@media (max-width:599px){.bl-design-tiles .kk-full__logo{height:34px;padding:6px 12px;border-radius:10px}}
@media (max-width:599px) and (max-height:700px){.bl-design-tiles .kk-full__logo{height:26px;padding:5px 10px}}
@media (max-width:599px) and (max-height:700px){.bl-design-tiles .kk-full__body{gap:9px;padding-top:11px}.bl-design-tiles .kk-full__head{gap:5px;padding-block:12px}}

/* ---- Logo colour as a gradient from the card's top edge down to the "casino offer" line ----
   The logo sits on the colour it was designed on (its logo-background colour); the band fades into the aubergine card
   just above the eyebrow, so every offer below that line looks the same. The background image shows faintly through the
   coloured top. Same treatment for the editor's pick, the Key terms head and the wheel result. */
.kk-hero__logo,.kk-tile__logo{width:100%;max-width:300px;height:92px;padding:0;border-radius:0;background:none;box-shadow:none}
.kk-hero__logo img,.kk-tile__logo img{max-height:68px;max-width:80%;filter:none}
.kk-hero__art,.kk-tile__art{background:var(--art) center top/cover no-repeat;opacity:1}
.kk-hero__art::after,.kk-tile__art::after{background:linear-gradient(180deg,color-mix(in srgb,var(--c,#0e2018) 90%,transparent) 0,color-mix(in srgb,var(--c,#0e2018) 86%,transparent) 96px,var(--kk-card) 130px)}
.kk-tile__body{padding-top:20px}
.kk-tile__eyebrow,.kk-hero__eyebrow{margin-top:8px}
/* Editor's pick: logo first, then the eyebrow under the colour band, like the tiles */
.kk-hero .kk-wrap{padding-top:20px}
.kk-hero .kk-wrap > .kk-hero__logo{order:-1}
@media (min-width:600px){.kk-hero .kk-wrap{padding-top:20px}.kk-tile__body{padding-top:20px}}
@media (min-width:860px){.kk-hero .kk-wrap{padding-top:20px}}
/* Key terms head: colour band behind the logo row */
.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 50px,var(--kk-card) 78px)}
.bl-design-tiles .kk-full__art{display:none}
.bl-design-tiles .kk-full__logo{box-sizing:border-box;padding:0;border-radius:0;background:none;filter:none}
@media (max-width:599px){.bl-design-tiles .kk-full__logo{padding:0}}
@media (min-width:600px){.bl-design-tiles .kk-full__head{min-height:0;align-content:start;padding-top:18px;background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 104px,var(--kk-card) 140px)}}
/* Wheel result: logo on its colour band at the top */
.bl-design-tiles .bl-wheel-view--result .bl-wheel-view__head{padding-top:22px;background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 118px,var(--kk-card) 156px)}
.bl-design-tiles .bl-wheel-view__head .bl-wheel__logo{order:-1}
.bl-design-tiles .bl-wheel__logo img{box-sizing:border-box;padding:0;border-radius:0;background:none;filter:none}
@media (max-width:599px){
	.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 50px,var(--kk-card) 64px)}
	.bl-design-tiles .kk-full__eyebrow{margin-top:8px}
}
@media (max-width:599px) and (max-height:700px){
	.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 40px,var(--kk-card) 52px)}
	.bl-design-tiles .kk-full__eyebrow{margin-top:6px}
}

/* ---- Clear line instead of a fade (user request): a solid logo-colour band, then a crisp edge to the aubergine card ---- */
.kk-hero__art::after,.kk-tile__art::after{background:linear-gradient(180deg,color-mix(in srgb,var(--c,#0e2018) 94%,transparent) 0,color-mix(in srgb,var(--c,#0e2018) 94%,transparent) 122px,var(--kk-card) 122px)}
.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 118px,var(--kk-card) 118px)}
.bl-design-tiles .bl-wheel-view--result .bl-wheel-view__head{background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 118px,var(--kk-card) 118px)}
@media (max-width:599px){.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 56px,var(--kk-card) 56px)}}
@media (max-width:599px) and (max-height:700px){.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 45px,var(--kk-card) 45px)}}

/* ---- Balanced spacing around the line: logo centred in its band (14px above and below), ~20px air under the line ---- */
.kk-tile__body,.kk-hero .kk-wrap{padding-top:14px}
@media (min-width:600px){.kk-tile__body,.kk-hero .kk-wrap{padding-top:14px}}
@media (min-width:860px){.kk-hero .kk-wrap{padding-top:14px}}
.kk-hero__art::after,.kk-tile__art::after{background:linear-gradient(180deg,color-mix(in srgb,var(--c,#0e2018) 94%,transparent) 0,color-mix(in srgb,var(--c,#0e2018) 94%,transparent) 120px,var(--kk-card) 120px)}
.kk-tile__eyebrow,.kk-hero__eyebrow{margin-top:24px}
/* Key terms head */
@media (max-width:599px){
	.bl-design-tiles .kk-full__head{padding-top:12px}
	.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 58px,var(--kk-card) 58px)}
	.bl-design-tiles .kk-full__eyebrow{margin-top:20px}
}
@media (max-width:599px) and (max-height:700px){
	.bl-design-tiles .kk-full__head{padding-top:12px}
	.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 50px,var(--kk-card) 50px)}
	.bl-design-tiles .kk-full__eyebrow{margin-top:19px}
}
@media (min-width:600px){
	.bl-design-tiles .kk-full__head{padding-top:14px}
	.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:linear-gradient(180deg,var(--c,#0e2018) 0,var(--c,#0e2018) 118px,var(--kk-card) 118px)}
	.bl-design-tiles .kk-full__eyebrow{margin-top:20px}
}
/* Wheel result */
.bl-design-tiles .bl-wheel-view--result .bl-wheel-view__head{padding-top:17px}
.bl-design-tiles .bl-wheel-view--result .bl-wheel__kicker{margin-top:22px}
@media (max-width:599px) and (max-height:700px){.bl-design-tiles .kk-details > div{padding:4px 0}}

/* ---- Key terms view: no logo (user request) – plain aubergine head, the eyebrow names the casino ---- */
.bl-design-tiles .kk-full__logo{display:none!important}
.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:var(--kk-card)}
.bl-design-tiles .kk-full__eyebrow{margin-top:0}
@media (max-width:599px){.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:var(--kk-card);padding-top:16px}.bl-design-tiles .kk-full__eyebrow{margin-top:0}}
@media (max-width:599px) and (max-height:700px){.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:var(--kk-card);padding-top:14px}.bl-design-tiles .kk-full__eyebrow{margin-top:0}}
@media (min-width:600px){.bl-design-tiles .kk-full__head,.bl-design-tiles .kk-full--light .kk-full__head{background:var(--kk-card);padding-top:28px}.bl-design-tiles .kk-full__eyebrow{margin-top:0}}

/* ---- Frosted-glass band: the casino's background image, blurred, shows through the logo colour behind the logo.
   Only the image layer (::before) is blurred, so the clear line under the band stays crisp. ---- */
.kk-hero__art,.kk-tile__art{background:none;overflow:hidden;border-radius:inherit}
.kk-hero__art::before,.kk-tile__art::before{content:"";position:absolute;left:-16px;right:-16px;top:-16px;height:152px;background:var(--art) center 40%/cover no-repeat;filter:blur(9px) saturate(1.15)}
.kk-hero__art::after,.kk-tile__art::after{background:
	linear-gradient(180deg,rgba(255,255,255,.10) 0,rgba(255,255,255,.04) 120px,transparent 120px),
	linear-gradient(180deg,color-mix(in srgb,var(--c,#0e2018) 66%,transparent) 0,color-mix(in srgb,var(--c,#0e2018) 66%,transparent) 120px,var(--kk-card) 120px)}
.kk-hero__art::before,.kk-tile__art::before{filter:blur(9px) grayscale(1) brightness(1.25) contrast(1.1)}

/* ---- More contrast between page and cards: near-black page, lighter aubergine cards ---- */
.bl-design-tiles{--kk-page:#0a1811;--kk-card:#163022;--kk-surface:#163022;--kk-surface-2:#24493a;--kk-card-line:rgba(238,246,238,.16)}
.bl-design-tiles footer.site-footer{background:#07120c}
.bl-design-tiles .kk-full__bar{background:linear-gradient(0deg,var(--kk-page) 70%,transparent)}

/* ---- Contrast without black (user: near-black looks awful): rich plum page, deep aubergine cards darker than the page ---- */
.bl-design-tiles{--kk-page:#1f3d2b;--kk-card:#0e2018;--kk-surface:#0e2018;--kk-surface-2:#1a3527;--kk-card-line:rgba(238,246,238,.10)}
.kk-top{background:#0e2018}
.bl-design-tiles footer.site-footer{background:#0e2018}
.bl-design-tiles .kk-full__bar{background:linear-gradient(0deg,var(--kk-page) 70%,transparent)}
.kk-hero,.kk-tile,.kk-teaser,.kk-vip{box-shadow:inset 0 0 0 1px var(--kk-card-line),0 18px 40px -22px rgba(4,12,8,.7)}

/* ==========================================================================
   Colour scheme G – "Forest and acid lime" (chosen by the user): forest-green page, deep forest cards darker than the
   page, acid-lime PLAY NOW and accents, hot-pink ribbons and wheel tab. Overrides the earlier aubergine values.
   ========================================================================== */
.bl-design-tiles{--kk-page:#1f3d2b;--kk-card:#0e2018;--kk-surface:#0e2018;--kk-surface-2:#1a3527;--kk-navy:#0e2018;
	--kk-ink:#eef6ee;--kk-text:#cfe0d2;--kk-muted:#9db5a3;--kk-line:rgba(238,246,238,.12);--kk-card-line:rgba(238,246,238,.10);--kk-lime:#c6f432;--kk-pink:#ff4fa3}
.kk-top{background:#0e2018}
.bl-design-tiles footer.site-footer{background:#0e2018}
/* Head bar: wordmark only (no icon), a bit bigger */
.kk-top__logo img{height:36px}
.kk-top .kk-wrap{min-height:62px}
@media (min-width:600px){.kk-top__logo img{height:42px}.kk-top .kk-wrap{min-height:70px}}
