/* Apply the supplied root tokens and root-only layout without leaking global rules. */
.tp{
  --bg:#FAFBFD; --surface:#FFFFFF; --alt:#F3F6FB;
  --primary:#1F4E8C; --primary-h:#18406F; --primary-p:#133458;
  --ink:#0F1B2D; --body:#34435A; --muted:#55647B;
  --line:#E3E8F0; --line-strong:#CBD5E3; --ring:#3F86D6;
  --r-card:10px; --r-ctl:8px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,27,45,.04),0 8px 24px rgba(31,78,140,.06);
  --sh-2:0 2px 4px rgba(15,27,45,.05),0 14px 34px rgba(31,78,140,.11);
  --serif:'Fraunces','Source Serif 4',Georgia,serif;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

max-width:1200px;margin-inline:auto;padding:48px 24px 72px}
@media(max-width:640px){.tp{padding:32px 16px 56px}}
/* Original supplied CSS, preserved for the grid descendants. */
@scope (.tp){

/* ===== Tokens (same as the Intlplay site) ===== */
:root{
  --bg:#FAFBFD; --surface:#FFFFFF; --alt:#F3F6FB;
  --primary:#1F4E8C; --primary-h:#18406F; --primary-p:#133458;
  --ink:#0F1B2D; --body:#34435A; --muted:#55647B;
  --line:#E3E8F0; --line-strong:#CBD5E3; --ring:#3F86D6;
  --r-card:10px; --r-ctl:8px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,27,45,.04),0 8px 24px rgba(31,78,140,.06);
  --sh-2:0 2px 4px rgba(15,27,45,.05),0 14px 34px rgba(31,78,140,.11);
  --serif:'Fraunces','Source Serif 4',Georgia,serif;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h2,h3,p{margin:0}
ol,dl,dd{margin:0;padding:0}
li{list-style:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ===== Section ===== */
.tp-note{margin-top:20px;text-align:center;font-size:13.5px;color:var(--muted)}
.tp-more{display:flex;justify-content:center;margin-top:24px}
.tp{max-width:1200px;margin-inline:auto;padding:48px 24px 72px}
.tp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:24px}
.tp-head h2{font:500 clamp(1.75rem,1.4rem + 1.2vw,2.25rem)/1.15 var(--serif);color:var(--ink);letter-spacing:-.01em}
.tp-date{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}

/* ===== Grid: 3 per row, an unfinished last row is centred ===== */
.pgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.pgrid>li{display:flex;flex:0 0 calc((100% - 40px) / 3);min-width:0}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-ctl);font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-h);color:#fff;box-shadow:0 6px 16px rgba(31,78,140,.22)}
.btn-primary:active{background:var(--primary-p);box-shadow:none}
.btn-secondary{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-secondary:hover{background:#F3F7FD;color:var(--primary-h)}

/* ===== Card ===== */
.pcard{display:flex;flex-direction:column;width:100%;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);transition:box-shadow .2s ease,border-color .2s ease}
.pcard:hover{border-color:var(--line-strong);box-shadow:var(--sh-2)}
.p-media{position:relative;aspect-ratio:16/10;overflow:hidden;display:grid;place-items:center;background:#DCEAFB;border-bottom:1px solid var(--line)}
.p-media img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.p-word{position:relative;z-index:1;font:500 32px/1 var(--serif);letter-spacing:-.01em;color:#fff}
.p-body{display:flex;flex-direction:column;gap:14px;padding:20px 22px 18px;flex:1}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.p-head .p-title{font:600 19px/1.25 var(--sans);letter-spacing:0;color:var(--ink);min-width:0}
.p-name{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.p-lic{display:flex;align-items:center;gap:6px;font:500 13px/1.2 var(--sans);color:var(--muted)}
.p-lic .ic{width:15px;height:15px;color:var(--primary)}
.rating{display:flex;align-items:center;gap:10px;flex:none}
.rating b{font:600 18px/1 var(--sans);color:var(--ink)}
.rating .bar{width:64px;height:6px;border-radius:var(--r-pill);background:#E3EAF4;overflow:hidden}
.rating .bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--primary)}
.p-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--alt)}
.p-facts>div{display:flex;flex-direction:column;gap:1px;padding:6px 10px;min-width:0}
.p-facts>div+div{border-left:1px solid var(--line)}
.p-facts dt{font:500 11px/1.25 var(--sans);color:var(--muted)}
.p-facts dd{font:600 13.5px/1.25 var(--sans);color:var(--ink)}
.p-cta{display:flex;flex-direction:column;margin-top:auto}

/* ===== Brand tiles (shown until a casino image is added) ===== */
.t-zizo .p-word{color:#F2C94C}
.t-velo{background:repeating-linear-gradient(115deg,rgba(255,255,255,.08) 0 16px,transparent 16px 42px),#12493B}
.t-velo::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;background:conic-gradient(#fff 25%,#12493B 0 50%,#fff 0 75%,#12493B 0) 0 0/18px 18px;opacity:.85}
.t-velo .p-word{font:italic 800 34px/1 var(--sans);letter-spacing:-.02em;text-transform:uppercase}
.t-zizo{background:linear-gradient(135deg,rgba(242,201,76,.2) 25%,transparent 25%) -12px 0/24px 24px,linear-gradient(225deg,rgba(242,201,76,.2) 25%,transparent 25%) -12px 0/24px 24px,linear-gradient(315deg,rgba(242,201,76,.2) 25%,transparent 25%) 0 0/24px 24px,linear-gradient(45deg,rgba(242,201,76,.2) 25%,transparent 25%) 0 0/24px 24px,#3A1D6E}
.t-cosmo{background:radial-gradient(circle,#fff 0 1px,transparent 1.6px) 0 0/46px 46px,radial-gradient(circle,rgba(255,255,255,.55) 0 1px,transparent 1.6px) 13px 19px/29px 29px,#151A3E}
.t-cosmo::before{content:"";position:absolute;right:-26px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:#5B4BD6}
.t-cosmo::after{content:"";position:absolute;right:-58px;bottom:12px;width:190px;height:46px;border:2px solid rgba(255,255,255,.45);border-radius:50%;transform:rotate(-18deg)}
.t-cosmo .p-word{font:500 30px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase}
.t-chester{background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 12px,transparent 12px 36px),repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 12px,transparent 12px 36px),repeating-linear-gradient(0deg,transparent 0 22px,rgba(242,201,76,.4) 22px 24px,transparent 24px 36px),repeating-linear-gradient(90deg,transparent 0 22px,rgba(242,201,76,.4) 22px 24px,transparent 24px 36px),#7A1C2E}
.t-chester .p-word{font:600 36px/1 var(--serif);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.t-wild{background:radial-gradient(circle at 18% 26%,rgba(255,255,255,.08) 0 46px,transparent 47px),#B4501A}
.t-wild::after{content:"";position:absolute;right:24px;top:16px;width:84px;height:108px;background:linear-gradient(90deg,rgba(255,255,255,.22) 0 14%,transparent 14% 43%,rgba(255,255,255,.22) 43% 57%,transparent 57% 86%,rgba(255,255,255,.22) 86%);transform:skewX(-14deg);border-radius:40px}
.t-wild .p-word{font:800 34px/1 var(--sans);letter-spacing:.02em;text-transform:uppercase}
.t-trix{background:radial-gradient(circle,rgba(255,255,255,.25) 0 1.2px,transparent 1.8px) 0 0/22px 22px,#7E1D63}
.t-trix::before,.t-trix::after{content:"";position:absolute;background:#F2C94C;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.t-trix::after{right:26px;top:22px;width:40px;height:40px;opacity:.9}
.t-trix::before{right:74px;top:60px;width:18px;height:18px;opacity:.65}
.t-trix .p-word{font:italic 600 36px/1 var(--serif)}
.t-beast{background:linear-gradient(135deg,#D33A2C 25%,transparent 25%) -14px 0/28px 28px repeat-x,linear-gradient(225deg,#D33A2C 25%,transparent 25%) -14px 0/28px 28px repeat-x,#1C1F26}
.t-beast .p-word{font:800 34px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.t-sloto{background:repeating-linear-gradient(90deg,transparent 0 6%,rgba(255,255,255,.12) 6% 30%,transparent 30% 33.333%),#1546A0}
.t-sloto .p-word{font:800 34px/1 var(--sans);letter-spacing:-.02em}
.t-polo{background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 40px,transparent 40px 80px),#2F7A3E}
.t-polo::after{content:"";position:absolute;right:34px;bottom:44px;width:22px;height:22px;border-radius:50%;background:#fff}
.t-polo .p-word{font:italic 500 34px/1 var(--serif)}
.t-formula{background:repeating-linear-gradient(115deg,rgba(255,255,255,.08) 0 10px,transparent 10px 30px),#B80F2A}
.t-formula::after{content:"";position:absolute;top:0;left:0;right:0;height:24px;background:conic-gradient(#fff 25%,#1C1F26 0 50%,#fff 0 75%,#1C1F26 0) 0 0/24px 24px}
.t-formula .p-word{font:italic 800 32px/1 var(--sans);letter-spacing:-.02em;text-transform:uppercase}
.t-zizo .p-word{font:800 38px/1 var(--sans);letter-spacing:-.03em;text-transform:lowercase}

/* ===== Tablet: 2 per row ===== */
@media (max-width:960px){
  .pgrid>li{flex-basis:calc((100% - 20px) / 2)}
}
/* ===== Phone: 2 per row, compact cards ===== */
@media (max-width:640px){
  .tp{padding:32px 16px 56px}
  .pgrid{gap:10px}
  .pgrid>li{flex-basis:calc((100% - 10px) / 2)}
  .p-media{aspect-ratio:4/3}
  .p-media .p-word{font-size:20px}
  .p-body{padding:12px;gap:10px}
  .p-head{flex-direction:column;align-items:flex-start;gap:6px;min-height:0}
  .p-head .p-title{font-size:15px}
  .p-lic{font-size:11.5px;gap:4px}
  .p-lic .ic{width:13px;height:13px}
        .rating b{font-size:15px}
  .rating .bar{width:56px}
  .p-facts{grid-template-columns:1fr}
  .p-facts>div{padding:4px 7px}
  .p-facts>div+div{border-left:0;border-top:1px solid var(--line)}
  .p-facts>div:nth-child(3){display:none}
  .p-facts dd{font-size:12px}
  .p-cta .btn{min-height:40px;padding:0 8px;font-size:14px;white-space:normal;text-align:center}
  .t-velo::after{width:22px;background-size:11px 11px}
  .t-cosmo::before{width:70px;height:70px;right:-18px;bottom:-20px}
  .t-cosmo::after{width:120px;height:30px;right:-40px;bottom:8px}
  .t-wild::after{width:50px;height:64px;right:12px;top:10px}
  .t-trix::after{width:24px;height:24px;right:12px;top:12px}
  .t-trix::before{width:12px;height:12px;right:40px;top:36px}
  .t-beast{background-size:16px 16px}
  .t-polo::after{width:14px;height:14px;right:16px;bottom:28px}
  .t-formula::after{height:14px;background-size:14px 14px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}

}

/* Compact mobile facts: show all three as smaller label/value rows. */
@media(max-width:640px){
  .tp .p-facts{grid-template-columns:1fr}
  .tp .p-facts>div,.tp .p-facts>div:nth-child(3){display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:4px;padding:3px 6px}
  .tp .p-facts dt{font-size:10.5px;line-height:1.25;min-width:0}
  .tp .p-facts dd{font-size:11.5px;line-height:1.25;flex:none;white-space:nowrap}
}
@media(max-width:360px){.tp .p-facts dt{font-size:10px}.tp .p-facts dd{font-size:11px}}

/* Darker backdrop emphasizes the unchanged white casino cards. */
.tp{background:#173F73}
.tp .tp-head h2{color:#fff}
.tp .tp-date{color:#D6E8FB}

/* Orange is the only saturated accent in the lower card. */
.tp{
  --visit-bg:#FF8000;--visit-hover:#FF9429;--visit-active:#E67300;--visit-ink:#1A2B4C;
  --visit-shadow:0 0 0 1px rgba(255,128,0,.40),0 4px 16px rgba(255,128,0,.45),0 0 32px rgba(255,128,0,.35);
  --visit-hover-shadow:0 0 0 1px rgba(255,150,40,.65),0 6px 20px rgba(255,128,0,.60),0 0 48px rgba(255,128,0,.50);
}
.tp .p-cta .btn-primary{
  box-sizing:border-box;width:100%;height:48px;min-height:48px;max-height:48px;
  padding:0 8px;border:0;border-radius:10px;
  font-size:16px;font-weight:700;line-height:1;
  background:var(--visit-bg);color:var(--visit-ink);box-shadow:var(--visit-shadow);
  transform:none;transition:background-color 180ms ease,box-shadow 180ms ease,transform 180ms ease,outline-color 180ms ease;
}
.tp .p-cta .btn-primary .ic{width:14px;height:14px;transition:transform 180ms ease}
.tp .p-cta .btn-primary:hover{
  background:var(--visit-hover);color:var(--visit-ink);box-shadow:var(--visit-hover-shadow);transform:translateY(-1px);
}
.tp .p-cta .btn-primary:hover .ic{transform:translateX(2px)}
.tp .p-cta .btn-primary:active{
  background:var(--visit-active);color:var(--visit-ink);box-shadow:var(--visit-shadow);transform:none;
}
.tp .p-cta .btn-primary:focus-visible{outline:3px solid rgba(255,128,0,.45);outline-offset:3px}
@media(max-width:640px){
  .tp .p-cta .btn-primary{padding-inline:0;gap:4px}
  .tp .p-cta .btn-primary .ic{width:12px;height:12px}
}
@media(prefers-reduced-motion:reduce){
  .tp .p-cta .btn-primary,.tp .p-cta .btn-primary .ic{transition:none!important;transform:none!important}
}
