/* ==========================================================================
   CASINY NEW ZEALAND - SITE STYLESHEET
   Paste target: Appearance > Customize > Additional CSS

   Loads in <head>, cached by the browser, applies to every page.
   The page content itself contains NO <style> tags - keep it that way.

   Theme: igaming-minimal 1.1.8 (classic theme).
   The theme's own header (.site-header) and footer (.site-footer) are used
   as-is and are NEVER hidden. Section 3 and 4 below only restyle them,
   because the theme enqueues a footer.css that returns 404 - so the footer
   markup ships unstyled and this file supplies it.

   Icon sprite lives in the Media Library:
   /wp-content/uploads/2026/08/casiny-icons-v2.svg  (referenced with <use href>)

   CONTENTS
     1  Design tokens
     2  Base + resets
     3  Theme header
     4  Theme footer
     5  Page layout (sidebar rail + content grid)
     6  Sidebar rail
     7  Buttons
     8  Article: typography, tables, lists
     9  FAQ (core/details blocks)
    10  Games lobby
    11  Hero / category chips / game cards
    12  Media components (banners, CTAs, logo rows)
    13  Responsive
   ========================================================================== */


/* ==========================================================================
   1  DESIGN TOKENS
   ========================================================================== */

:root{--screen-tablet:48rem;--screen-desktop:70rem;--screen-wide:90rem;--font-base:"Atkinson Hyperlegible",system-ui,sans-serif;--font-heading:Inter,Roboto,Arial,sans-serif;--color-page:#070a12;--color-surface:#10131e;--color-surface-soft:#220633;--color-surface-strong:#03050b;--color-panel:#2a093f;--color-text:#fff9ff;--color-text-inverse:#1b0712;--color-muted:#e6d4f3;--color-muted-soft:rgba(230,212,243,.74);--color-line:rgba(185,36,255,.28);--color-line-strong:rgba(207,72,255,.62);--color-primary:#c700ff;--color-primary-strong:#8c00d8;--color-accent:#c700ff;--color-accent-strong:#7a19ff;--color-danger:#ff3d68;--color-links:#f0d7ff;--bg-page:radial-gradient(circle at 88% 0%,rgba(199,0,255,.24),transparent 18rem),radial-gradient(circle at 14% 18%,rgba(118,0,190,.2),transparent 20rem),linear-gradient(180deg,#090512 0,var(--color-page) 38rem,#03050b 100%);--bg-header:#03050b;--bg-panel:linear-gradient(180deg,#111523,var(--color-surface-soft));--bg-card:color-mix(in srgb,var(--color-surface-strong) 48%,var(--color-surface-soft));--bg-chip:color-mix(in srgb,var(--color-surface-strong) 42%,var(--color-surface-soft));--gradient-primary:linear-gradient(180deg,#d913ff 0%,var(--color-primary-strong) 100%);--gradient-accent:linear-gradient(180deg,#d913ff,#7a19ff);--shadow-soft:0 1.25rem 3rem rgba(6,1,14,.42);--shadow-card:0 0.75rem 1.75rem rgba(8,0,18,.32);--shadow-cta:0 0.875rem 1.75rem rgba(199,0,255,.3);--space-1:clamp(0.25rem,0.3vw,0.35rem);--space-2:clamp(0.5rem,0.6vw,0.7rem);--space-3:clamp(0.75rem,0.9vw,0.95rem);--space-4:clamp(1rem,1.2vw,1.2rem);--space-5:clamp(1.25rem,1.6vw,1.5rem);--space-6:clamp(1.5rem,2vw,1.9rem);--space-7:clamp(2rem,2.6vw,2.5rem);--space-8:clamp(2.5rem,3vw,3.1rem);--radius-1:0.375rem;--radius-2:0.625rem;--radius-pill:999px;--frame-width:min(100% - clamp(1rem,3vw,2rem),120rem);--sidebar-width:23.5rem;--header-height:5.5rem;--hero-height:clamp(21rem,40vw,34rem);--hero-title-size:clamp(2.5rem,6vw,5.6rem);--section-title-size:clamp(1.6rem,2.2vw,2.25rem);--card-title-size:clamp(1.05rem,1.6vw,1.25rem);--body-size:1rem;--small-size:0.8125rem;--line-tight:1.12;--line-copy:1.65;--line-loose:1.72;--casiny-frame:var(--frame-width);--casiny-sidebar:var(--sidebar-width);--casiny-header:var(--header-height);--casiny-radius-sm:var(--radius-1);--casiny-radius:var(--radius-2);--casiny-shadow:var(--shadow-soft);--casiny-text:var(--color-text);--casiny-muted:var(--color-muted);--casiny-line:var(--color-line);--casiny-surface:var(--bg-card);--casiny-panel:var(--bg-panel);--casiny-pink:var(--color-primary);--casiny-pink-strong:var(--color-primary-strong);--casiny-gold:var(--color-accent);--casiny-gold-strong:var(--color-accent-strong);--color-gray-100:#f8f8f8;--color-gray-200:#e4e4e4;--color-gray-300:#aeaeae;--color-gray-400:gray;--color-gray-500:#636363;--color-gray-600:#484848;--color-gray-700:#3a3a3a;--color-gray-800:#2e2e2e;--color-gray-900:#161616;--color-pink:#dd4462;--color-pink-subdued:#ce5769;--color-blue:#4467dd;--color-blue-subdued:#4d6cc8;--color-gold:#fbbe25;--color-gold-subdued:#f1c15b;--font-display:Redhat,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,"DejaVu Sans Mono",monospace;--space-3xs:clamp(0.125rem,0.1058rem + 0.0962vw,0.1875rem);--space-2xs:clamp(0.1875rem,0.149rem + 0.1923vw,0.3125rem);--space-xs:clamp(0.3125rem,0.274rem + 0.1923vw,0.4375rem);--space-s:clamp(0.625rem,0.5481rem + 0.3846vw,0.875rem);--space-m:clamp(0.875rem,0.7404rem + 0.6731vw,1.3125rem);--space-l:clamp(1.1875rem,0.9567rem + 1.1538vw,1.9375rem);--space-xl:clamp(2.375rem,2.0288rem + 1.7308vw,3.5rem);--space-2xl:clamp(3.5625rem,3.0433rem + 2.5962vw,5.25rem);--space-3xl:clamp(5.9375rem,5.0721rem + 4.3269vw,8.75rem);--space-xs-s:clamp(0.3125rem,0.1394rem + 0.8654vw,0.875rem);--space-s-m:clamp(0.625rem,0.4135rem + 1.0577vw,1.3125rem);--space-m-l:clamp(0.875rem,0.5481rem + 1.6346vw,1.9375rem);--space-l-xl:clamp(1.1875rem,0.476rem + 3.5577vw,3.5rem);--space-l-2xl:clamp(1.1875rem,-0.0625rem + 6.25vw,5.25rem);--space-xl-2xl:clamp(2.375rem,1.4904rem + 4.4231vw,5.25rem);--space-2xl-3xl:clamp(3.5625rem,1.9663rem + 7.9808vw,8.75rem);--text-step-min-2:clamp(0.8125rem,0.7548rem + 0.2885vw,1rem);--text-step-min-1:clamp(1rem,0.8846rem + 0.5769vw,1.375rem);--text-step-0:clamp(1.1875rem,1.0144rem + 0.8654vw,1.75rem);--text-step-1:clamp(1.4375rem,1.2067rem + 1.1538vw,2.1875rem);--text-step-2:clamp(1.6875rem,1.3606rem + 1.6346vw,2.75rem);--text-step-3:clamp(2.0625rem,1.6394rem + 2.1154vw,3.4375rem);--text-step-4:clamp(2.5rem,1.9615rem + 2.6923vw,4.25rem);--text-step-5:clamp(2.9375rem,2.1875rem + 3.75vw,5.375rem);--text-step-6:clamp(3.5rem,2.5192rem + 4.9038vw,6.6875rem);--leading-flat:1;--leading-fine:1.2;--leading-standard:1.4;--weight-regular:400;--weight-bold:700;--weight-extra-bold:900;--radius-small:0.1875rem;--radius-medium:0.3rem}


/* ==========================================================================
   2  BASE + RESETS
   ========================================================================== */

*{box-sizing:border-box;scrollbar-color:var(--color-primary) var(--color-page);scrollbar-width:thin}
html{color:var(--color-text);scroll-behavior:smooth}
body,html{background:var(--bg-page)}
body{color:var(--color-text);font-family:var(--font-base);font-size:1rem;line-height:var(--line-copy);margin:0;background:var(--bg-page);background-attachment:fixed}
a{color:inherit;text-decoration:none}
/* was `a[href]:not(.casiny-button-*)` - an invalid selector, so browsers threw the
   whole rule away. Scoped to article copy and excluding buttons properly. */
.casiny-article a[href]:not(.casiny-button):not(.wp-block-button__link):not(.csy-banner){background-image:linear-gradient(90deg,rgba(199,0,255,.18),rgba(122,25,255,.18)),linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:100% .42em,100% .09em;color:var(--color-links);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.22em;transition:background-size .18s ease,background-position .18s ease,color .18s ease,text-decoration-color .18s ease}
a[href]:focus-visible,a[href]:hover{background-position:0 88%;background-size:100% 1.05em,100% .09em;color:#fff;text-decoration-color:transparent}
button{background:transparent;border:0;color:inherit;font:inherit}
img,svg{display:block}
img{height:auto;max-width:100%}
figure{margin:0}
figure:has(table){background:var(--bg-card);border:1px solid var(--color-line);border-radius:var(--radius-1);box-shadow:0 .75rem 2rem rgba(0,0,0,.22);margin:1.125rem 0;overflow-x:auto}
table{border-collapse:collapse;color:var(--color-text);min-width:42rem;width:100%}
td,th{border-bottom:1px solid var(--color-line);padding:.75rem .875rem;text-align:left;vertical-align:top}
th{background:var(--color-panel);color:var(--color-text);white-space:nowrap}
tr:last-child td{border-bottom:0}


/* ==========================================================================
   3  THEME HEADER  (.site-header - theme markup, restyled only)
   ========================================================================== */

.site-header{background:var(--bg-header);border-bottom:1px solid var(--color-line);position:sticky;top:0;z-index:100}
.site-header__inner{max-width:var(--frame-width);height:var(--casiny-header);padding:0 clamp(.75rem,2vw,1.5rem);gap:1rem}
/* Logo left, nav centred in the space between, Log In / Sign Up hard right -
   the theme bundles nav+actions into .site-header__right, so that wrapper is
   grown to fill the row instead of hugging the right edge. Nav links never
   wrap to a second line; the row scrolls sideways if it runs out of space. */
.site-header__right{flex:1 1 auto;min-width:0;justify-content:space-between;gap:clamp(1rem,3vw,2.5rem)}
.site-nav{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.site-nav__list{flex-wrap:nowrap;justify-content:center;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.site-nav__list::-webkit-scrollbar{display:none}
.site-nav__list li{flex:0 0 auto}
.site-nav__list a{white-space:nowrap}
.site-header__actions{flex:0 0 auto}
.custom-logo{height:2.25rem;width:auto}
.site-nav__list{list-style:none;display:flex;gap:clamp(.75rem,2vw,2rem);margin:0;padding:0;flex-wrap:wrap}
.site-nav__list a{color:var(--color-muted);font-size:.9375rem;font-weight:600;letter-spacing:.01em;padding:.25rem 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.site-nav__list a:hover,.site-nav__list a:focus-visible{color:var(--color-text);border-bottom-color:var(--color-primary);text-decoration:none}
.site-nav__list .current-menu-item>a{color:var(--color-text);border-bottom-color:var(--color-primary)}
.site-header__actions{gap:.5rem}
.site-header .btn{border-radius:var(--radius-pill);font-weight:800;letter-spacing:.02em;padding:.5rem 1.125rem;min-height:2.375rem}
.site-header .btn--ghost{color:var(--color-text);border:1px solid var(--color-line-strong);background:transparent}
.site-header .btn--ghost:hover{border-color:var(--color-primary);background:rgba(199,0,255,.12)}
.site-header .btn--primary{background:var(--gradient-primary);border:0;color:#fff;box-shadow:var(--shadow-cta)}
.site-header .btn--primary:hover{filter:brightness(1.08)}


/* ==========================================================================
   4  THEME FOOTER  (.site-footer - theme markup; theme's footer.css is 404)
   ========================================================================== */

.site-footer{background:var(--bg-header);border-top:1px solid var(--color-line);margin-top:clamp(2rem,5vw,4rem)}
/* the theme makes this a flex row (main.css:285), which shrinks the grid rows
   below to their content width - it must be a block for them to fill */
.site-footer__inner{display:block;max-width:var(--frame-width);margin:0 auto;padding:clamp(1.75rem,4vw,3rem) clamp(.75rem,2vw,1.5rem) clamp(1.25rem,3vw,2rem)}
/* Footer layout. The theme template is fixed (no file access), so the two
   footer menu locations are repurposed and placed with CSS:
     footer_terms   (menu 4) = the two labelled site-nav columns
     footer_support (menu 5) = the horizontal legal row underneath
   .site-footer__columns uses display:contents so the nav group and the legal
   row become grid items of .site-footer__top and can be placed independently. */
.site-footer__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.site-footer__brand{grid-column:1;grid-row:1}
.site-footer__brand .custom-logo{height:2.5rem}
.site-footer__columns{display:contents}
.site-footer__right{grid-column:3;grid-row:1}

/* the link columns carry visible headings; the legal row does not */
.site-footer__col-title{margin:0 0 1rem;font-size:.75rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--color-text)}
.site-footer__col--legal .site-footer__col-title{display:none}
.site-footer__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}

/* The two labelled link columns ("About Casiny" / "Your Account") sit side by
   side in the middle grid track, between the logo and the certification strip. */
.site-footer__nav-group{grid-column:2;grid-row:1;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,5vw,4rem);row-gap:clamp(1.25rem,3vw,2rem)}

/* The legal row: full width, centred, on its own line with a rule above it,
   matching the reference footer. */
.site-footer__col--legal{
  grid-column:1/-1;grid-row:2;margin-top:clamp(1.25rem,3vw,2rem);
  padding-top:clamp(1.25rem,3vw,2rem);border-top:1px solid var(--color-line)}
.site-footer__col--legal .site-footer__menu{
  flex-direction:row;flex-wrap:wrap;justify-content:center;
  column-gap:clamp(1.25rem,4vw,3rem);row-gap:.75rem}
.site-footer__col--legal .site-footer__menu a{
  color:var(--color-text);font-weight:700}
.site-footer__col--legal .site-footer__menu a:hover{
  color:var(--color-primary)}
.site-footer__menu a{color:var(--color-muted-soft);font-size:.875rem;line-height:1.5;transition:color .18s}
.site-footer__menu a:hover,.site-footer__menu a:focus-visible{color:var(--color-text);text-decoration:none}
.site-footer__right{max-width:26rem}
.site-footer__certs,.site-footer__payments{list-style:none;margin:0 0 .875rem;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
/* The theme's own footer logos 404 (all 7 of
   /themes/igaming-minimal/assets/images/footer/*.svg are missing) and the
   template can't be edited, so the <img> is made transparent - it keeps its
   intrinsic size and its alt text for screen readers - and the real logo is
   painted as a background on the <li>. */
.site-footer__certs li,.site-footer__payments li{background-position:center;background-repeat:no-repeat;background-size:contain;opacity:.88;transition:opacity .18s}
.site-footer__certs li:hover,.site-footer__payments li:hover{opacity:1}
.site-footer__certs img,.site-footer__payments img{opacity:0}
.site-footer__certs li:nth-child(1){background-image:url(/assets/images/footer-18plus.svg)}
.site-footer__certs li:nth-child(2){background-image:url(/assets/images/footer-gam-anon.svg)}
.site-footer__certs li:nth-child(3){background-image:url(/assets/images/footer-gambling-therapy.svg)}
.site-footer__certs li:nth-child(4){background-image:url(/assets/images/footer-responsible-gaming.svg)}
.site-footer__certs li:nth-child(5){background-image:url(/assets/images/footer-gam-care.svg)}
.site-footer__payments li:nth-child(1){background-image:url(/assets/images/footer-visa.svg)}
.site-footer__payments li:nth-child(2){background-image:url(/assets/images/footer-mastercard.svg)}
.site-footer__disclaimer{color:var(--color-muted-soft);font-size:var(--small-size);line-height:1.6;margin:0}
.site-footer__divider{border:0;border-top:1px solid var(--color-line);margin:clamp(1.25rem,3vw,2rem) 0}
.site-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.site-footer__payments{margin:0}
.site-footer__copy{color:var(--color-muted-soft);font-size:var(--small-size);margin:0}


/* ==========================================================================
   5  PAGE LAYOUT  (theme wrapper becomes the sidebar + content grid)
   ========================================================================== */

.site-main{padding:clamp(1rem,2.5vw,2rem) 0;min-height:auto}
.site-main>.container{max-width:var(--frame-width);width:100%;padding:0 clamp(.75rem,2vw,1.5rem);margin:0 auto}
.page-content{margin:0}

/* Breadcrumb: sits above the sidebar/content grid, mirrors the BreadcrumbList
   JSON-LD on the same page. Separators are CSS-only so they stay out of the
   accessible name of each crumb. */
.csy-breadcrumb{margin:0 0 clamp(.75rem,1.5vw,1.125rem)}
.csy-breadcrumb-list{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem .5rem;
  list-style:none;margin:0;padding:0}
.csy-breadcrumb-item{align-items:center;display:inline-flex;font-size:var(--small-size);
  gap:.5rem;line-height:1.4;margin:0}
.csy-breadcrumb-item+.csy-breadcrumb-item:before{color:var(--color-muted-soft);content:"/";
  font-size:.875em}
.csy-breadcrumb-item a{border-radius:var(--radius-small);color:var(--casiny-muted);
  text-decoration:none;transition:color .16s ease}
.csy-breadcrumb-item a:focus-visible,.csy-breadcrumb-item a:hover{color:var(--color-primary);
  text-decoration:underline}
.csy-breadcrumb-item [aria-current=page]{color:var(--casiny-text);font-weight:800}
/* Sidebar rail sits in column 1 and spans the full height; everything else
   the page renders (lobby, article group, CTA) stacks in column 2. */
.page-body{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);column-gap:clamp(1rem,2vw,1.5rem);align-items:start;width:100%}
/* `grid-row:1/-1` does NOT work here: with no explicit rows, -1 resolves to
   line 1 and the rail would occupy row 1 only - which left a tall dead gap
   next to a short hero. An explicit span is required. Empty tracks collapse to
   0 (row-gap is deliberately unset), so over-spanning costs nothing; 30 is far
   above the ~4 top-level blocks any page puts in this column. */
.page-body>.casiny-sidebar{grid-column:1;grid-row:1/span 30;align-self:stretch}
.page-body>:not(.casiny-sidebar){grid-column:2;min-width:0}
/* Section 8 restyles copy inside .casiny-article; this file loads after the
   theme's main.css, so those rules win at equal specificity. No !important. */


/* ==========================================================================
   6  SIDEBAR RAIL  (one shared reusable block, not per-page HTML)
   ========================================================================== */

.casiny-sidebar{background:linear-gradient(180deg,rgba(13,15,26,.98),rgba(15,2,28,.98)),#03050b;border-right:1px solid var(--casiny-line);height:calc(100vh - var(--casiny-header));overflow-y:auto;padding:1.25rem 1rem;position:sticky;top:var(--casiny-header);transform:none;transition:transform .18s ease;width:min(var(--casiny-sidebar),calc(100vw - 3rem))}
.casiny-rail-nav,.casiny-sidebar-menu{display:flex;flex-direction:column;gap:.5rem}
.casiny-rail-card,.casiny-sidebar-menu-link,a.casiny-rail-card,a.casiny-sidebar-menu-link{align-items:center;background:rgba(57,10,88,.72);background-image:none;border:1px solid transparent;border-radius:var(--casiny-radius);color:var(--casiny-text);display:flex;font-weight:900;gap:.75rem;min-height:3.5rem;padding:.8125rem 1.125rem;font-size:1.0625rem;text-decoration:none;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.casiny-rail-card.is-active,.casiny-rail-card:focus-visible,.casiny-rail-card:hover,.casiny-sidebar-menu-link:focus-visible,.casiny-sidebar-menu-link:hover{background:linear-gradient(135deg,rgba(255,47,120,.2),rgba(28,81,255,.16)),#35115a;border-color:rgba(255,47,120,.72);transform:translateX(.125rem)}
.casiny-category-chip svg,.casiny-rail-card svg,.casiny-sidebar-menu-link svg{color:var(--color-primary);fill:currentColor;flex:0 0 auto;height:1.5rem;width:1.5rem}
.casiny-category-chip svg *,.casiny-rail-card svg *,.casiny-sidebar-menu-link svg *{fill:currentColor;stroke:currentColor}
/* NOTE: these `svg *` rules only reach INLINE svg. Symbols pulled from the
   external sprite via <use href="...svg#id"> are a separate document - CSS
   selectors do not cross that boundary, only inherited properties (color) do.
   So a sprite symbol's internals can only be fixed in the sprite file itself.
   That is why icon-pokies' luminance mask is hard-coded white in the sprite:
   as currentColor it went magenta, and magenta luminance hid the glyph. */
.casiny-sidebar-menu-link.is-active{background:linear-gradient(135deg,rgba(255,47,120,.2),
 rgba(28,81,255,.16)),#35115a;border-color:rgba(255,47,120,.72)}
/* The rail itself is a full-height column beside the content (align-self:
   stretch above). Its CONTENTS are what sticks, via .casiny-sidebar-inner -
   so overflow must stay visible here or sticky would be disabled. Tight
   horizontal padding lets the menu items run almost the full width. */
.casiny-sidebar{position:static;overflow:visible;padding:1.125rem .625rem;border-radius:var(--casiny-radius);border:1px solid var(--casiny-line);border-right:1px solid var(--casiny-line);height:auto;min-height:100%;width:auto}
.casiny-sidebar-inner{position:sticky;top:calc(var(--casiny-header) + .75rem)}
/* full-width CTA at the foot of the rail */
.casiny-sidebar-cta{display:flex;width:100%;margin-top:1.125rem;min-height:3.25rem;font-size:1.0625rem;font-weight:900;letter-spacing:.01em;text-align:center}
/* hero slides are wrapped in a tracking link - it must fill the slide */
.casiny-hero-media a{display:block;width:100%;height:100%}
.casiny-sidebar-title{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted-soft);margin:0 0 .625rem;padding:0 .25rem}
.casiny-sidebar-menu-link svg{width:1.5rem;height:1.5rem;flex:0 0 auto}


/* ==========================================================================
   7  BUTTONS
   ========================================================================== */

.button-primary,.casiny-button,a.button-primary,a.casiny-button{align-items:center;border-radius:var(--casiny-radius);display:inline-flex;font-weight:800;justify-content:center;min-height:2.5rem;text-decoration:none;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease}
.button-primary,.casiny-button{padding:0 clamp(.75rem,2vw,1rem)}
.casiny-button:focus-visible,.casiny-button:hover{transform:translateY(-.0625rem)}
.casiny-button-ghost{border:1px solid var(--color-line-strong);color:var(--casiny-text);background:transparent}
.casiny-button-ghost:focus-visible,.casiny-button-ghost:hover{background:rgba(199,0,255,.12);border-color:rgba(199,0,255,.72)}
.button-primary,.casiny-button-primary{background:var(--gradient-primary);box-shadow:inset 0 .0625rem 0 hsla(0,0%,100%,.34),var(--shadow-cta);color:#fff;text-decoration:none;text-shadow:none}
.button-primary:focus-visible,.button-primary:hover,.casiny-button-primary:focus-visible,.casiny-button-primary:hover,a.button-primary:focus-visible,a.button-primary:hover,a.casiny-button-primary:focus-visible,a.casiny-button-primary:hover{background:linear-gradient(180deg,#e747ff,#a500f2)}
.casiny-button-text{color:var(--casiny-pink);font-weight:900;min-height:2rem;padding:0}
.casiny-button-text:focus-visible,.casiny-button-text:hover{color:var(--casiny-text)}
.casiny-button-compact{font-size:.85rem;font-weight:950;line-height:1;min-height:2rem;padding:0 .875rem}
.casiny-button-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-cta)}


/* ==========================================================================
   8  ARTICLE: TYPOGRAPHY, TABLES, LISTS
   ========================================================================== */

.casiny-article{background:color-mix(in srgb,var(--color-page) 80%,var(--color-surface));border:1px solid hsla(0,0%,100%,.12);border-radius:var(--casiny-radius);box-shadow:var(--casiny-shadow);margin-top:clamp(1.5rem,3vw,2rem);padding:clamp(1.125rem,3vw,2rem)}
.casiny-article>:first-child{margin-top:0}
/* "Last updated" line: an E-E-A-T signal above the article copy. It is a
   normal editable paragraph block, so update the date when you revise a page. */
.casiny-article .casiny-updated{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.25rem;padding:.375rem .75rem;border:1px solid var(--casiny-line);border-radius:var(--radius-pill);background:var(--bg-chip);color:var(--color-muted);font-size:var(--small-size);font-weight:700;letter-spacing:.02em}
.casiny-article .casiny-updated::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 .1875rem rgba(199,0,255,.22);flex:0 0 auto}
.casiny-article figure{background:var(--bg-card);border:1px solid var(--color-line);border-radius:var(--radius-1);box-shadow:0 .75rem 2rem rgba(0,0,0,.22);margin:1.125rem 0;overflow-x:auto}
.casiny-article figure.casiny-hero-media,.casiny-article figure.wp-block-image{background:none;border:0;box-shadow:none;overflow:visible}
.casiny-article h1,.casiny-article h2,.casiny-article h3,.casiny-article h4{color:var(--casiny-text);letter-spacing:0;line-height:1.18}
.casiny-article h1{font-size:clamp(2rem,4vw,3.25rem)}
.casiny-article h2{font-size:clamp(1.45rem,2.8vw,2.25rem);margin-top:2rem;scroll-margin-top:calc(var(--casiny-header) + 1rem)}
.casiny-article h3{font-size:clamp(1.15rem,2vw,1.45rem);margin-top:1.5rem}
.casiny-article li,.casiny-article p{color:var(--casiny-muted)}
.casiny-article a{border-radius:.1875rem;color:var(--color-links);font-weight:800}
.casiny-article a:focus-visible,.casiny-article a:hover{color:#fff}
.casiny-article ol,.casiny-article ul{display:grid;gap:.5rem;padding-left:1.25rem;margin:0 0 1.125rem}
.casiny-article li::marker{color:var(--casiny-pink);font-weight:900}
.casiny-article section{margin:1.125rem 0}
.casiny-article .article-toc{margin:1.125rem 0}
.casiny-article .article-toc summary{color:var(--casiny-text);cursor:pointer;font-weight:900}
/* Tables: the theme styles these as `.page-body table th` (specificity 0,1,2),
   so these rules are scoped one level deeper to win on specificity rather
   than with !important. */
.page-body .casiny-article table{border-collapse:collapse;color:var(--color-text);min-width:36rem;width:100%;margin:0;background:transparent;border-radius:0;font-size:.95rem}
.page-body .casiny-article table td,.page-body .casiny-article table th{border-bottom:1px solid var(--color-line);padding:.75rem .875rem;text-align:left;vertical-align:top;text-transform:none;letter-spacing:0;font-size:1em}
.page-body .casiny-article table th{background:var(--color-panel);color:var(--color-text);white-space:nowrap;font-weight:800}
.page-body .casiny-article table thead{background:var(--color-panel)}
.page-body .casiny-article table tbody tr:nth-child(even){background:transparent}
.page-body .casiny-article table tbody tr:hover{background:rgba(199,0,255,.07)}
.page-body .casiny-article table tbody tr:last-child td{border-bottom:0}
.casiny-article p{margin:0 0 1.125rem;color:var(--casiny-muted);line-height:var(--line-copy)}
.casiny-article li{color:var(--casiny-muted);margin:0}
.casiny-article .wp-block-buttons{width:auto;display:flex;justify-content:center;margin:1.5rem 0 .5rem}
.casiny-article .wp-block-button{width:auto}
.casiny-article .wp-block-button__link{display:inline-flex;width:auto;align-items:center;justify-content:center;min-height:3rem;padding:0 clamp(1.25rem,3vw,2rem);border:0;border-radius:var(--casiny-radius);background:var(--gradient-primary);color:#fff;font-weight:800;font-size:1.05rem;box-shadow:var(--shadow-cta);white-space:nowrap}
.casiny-article .wp-block-button__link:hover{background:var(--gradient-primary);color:#fff;transform:translateY(-.0625rem);text-decoration:none}
.casiny-article .spoiler-toggle{background:var(--bg-chip);border:1px solid var(--color-line);color:var(--casiny-text);border-radius:var(--casiny-radius);padding:.85rem 2.5rem .85rem 1rem;font-weight:800;cursor:pointer;width:100%;text-align:left;font-family:inherit;font-size:1.02rem;margin:0 0 .5rem;position:relative;display:block}
.casiny-article .spoiler-toggle:hover{border-color:var(--color-line-strong)}
.casiny-article .spoiler-toggle:after{content:"";position:absolute;right:1rem;top:50%;width:.55rem;height:.55rem;border-right:2px solid var(--color-primary);border-bottom:2px solid var(--color-primary);transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.casiny-article .spoiler-toggle[aria-expanded="true"]:after{transform:translateY(-30%) rotate(225deg)}
.casiny-article .spoiler-content{border-left:2px solid var(--color-line-strong);margin:0 0 1rem;padding:.25rem 0 .25rem 1rem}
.casiny-article .spoiler-content[hidden]{display:none}


/* ==========================================================================
   9  FAQ  (core/details blocks - native, editable, no raw HTML)
   ========================================================================== */

.casiny-article details.wp-block-details{background:var(--bg-chip);border:1px solid var(--casiny-line);border-radius:var(--casiny-radius-sm);margin:.625rem 0;padding:0;overflow:hidden}
.casiny-article details.wp-block-details>summary{cursor:pointer;list-style:none;padding:.875rem 2.75rem .875rem 1rem;position:relative;font-weight:700;color:var(--color-text);line-height:1.45;transition:background .18s}
.casiny-article details.wp-block-details>summary::-webkit-details-marker{display:none}
.casiny-article details.wp-block-details>summary:hover{background:rgba(199,0,255,.08)}
.casiny-article details.wp-block-details>summary:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
.casiny-article details.wp-block-details>summary::after{content:"";position:absolute;right:1rem;top:50%;width:.5rem;height:.5rem;border-right:2px solid var(--color-primary);border-bottom:2px solid var(--color-primary);transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.casiny-article details.wp-block-details[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.casiny-article details.wp-block-details[open]>summary{background:rgba(199,0,255,.1)}
.casiny-article details.wp-block-details>:not(summary){padding:0 1rem;margin:.25rem 0}
.casiny-article details.wp-block-details>:last-child{padding-bottom:1rem}
.spoiler-toggle{align-items:center;background:var(--casiny-surface);border:1px solid var(--casiny-line);border-radius:var(--casiny-radius) var(--casiny-radius) 0 0;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18);color:var(--casiny-text);cursor:pointer;display:flex;font-weight:700;gap:1rem;justify-content:space-between;line-height:1.35;margin:.75rem 0 0;padding:.875rem 1rem;text-align:left;width:100%}
.spoiler-toggle:after{background:currentColor;content:"";flex:0 0 auto;height:1.25rem;-webkit-mask:url(/assets/images/icons-question.svg) center/contain no-repeat;mask:url(/assets/images/icons-question.svg) center/contain no-repeat;opacity:.88;width:1.25rem}
.spoiler-content{background:var(--casiny-surface);border:1px solid var(--casiny-line);border-radius:0 0 var(--casiny-radius) var(--casiny-radius);border-top:0;color:var(--casiny-muted);margin:0 0 .75rem;max-height:0;opacity:0;overflow:hidden;padding:0 1rem;transition:max-height .22s ease,padding .22s ease,opacity .18s ease}
.spoiler-content.is-open,.spoiler-toggle[aria-expanded=true]+.spoiler-content{max-height:40rem;opacity:1;padding-bottom:1rem}
.has-spoiler-js .spoiler-content:not(.is-open){max-height:0;opacity:0;padding-bottom:0}


/* ==========================================================================
   10  GAMES LOBBY  (native group/image/button blocks on /games/)
   ========================================================================== */

.csy-lobby{margin:clamp(1rem,2vw,1.5rem) auto 0;width:var(--casiny-frame)}
.csy-lobby .wp-block-buttons{width:auto}
.csy-lobby .wp-block-button{width:auto}
.csy-lobby .wp-block-buttons .wp-block-button__link{width:auto}
.csy-lobby .csy-bar{margin:0 0 1.25rem}
.csy-lobby .csy-bar>.wp-block-group__inner-container{align-items:center;column-gap:.75rem;display:flex;flex-wrap:wrap;justify-content:center;row-gap:.625rem}
.csy-lobby .csy-tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0;min-width:0}
.csy-lobby .csy-tabs .wp-block-button{margin:0}
.csy-lobby .csy-tabs .wp-block-button__link{align-items:center;background:linear-gradient(180deg,rgba(57,10,88,.96),rgba(24,3,42,.96));border:1px solid rgba(199,0,255,.34);border-radius:var(--casiny-radius);box-shadow:inset 0 .0625rem 0 hsla(0,0%,100%,.08);color:var(--casiny-text);display:inline-flex;font-size:.875rem;font-weight:900;gap:.5rem;letter-spacing:0;min-height:3rem;padding:0 .875rem;text-transform:none;white-space:nowrap}
.csy-lobby .csy-tabs .wp-block-button__link svg{color:var(--color-primary);fill:currentColor;flex:0 0 auto;height:1.25rem;width:1.25rem}
.csy-lobby .csy-tabs .wp-block-button__link:focus-visible,.csy-lobby .csy-tabs .wp-block-button__link:hover{background:linear-gradient(135deg,rgba(199,0,255,.24),rgba(122,25,255,.16)),#35115a;border-color:rgba(199,0,255,.68);color:#fff;transform:translateY(-.0625rem)}
.csy-lobby .csy-tabs .wp-block-button.is-active .wp-block-button__link{background:var(--gradient-primary);border-color:transparent;box-shadow:var(--shadow-cta);color:#fff}
.csy-lobby .csy-tabs .wp-block-button.is-active .wp-block-button__link svg{color:#fff}
.csy-lobby .csy-provider select{background:linear-gradient(180deg,rgba(57,10,88,.96),rgba(24,3,42,.96));border:1px solid rgba(199,0,255,.34);border-radius:var(--casiny-radius);color:var(--casiny-text);font:inherit;font-size:.875rem;font-weight:900;min-height:3rem;padding:0 .5rem}
.csy-lobby .csy-provider select:focus-visible,.csy-lobby .csy-provider select:hover{border-color:rgba(199,0,255,.68)}
.csy-lobby .csy-grid,.csy-lobby .csy-grid>.wp-block-group__inner-container{display:grid;gap:1rem;grid-template-columns:repeat(5,minmax(0,1fr))}
.csy-lobby .csy-grid{gap:0;grid-template-columns:1fr}
.csy-lobby .csy-card>.wp-block-group__inner-container{display:flex;flex-direction:column;height:100%}
.csy-lobby .csy-card{background:#0c0715;border:1px solid transparent;border-radius:var(--casiny-radius);isolation:isolate;margin:0;overflow:hidden;position:relative;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.csy-lobby .csy-card.is-hidden{display:none}
.csy-lobby .csy-card:focus-within,.csy-lobby .csy-card:hover{border-color:rgba(255,47,120,.72);box-shadow:0 .875rem 1.75rem rgba(0,0,0,.28);transform:translateY(-.125rem)}
.csy-lobby .csy-card-media{background:#0c0715;margin:0}
.csy-lobby .csy-card-media a{display:block;line-height:0}
.csy-lobby .csy-card-media img{aspect-ratio:4/3;display:block;height:auto;-o-object-fit:cover;object-fit:cover;object-position:center 80%;width:100%}
.csy-lobby .csy-card .csy-card-actions{align-content:center;align-items:center;background:linear-gradient(180deg,rgba(9,4,18,.72),rgba(9,4,18,.92));display:flex;flex-wrap:wrap;gap:.5rem;inset:0;justify-content:center;margin:0;opacity:0;padding:.625rem;position:absolute;transition:opacity .18s ease;z-index:2}
.csy-lobby .csy-card:focus-within .csy-card-actions,.csy-lobby .csy-card:hover .csy-card-actions{opacity:1}
.csy-lobby .csy-card-actions .wp-block-button{margin:0}
.csy-lobby .csy-card-actions .wp-block-button__link{border-radius:var(--casiny-radius);font-size:.8125rem;font-weight:900;min-height:2.25rem;padding:.4375rem 1rem}
.csy-lobby .csy-play .wp-block-button__link{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-strong));border:0;color:#fff}
.csy-lobby .csy-demo .wp-block-button__link{background:hsla(0,0%,100%,.14);border:1px solid hsla(0,0%,100%,.42);color:#fff}
.csy-lobby .csy-card-title{color:var(--casiny-text);line-height:1.3}
.csy-lobby .csy-card-provider{color:var(--casiny-muted)}
.csy-lobby .csy-showmore{display:flex;justify-content:center;margin:1.25rem 0 0}
.csy-lobby .csy-showmore .wp-block-button__link{background:hsla(0,0%,100%,.08);border:1px solid var(--casiny-line);border-radius:var(--casiny-radius);color:var(--casiny-text);font-weight:900;min-height:2.75rem;padding:.625rem 1.5rem}
.csy-lobby .csy-showmore.is-done{display:none}
.csy-lobby .csy-empty{color:var(--casiny-muted);display:none;margin:1rem 0 0}
.csy-lobby .csy-empty.is-shown{display:block}

/* --------------------------------------------------------------------------
   10b  SECTION HEADS, PROVIDER RAIL, TILE BADGES
   Layout follows the Casiny lobby: a head row (icon + label left, controls
   right), a horizontally scrolled provider rail, then 4:3 artwork tiles that
   carry the studio logo in a corner badge. Colours stay on this site's tokens.
   -------------------------------------------------------------------------- */

.csy-lobby .csy-sec-head{align-items:center;column-gap:1rem;display:flex;justify-content:space-between;
  margin:0 0 .75rem;row-gap:.5rem}
.csy-lobby .csy-sec-title{align-items:center;color:var(--casiny-text);display:flex;flex:1 1 auto;
  font-size:clamp(1.0625rem,1.3vw,1.1875rem);font-weight:800;gap:.5rem;line-height:1.2;margin:0;min-width:0}
.csy-sec-icon{color:var(--color-primary);fill:currentColor;flex:0 0 auto;height:1.25rem;width:1.25rem}
.csy-lobby .csy-sec-tools{align-items:center;display:flex;flex:0 0 auto;gap:.5rem}

/* shared pill: the "All" filter and the read-only count read as one family */
.csy-prov-all,.csy-lobby .csy-count{align-items:center;background:var(--bg-chip);
  border:1px solid var(--color-line);border-radius:var(--radius-pill);display:inline-flex;
  font-family:inherit;font-size:.8125rem;font-weight:800;justify-content:center;margin:0;min-height:2.25rem}
.csy-prov-all{color:var(--casiny-text);cursor:pointer;padding:0 1.25rem;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.csy-prov-all:focus-visible,.csy-prov-all:hover{border-color:var(--color-line-strong);color:#fff}
.csy-prov-all.is-active{background:var(--gradient-primary);border-color:transparent;
  box-shadow:var(--shadow-cta);color:#fff}
.csy-lobby .csy-count{color:var(--casiny-muted);padding:0 .875rem;white-space:nowrap}
.csy-lobby .csy-count:empty{display:none}

.csy-prov-nav{align-items:center;background:var(--bg-chip);border:1px solid var(--color-line);
  border-radius:var(--radius-pill);color:var(--casiny-text);cursor:pointer;display:inline-flex;
  flex:0 0 auto;height:2.25rem;justify-content:center;padding:0;width:2.25rem;
  transition:background .16s ease,border-color .16s ease}
.csy-prov-nav[hidden]{display:none}
.csy-prov-nav:focus-visible,.csy-prov-nav:hover{border-color:var(--color-line-strong);color:#fff}
.csy-prov-nav svg{fill:currentColor;height:1.125rem;width:1.125rem}

/* ---- provider rail ---- */
.csy-lobby .csy-providers{margin:0 0 1.5rem}
.csy-providers-rail{min-width:0}
.csy-provider-track{-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:1rem;min-width:0;
  overflow-x:auto;overflow-y:hidden;padding:.125rem;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scrollbar-width:none}
.csy-provider-track::-webkit-scrollbar{display:none}

.csy-prov{align-items:center;background:var(--casiny-surface);border:1px solid hsla(0,0%,100%,.1);
  border-radius:var(--casiny-radius);color:var(--casiny-text);cursor:pointer;display:inline-flex;
  flex:0 0 auto;height:4rem;justify-content:center;padding:.625rem 1rem;scroll-snap-align:start;
  width:9.75rem;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.csy-prov:focus-visible,.csy-prov:hover{background:linear-gradient(135deg,rgba(199,0,255,.2),rgba(122,25,255,.12)),#22103a;
  border-color:rgba(199,0,255,.6);transform:translateY(-.0625rem)}
.csy-prov.is-active{background:var(--gradient-primary);border-color:transparent;
  box-shadow:var(--shadow-cta);color:#fff}
.csy-prov img{display:block;height:100%;max-height:2.25rem;max-width:100%;-o-object-fit:contain;
  object-fit:contain;pointer-events:none;width:auto}
.csy-prov-word{font-size:.9375rem;font-weight:900;line-height:1.2;text-align:center}
/* providers with no game on this page: still selectable, but visibly quieter */
.csy-prov.is-empty{opacity:.5}
.csy-prov.is-empty.is-active{opacity:1}

/* the rail supersedes the old provider <select>; the select stays in the DOM
   (and keeps working) so removing .csy-providers restores it untouched */
.csy-lobby.has-prov-rail .csy-provider{display:none}

/* ---- studio badge on a tile ---- */
.csy-lobby .csy-card-badge{align-items:center;background:rgba(7,4,16,.86);
  border-bottom-left-radius:var(--casiny-radius);color:#fff;display:flex;height:2.125rem;
  justify-content:center;min-width:4.25rem;padding:.3125rem .5rem;position:absolute;right:0;top:0;
  width:38%;z-index:3}
.csy-lobby .csy-card-badge{transition:opacity .18s ease}
.csy-lobby .csy-card:focus-within .csy-card-badge,
.csy-lobby .csy-card:hover .csy-card-badge{opacity:0}
.csy-lobby .csy-card-badge img{display:block;height:100%;max-height:1.5rem;max-width:100%;
  -o-object-fit:contain;object-fit:contain;width:auto}
.csy-lobby .csy-card-badge-word{font-size:.5625rem;font-weight:900;letter-spacing:.02em;
  line-height:1.1;text-align:center;text-transform:uppercase}

/* ---- tile caption: lives in the hover overlay, never removed from the DOM ---- */
.csy-lobby .csy-card-meta{flex:0 0 100%;min-width:0;text-align:center}
.csy-lobby .csy-card-meta .csy-card-title{font-size:.875rem;font-weight:800;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csy-lobby .csy-card-meta .csy-card-provider{font-size:.75rem;margin:.125rem 0 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}




/* ==========================================================================
   11  HERO / CATEGORY CHIPS / GAME CARDS
   ========================================================================== */

.casiny-stage{padding:clamp(1rem,2vw,1.5rem) 0 0}
.casiny-hero{aspect-ratio:2172/724;background:var(--color-surface-strong);border-radius:var(--casiny-radius);overflow:hidden;position:relative}
.casiny-hero-track{height:100%;position:relative;width:100%}
/* IMPORTANT - classic-theme quirk: this theme has no theme.json, so WordPress
   wraps every core/group's children in an extra .wp-block-group__inner-container
   div. That wrapper breaks both `>` selectors and height:100% chains, so it is
   removed from the box tree with display:contents and the selectors below use
   descendant combinators. Do not switch these back to `>`. */
.casiny-stage>.wp-block-group__inner-container,
.casiny-hero>.wp-block-group__inner-container,
.casiny-hero-track>.wp-block-group__inner-container,
.casiny-article>.wp-block-group__inner-container{display:contents}

/* Hero slides are native core/image blocks (each renders as a <figure>), so the
   images stay swappable in the block editor. The crossfade is pure CSS - there
   is no JavaScript anywhere on this site. Add or remove slides freely: the
   nth-child delays below cover up to 4. */
.casiny-hero-media{margin:0;height:100%;inset:0;opacity:0;position:absolute;width:100%}
.casiny-hero-media img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;display:block}
.casiny-hero-track figure.casiny-hero-media{animation:casiny-hero-fade 15s infinite}
.casiny-hero-track figure.casiny-hero-media:nth-child(1){animation-delay:0s}
.casiny-hero-track figure.casiny-hero-media:nth-child(2){animation-delay:5s}
.casiny-hero-track figure.casiny-hero-media:nth-child(3){animation-delay:10s}
.casiny-hero-track figure.casiny-hero-media:nth-child(4){animation-delay:15s}
.casiny-hero-track:has(figure:nth-child(4)) figure.casiny-hero-media{animation-duration:20s}
.casiny-hero-track:has(figure:nth-child(2):last-child) figure.casiny-hero-media{animation-duration:10s}
/* Crossfade without ghosting: the incoming slide fades in ON TOP (z-index 3)
   while the outgoing one stays fully opaque underneath, then drops to
   z-index 1. Two half-transparent images are never stacked. */
@keyframes casiny-hero-fade{0%{opacity:0;z-index:3}4%{opacity:1;z-index:3}33.3%{opacity:1;z-index:3}37%{opacity:1;z-index:1}100%{opacity:1;z-index:1}}
.casiny-hero-media.is-active{opacity:1}
.casiny-hero-pagination{bottom:.75rem;display:flex;gap:.4rem;position:absolute;right:0;z-index:2;left:0;justify-content:center}
.casiny-hero-pagination span{background:rgba(255,255,255,.4);border-radius:999px;box-shadow:0 0 0 1px rgba(3,5,11,.34);height:.5rem;transition:width .2s ease,background .2s ease;width:.5rem}
.casiny-hero-pagination span.is-active{background:var(--color-primary);width:1.25rem}
.casiny-hero-pagination span{animation:casiny-dot 15s infinite}
.casiny-hero-pagination span:nth-child(1){animation-delay:0s}
.casiny-hero-pagination span:nth-child(2){animation-delay:5s}
.casiny-hero-pagination span:nth-child(3){animation-delay:10s}
@keyframes casiny-dot{0%{background:rgba(255,255,255,.4);width:.5rem}2%{background:var(--color-primary);width:1.25rem}31%{background:var(--color-primary);width:1.25rem}33%{background:rgba(255,255,255,.4);width:.5rem}100%{background:rgba(255,255,255,.4);width:.5rem}}
.casiny-category-bar{margin:.875rem 0 1.25rem}
.casiny-category-bar,.casiny-category-scroll{display:flex;gap:.75rem;justify-content:center}
.casiny-category-scroll{min-width:0;overflow-x:auto;overflow-y:hidden;padding-bottom:.25rem;padding-top:.25rem;scroll-snap-type:x proximity;scrollbar-width:none;width:100%;padding:.25rem}
.casiny-category-scroll::-webkit-scrollbar{display:none}
.casiny-category-chip,a.casiny-category-chip{align-items:center;background:linear-gradient(180deg,rgba(57,10,88,.96),rgba(24,3,42,.96));background-image:none;border:1px solid rgba(199,0,255,.34);border-radius:var(--casiny-radius);box-shadow:inset 0 .0625rem 0 hsla(0,0%,100%,.08);color:var(--casiny-text);display:inline-flex;flex:0 0 auto;font-weight:900;gap:.625rem;min-height:3.25rem;padding:0 1rem;scroll-snap-align:start;text-decoration:none;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.casiny-category-chip:focus-visible,.casiny-category-chip:hover{background:linear-gradient(135deg,rgba(199,0,255,.24),rgba(122,25,255,.16)),#35115a;border-color:rgba(199,0,255,.68);transform:translateY(-.0625rem)}
.casiny-category-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-chip);border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:.5rem .875rem;color:var(--casiny-text);font-weight:700;font-size:.9rem;text-decoration:none}
.casiny-category-chip:hover{border-color:var(--color-line-strong);color:#fff}
.popular-games{display:grid;gap:.75rem;margin-top:1.25rem}
.popular-games-title{color:var(--casiny-muted);font-size:var(--small-size);font-weight:900;margin:1.25rem 0 .5rem;text-transform:uppercase;letter-spacing:.06em}
.popular-games-grid{display:grid;gap:.625rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.popular-games-card,a.popular-games-card{background:#0c0715;background-image:none;border:1px solid hsla(0,0%,100%,.12);border-radius:var(--casiny-radius);display:block;isolation:isolate;min-width:0;overflow:hidden;position:relative;text-decoration:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.popular-games-card:focus-visible,.popular-games-card:hover{border-color:rgba(199,0,255,.62);box-shadow:0 .875rem 1.75rem rgba(199,0,255,.18);transform:translateY(-.125rem)}
.popular-games-card>img{aspect-ratio:2/3;-o-object-fit:cover;object-fit:cover;width:100%}
.popular-games-play{background:rgba(4,8,24,.38);display:grid;inset:0;opacity:0;place-items:center;position:absolute;transition:opacity .16s ease;z-index:1}
.popular-games-card:focus-visible .popular-games-play,.popular-games-card:hover .popular-games-play{opacity:1}
.popular-games-play svg{filter:drop-shadow(0 .5rem 1rem rgba(0,0,0,.42));height:2rem;width:2rem}
.popular-games-play-disc{fill:rgba(3,5,11,.6)}
.popular-games-play-triangle{fill:#fff}
.casiny-games{margin-top:clamp(1rem,2vw,1.5rem)}
.casiny-game-track{display:grid;gap:.875rem;grid-auto-columns:10.25rem;grid-auto-flow:column;overflow-x:auto;overflow-y:hidden;padding:.375rem 0;scroll-snap-type:x proximity;scrollbar-width:none}
.casiny-game-track::-webkit-scrollbar{display:none}
.casiny-game-card{min-width:10.25rem;scroll-snap-align:start;position:relative;border-radius:var(--casiny-radius);overflow:hidden}
.casiny-game-link,a.casiny-game-link{aspect-ratio:2/3;background:#1d102f;background-image:none;border:1px solid hsla(0,0%,100%,.12);border-radius:var(--casiny-radius);box-shadow:0 .875rem 1.75rem rgba(0,0,0,.22);display:block;isolation:isolate;min-height:0;overflow:hidden;position:relative;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.casiny-game-link:focus-visible,.casiny-game-link:hover{border-color:rgba(199,0,255,.58);box-shadow:0 1rem 2.25rem rgba(199,0,255,.18);transform:translateY(-.125rem)}
.casiny-game-image{aspect-ratio:2/3;background:#0c0715;height:auto;-o-object-fit:cover;object-fit:cover;width:100%;display:block;border-radius:var(--casiny-radius)}
.casiny-game-overlay{background:rgba(3,5,11,.55);display:grid;inset:0;opacity:0;padding:.875rem;place-items:center;position:absolute;transition:opacity .16s ease;z-index:1}
.casiny-game-link:focus-visible .casiny-game-overlay,.casiny-game-link:hover .casiny-game-overlay{opacity:1}
.casiny-game-card:hover .casiny-game-overlay{opacity:1}
.popular-games-card{position:relative;display:block;border-radius:var(--casiny-radius-sm);overflow:hidden}
.popular-games-card img{width:100%;height:auto;display:block}
.popular-games-card:hover .popular-games-play{opacity:1}


/* ==========================================================================
   12  MEDIA COMPONENTS  (banners, CTAs, provider + payment logo rows)
   ========================================================================== */

.casiny-content-visual{background:var(--color-surface-strong);border:1px solid rgba(199,0,255,.28);border-radius:var(--casiny-radius);margin:clamp(1.25rem,3vw,2rem) 0;overflow:hidden}
.casiny-content-visual img{display:block;-o-object-fit:cover;object-fit:cover;width:100%}
.casiny-visual-cta{display:flex;justify-content:center;padding:clamp(.75rem,2vw,1rem)}
.media .casiny-visual-cta{padding-bottom:0}
.casiny-content-visual-dashboard img{aspect-ratio:1448/1086}
.casiny-content-visual-bonus img{aspect-ratio:1448/588}
.bonus-mockups-banner{margin:clamp(1.25rem,3vw,2rem) 0}
.bonus-mockups-banner img{aspect-ratio:9/5;display:block;-o-object-fit:cover;object-fit:cover;width:100%}
.bonus-card-grid{display:grid;gap:clamp(.75rem,2vw,1.125rem);grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(1.25rem,3vw,2rem) 0}
.bonus-promo-card{background:#061126;border:1px solid hsla(0,0%,100%,.14);border-radius:var(--casiny-radius-sm);box-shadow:0 14px 32px rgba(0,0,0,.28);display:block;overflow:hidden;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.bonus-promo-card:focus-visible,.bonus-promo-card:hover{border-color:var(--color-accent);box-shadow:0 18px 40px rgba(199,0,255,.18);transform:translateY(-2px)}
.bonus-promo-card img{aspect-ratio:1;display:block;-o-object-fit:cover;object-fit:cover;width:100%}
.image-frame{border-radius:var(--casiny-radius-sm);margin:0;overflow:hidden}
.image-frame img{display:block;width:100%}
.banner-frame{width:100%}
.banner-frame img{height:auto;max-height:min(42rem,76vh);-o-object-fit:contain;object-fit:contain;width:100%}
.cover-banner .banner-frame img{aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover}
.media-text{align-items:flex-start;display:flex;gap:clamp(1rem,3vw,1.75rem);margin:clamp(1.5rem,4vw,2.5rem) 0 0}
.media-text .text{flex:1 1 18rem;min-width:0}
.media-text .media{flex:0 1 min(24rem,48%);min-width:14rem;position:sticky;top:calc(var(--casiny-header) + 1rem)}
.media-frame{padding:clamp(.5rem,1.5vw,.875rem)}
.media-frame img{margin:0 auto;max-height:min(42rem,72vh);max-width:100%;-o-object-fit:contain;object-fit:contain;width:auto}
.media-text .text>:first-child{margin-top:0}
.media-text .text>:last-child{margin-bottom:0}
.csy-note{color:var(--color-muted-soft);font-size:var(--small-size);text-align:center;max-width:60rem;margin:0 auto}
.csy-18{display:inline-flex;align-items:center;gap:.5rem;justify-content:center}
.csy-18 svg{width:2rem;height:2rem;color:var(--color-primary);fill:currentColor}
.csy-banner{display:block;margin:1.5rem 0;border-radius:var(--casiny-radius);overflow:hidden;border:1px solid var(--color-line)}
.csy-banner img{width:100%;height:auto;display:block}
.casiny-section-head{display:flex;align-items:end;justify-content:space-between;margin:0 0 .875rem;gap:1rem}
/* deliberately a <p>, not an <h2>: this is a UI label on a shared component
   and must not inject a heading into every page's outline */
.casiny-section-head h2,.casiny-section-head p{font-size:var(--section-title-size);margin:0;color:var(--casiny-text);font-weight:800;line-height:1.2}
.casiny-payment-grid,.casiny-provider-track{align-items:center;display:flex;flex-wrap:nowrap;gap:.85rem 1.35rem;justify-content:start;overflow-x:auto;overflow-y:hidden;padding-bottom:.125rem;scroll-snap-type:x proximity;scrollbar-width:none}
.casiny-payments,.casiny-provider-gallery{margin-top:1.125rem;width:100%}
.casiny-payment-grid{justify-content:center}
.casiny-payment-grid::-webkit-scrollbar,.casiny-provider-track::-webkit-scrollbar{display:none}
.casiny-payment-grid img,.casiny-provider-track img{flex:0 0 auto;max-height:2.5rem;max-width:8.5rem;-o-object-fit:contain;object-fit:contain;opacity:.88;scroll-snap-align:start;width:auto}
.casiny-provider-track img{max-height:2.25rem}


/* ==========================================================================
   13  RESPONSIVE
   ========================================================================== */

@media (max-width:960px){
  .page-body{grid-template-columns:minmax(0,1fr);row-gap:1rem}
  .page-body>.casiny-sidebar,.page-body>:not(.casiny-sidebar){grid-column:1}
  .page-body>.casiny-sidebar{grid-row:auto}
  /* rail collapses to a horizontal scrolling chip row - no hamburger required,
     because the theme header has no menu button and must not be modified */
  .page-body>.casiny-sidebar{align-self:start}
  .casiny-sidebar{position:static;min-height:0;max-height:none;padding:.625rem;overflow:visible}
  .casiny-sidebar-inner{position:static}
  .casiny-sidebar-title{display:none}
  .casiny-rail-nav,.casiny-sidebar-menu{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:.5rem}
  .casiny-rail-nav::-webkit-scrollbar,.casiny-sidebar-menu::-webkit-scrollbar{display:none}
  .casiny-sidebar-menu-link,a.casiny-sidebar-menu-link{white-space:nowrap;flex:0 0 auto}
  /* the rail's Popular games grid repeats the "Popular pokies" strip that sits
     directly below it on narrow screens, so hide the duplicate */
  .casiny-sidebar .popular-games{display:none}
  .site-header__inner{height:auto;padding-top:.625rem;padding-bottom:.625rem;flex-wrap:nowrap}
  .site-nav__list{gap:.875rem;justify-content:flex-start}
  .site-nav{justify-content:flex-start}
  .site-footer__top{grid-template-columns:1fr}
  /* desktop pins these to row 1; on one column they must each get their own row
     or the logo and the certification strip land on top of each other */
  .site-footer__brand{grid-column:1;grid-row:1}
  .site-footer__nav-group{grid-column:1;grid-row:2}
  .site-footer__right{grid-column:1;grid-row:3}
  .site-footer__col--legal{grid-column:1;grid-row:4}
}
/* the 23.5rem sidebar is still in the layout above 960px, so the tile grid
   steps down before the rail does - 5 across only once there is room */
@media (max-width:1400px){
  .csy-lobby .csy-grid>.wp-block-group__inner-container{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1150px){
  .csy-lobby .csy-grid>.wp-block-group__inner-container{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .popular-games-grid{grid-template-columns:repeat(3,minmax(0,4.75rem))}
  .csy-lobby .csy-grid>.wp-block-group__inner-container{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .casiny-category-scroll{justify-content:flex-start}
  .media-text{align-items:stretch;flex-direction:column}
  .media-text .media{flex-basis:auto;position:static}
  .csy-lobby .csy-bar>.wp-block-group__inner-container{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .csy-lobby .csy-tabs{flex-wrap:nowrap}
  .csy-lobby .csy-grid>.wp-block-group__inner-container{gap:.625rem;grid-template-columns:repeat(2,minmax(0,1fr))}
  .csy-lobby .csy-card-meta .csy-card-title{font-size:.8125rem}
  .csy-lobby .csy-card-meta .csy-card-provider{font-size:.6875rem}
  .csy-lobby .csy-card-badge{height:1.875rem;max-width:6rem;min-width:3.5rem;width:42%}
  .csy-lobby .csy-card-badge img{max-height:1.25rem}
  .csy-lobby .csy-providers{margin-bottom:1.125rem}
  .csy-prov{height:4rem;padding:.625rem .875rem;width:9rem}
  .csy-prov img{max-height:2.25rem}
  .csy-provider-track{gap:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .casiny-hero-media,.casiny-hero-pagination span{transition:none}
  .casiny-hero-track figure.casiny-hero-media,.casiny-hero-pagination span{animation:none}
  .casiny-hero-track figure.casiny-hero-media:nth-child(1){opacity:1}
  .casiny-hero-pagination span:nth-child(1){background:var(--color-primary);width:1.25rem}
  .csy-prov,.csy-prov-nav{transition:none}
  .csy-prov:hover{transform:none}
  .csy-provider-track{scroll-behavior:auto}
  .csy-lobby .csy-card,.csy-lobby .csy-card-actions{transition:none}
  .csy-lobby .csy-card:hover{transform:none}
}
@media (max-width:860px){
  .bonus-card-grid{grid-template-columns:1fr}
}
@media (hover:none){
  /* swipe is the primary gesture here, so the arrows only add clutter */
  .csy-prov-nav{display:none}
  .csy-lobby .csy-card-meta{display:none}
  .csy-lobby .csy-card:hover .csy-card-badge{opacity:1}
  .csy-lobby .csy-card .csy-card-actions{background:linear-gradient(180deg,rgba(12,7,21,0),rgba(12,7,21,.62));opacity:1}
  .csy-lobby .csy-card-actions .wp-block-button__link{font-size:.75rem;min-height:2rem;padding:.375rem .75rem}
}
@media (max-width:640px){
  .site-footer__bottom{flex-direction:column;align-items:flex-start}
}
