/* =========================================================================
   IVIBET NEW ZEALAND — satellite design system  (distinct from DE and CA)
   Azzurro-blue + gold palette, SOLID BLUE header, two-column layout with a
   single unified right rail (Ruota + Config + Schedina + Link veloci).
   Prefix: cl-
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input{font:inherit}

:root{
  --cl-blue:#da291c;       /* primary accent / active / links */
  --cl-blue-d:#a81d10;
  --cl-blue-l:#f04a37;
  --cl-gold:#ffffff;       /* highlight numbers / login CTA / wheel */
  --cl-gold-d:#f04a37;

  --cl-navy:#14264f;       /* betslip / dark panels / chrome bits */
  --cl-navy-2:#1e3568;
  --cl-navy-3:#2b4680;
  --cl-line-d:#2c4a86;

  --cl-bg:#eef1f8;         /* cool light body */
  --cl-card:#ffffff;
  --cl-line:#e0e6f2;
  --cl-line-2:#eef2fa;

  --cl-text:#152030;       /* text on light */
  --cl-muted:#6b7480;
  --cl-on-dark:#e9edf3;
  --cl-on-dark-mut:#9aa4b2;

  --cl-sans:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --cl-radius:14px;
  --cl-shadow:0 10px 30px rgba(8,16,38,.14);
  --cl-shadow-sm:0 3px 12px rgba(8,16,38,.10);
  --cl-head-h:64px;
}

body{
  font-family:var(--cl-sans);
  color:var(--cl-text);
  background:var(--cl-bg);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.cl-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.cl-ico{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.cl-wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:16px}

/* scrollbar */
*{scrollbar-width:thin;scrollbar-color:var(--cl-blue) rgba(150,160,175,.18)}
::-webkit-scrollbar{width:9px;height:8px}
::-webkit-scrollbar-track{background:rgba(150,160,175,.12)}
::-webkit-scrollbar-thumb{background:var(--cl-blue);border-radius:8px}

/* ============================ HEADER (SOLID BLUE) ===================== */
.cl-head{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#e5382a,#da291c);
  border-bottom:3px solid var(--cl-gold);
  color:#fff;
}
.cl-head__in{
  max-width:1500px;margin-inline:auto;height:var(--cl-head-h);
  display:flex;align-items:center;gap:14px;padding:0 18px;
}
.cl-burger{display:none;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;color:#fff}
.cl-burger:hover{background:rgba(255,255,255,.14)}
.cl-logo{display:flex;align-items:center;flex:none;background:#fff;padding:6px 13px;border-radius:11px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.cl-logo img{height:26px;width:auto;display:block}
.cl-head__nav{display:flex;align-items:center;gap:3px;margin-left:10px;overflow:hidden}
.cl-navlink{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px;
  border-radius:11px;color:#e9edf3;font-size:14px;font-weight:600;white-space:nowrap;
  transition:.16s color,.16s background;position:relative;
}
.cl-navlink .cl-ico{width:18px;height:18px;color:#c9d1db;transition:.16s}
.cl-navlink:hover{color:#fff;background:rgba(255,255,255,.12)}
.cl-navlink:hover .cl-ico{color:#fff}
.cl-navlink.is-active{color:#7a1208;background:#fff}
.cl-navlink.is-active .cl-ico{color:var(--cl-blue)}
.cl-head__sp{flex:1}
.cl-lang{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;border-radius:9px;color:#e9edf3;font-weight:700;font-size:13px}
.cl-lang:hover{background:rgba(255,255,255,.14);color:#fff}
.cl-head__auth{display:flex;align-items:center;gap:9px}
.cl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 18px;border-radius:11px;font-weight:700;font-size:14px;
  white-space:nowrap;transition:.16s transform,.16s box-shadow,.16s filter;
}
.cl-btn:active{transform:translateY(1px)}
.cl-btn--login{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue));color:#fff;box-shadow:0 6px 16px rgba(240,74,55,.34)}
.cl-btn--login:hover{filter:brightness(1.06);box-shadow:0 8px 22px rgba(240,74,55,.5)}
.cl-btn--reg{background:linear-gradient(180deg,#ffffff,var(--cl-gold));color:#8f1810;box-shadow:0 6px 16px rgba(218,41,28,.36)}
.cl-btn--reg:hover{filter:brightness(1.05);box-shadow:0 8px 22px rgba(218,41,28,.5)}
.cl-btn--ghost{background:transparent;border:1px solid var(--cl-blue);color:var(--cl-blue-d)}
.cl-btn--ghost:hover{background:rgba(240,74,55,.08)}
.cl-btn--wide{width:100%}
.cl-btn--lg{height:52px;padding:0 30px;font-size:16px;border-radius:13px}
/* Accedi in the header reads as an outline chip; elsewhere it stays blue */
.cl-head__auth .cl-btn--login{background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff;box-shadow:none}
.cl-head__auth .cl-btn--login:hover{background:rgba(255,255,255,.14);filter:none;box-shadow:none}

/* ============================ FULL-WIDTH MAIN ======================== */
.cl-main{display:block}
.cl-page{max-width:1180px;margin-inline:auto;padding:18px 16px 40px;display:flex;flex-direction:column;gap:16px}

/* ============= SPORTSBOOK 2-COLUMN SHELL + UNIFIED RIGHT RAIL ======== */
.cl-shell{
  max-width:1400px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:16px;padding:16px 18px 40px;align-items:start;
}
.cl-shell__main{min-width:0;display:flex;flex-direction:column;gap:16px;grid-column:1;grid-row:1}
.cl-rail{grid-column:2;grid-row:1;position:sticky;top:calc(var(--cl-head-h) + 14px);display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - var(--cl-head-h) - 28px);overflow:auto}

/* Ruota launcher inside the rail */
.cl-ruota{
  display:flex;align-items:center;gap:10px;width:100%;height:52px;padding:0 14px;
  border-radius:13px;font-weight:800;font-size:15px;letter-spacing:.2px;color:#8f1810;
  background:linear-gradient(135deg,#ffffff,var(--cl-gold));box-shadow:0 8px 20px rgba(218,41,28,.42);
  position:relative;overflow:hidden;
}
.cl-ruota::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:cl-shine 3.6s ease-in-out infinite}
@keyframes cl-shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
.cl-ruota__disc{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:conic-gradient(from 0deg,var(--cl-blue) 0 25%,#8a1810 0 50%,var(--cl-blue) 0 75%,#8a1810 0);
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;animation:cl-spin-slow 6s linear infinite;
}
@keyframes cl-spin-slow{to{transform:rotate(360deg)}}
.cl-ruota--fixed{position:fixed;right:20px;bottom:20px;z-index:70;width:auto;height:54px;padding:0 22px 0 14px;border-radius:28px;box-shadow:0 10px 26px rgba(218,41,28,.55)}
.cl-ruota--fixed .cl-ruota__disc{width:34px;height:34px}

/* betslip + panels */
.cl-panel{background:var(--cl-navy);border:1px solid var(--cl-line-d);border-radius:16px;color:var(--cl-on-dark);overflow:hidden}
.cl-panel__h{display:flex;align-items:center;gap:8px;padding:12px 14px;font-weight:800;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:#c9d1db;border-bottom:1px solid var(--cl-line-d)}
.cl-panel__h .cl-ico{width:16px;height:16px}
.cl-panel__h .cl-trash{margin-left:auto;color:#8b94a2}
.cl-slip__tabs{display:flex;padding:8px 8px 0}
.cl-slip__tab{flex:1;height:40px;font-weight:700;font-size:13px;color:#9aa4b2;position:relative}
.cl-slip__tab.is-on{color:#fff}
.cl-slip__tab.is-on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px;background:var(--cl-gold)}
.cl-slip__body{padding:24px 18px 18px;text-align:center}
.cl-slip__ticket{width:60px;height:60px;margin:0 auto 12px;border-radius:14px;background:var(--cl-navy-2);display:flex;align-items:center;justify-content:center;color:#6c7480}
.cl-slip__ticket .cl-ico{width:28px;height:28px}
.cl-slip__empty{font-weight:700;color:#dfe4ec;margin:0 0 6px}
.cl-slip__hint{font-size:12.5px;color:#8b94a2;margin:0}
.cl-slip__code{display:flex;gap:8px;padding:0 18px 16px}
.cl-slip__code input{flex:1;height:44px;border-radius:11px;background:var(--cl-navy-2);border:1px solid var(--cl-line-d);color:#dfe4ec;padding:0 14px;outline:none}
.cl-slip__code input:focus{border-color:var(--cl-blue-l)}
.cl-slip__foot{padding:0 18px 18px}
/* quick links list inside the rail */
.cl-side__h{display:flex;align-items:center;gap:8px;color:#98a2b0;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin:2px 4px 6px}
.cl-qlist{display:flex;flex-direction:column;gap:1px}
.cl-qrow{display:flex;align-items:center;gap:11px;height:42px;padding:0 10px;border-radius:10px;color:#d0d7e1;font-size:14px;font-weight:600;transition:.14s}
.cl-qrow .cl-ico{width:18px;height:18px;color:#8b94a2}
.cl-qrow:hover{background:var(--cl-navy-2);color:#fff}
.cl-qrow:hover .cl-ico{color:var(--cl-blue-l)}
.cl-qrow.is-active{background:var(--cl-navy-2);color:var(--cl-blue-l)}
.cl-qrow.is-active .cl-ico{color:var(--cl-blue-l)}
.cl-qrow__badge{margin-left:auto;background:var(--cl-gold);color:#8f1810;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.cl-lg__flag{width:22px;height:16px;border-radius:3px;flex:none;object-fit:cover;background:var(--cl-navy-3)}
.cl-slipcas__tabs{display:flex;gap:16px;padding:12px 14px 0;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.cl-slipcas__tab{color:#8b94a2;padding-bottom:8px;position:relative}
.cl-slipcas__tab.is-on{color:#fff}
.cl-slipcas__tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cl-gold)}
.cl-slipcas__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px 14px}
.cl-slipcas__grid .cl-tile{border-radius:12px}

/* ============================ HERO CAROUSEL ========================== */
.cl-hero{position:relative;border-radius:18px;overflow:hidden;background:#0d1a3c;box-shadow:var(--cl-shadow)}
.cl-hero__track{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.cl-hero__slide{position:relative;min-width:100%;aspect-ratio:1040/378;display:flex;align-items:center;background:radial-gradient(70% 100% at 78% 24%,#1c3566,#081026 72%)}
.cl-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cl-hero__slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,14,34,.93) 0%,rgba(8,14,34,.55) 45%,rgba(8,14,34,.05) 75%);z-index:1}
.cl-hero__c{position:relative;z-index:2;padding:0 clamp(22px,4vw,54px);max-width:60%}
.cl-hero__kick{color:var(--cl-gold);font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:clamp(13px,1.6vw,17px);margin:0 0 6px}
.cl-hero__amt{font-size:clamp(28px,4.4vw,52px);font-weight:900;color:#fff;line-height:1.02;margin:0}
.cl-hero__amt span{color:var(--cl-gold)}
.cl-hero__sub{color:#dbe1ea;font-weight:700;letter-spacing:.5px;margin:6px 0 16px;font-size:clamp(12px,1.5vw,16px);text-transform:uppercase}
.cl-hero__dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:7px}
.cl-hero__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:.2s}
.cl-hero__dot.is-on{width:26px;border-radius:6px;background:var(--cl-gold)}
.cl-hero__arw{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:10px;background:rgba(9,16,40,.55);color:#fff;display:flex;align-items:center;justify-content:center}
.cl-hero__arw:hover{background:rgba(9,16,40,.85)}
.cl-hero__arw--prev{left:12px}.cl-hero__arw--next{right:12px}

/* ============================ CASINO HERO =========================== */
.cl-chero{
  position:relative;border-radius:18px;overflow:hidden;min-height:420px;
  display:flex;align-items:center;box-shadow:var(--cl-shadow);
  background:
    radial-gradient(55% 75% at 80% 112%, rgba(240,74,55,.45), transparent 62%),
    radial-gradient(46% 55% at 88% 16%, rgba(218,41,28,.20), transparent 62%),
    radial-gradient(130% 140% at 16% 6%, #1c3566, #081026 66%);
}
.cl-chero__lights{position:absolute;inset:0;z-index:0;
  background-image:
    radial-gradient(2px 2px at 12% 22%,#ffffff 45%,transparent),radial-gradient(2px 2px at 28% 68%,#ffab9c 45%,transparent),
    radial-gradient(3px 3px at 46% 30%,#ffffff 45%,transparent),radial-gradient(2px 2px at 62% 74%,#ffab9c 45%,transparent),
    radial-gradient(2px 2px at 74% 20%,#ffffff 45%,transparent),radial-gradient(3px 3px at 88% 58%,#ffab9c 45%,transparent),
    radial-gradient(2px 2px at 94% 34%,#ffffff 45%,transparent),radial-gradient(2px 2px at 38% 88%,#ffffff 45%,transparent);
  animation:cl-twinkle 4.5s ease-in-out infinite;
}
@keyframes cl-twinkle{0%,100%{opacity:.35}50%{opacity:.85}}
.cl-chero__glow{position:absolute;right:20%;top:50%;transform:translateY(-50%);z-index:1;width:min(420px,46%);aspect-ratio:1;filter:blur(4px);
  background:radial-gradient(circle,rgba(240,74,55,.55),transparent 66%);animation:cl-pulse 4s ease-in-out infinite}
@keyframes cl-pulse{0%,100%{opacity:.3;transform:translateY(-50%) scale(1)}50%{opacity:.65;transform:translateY(-50%) scale(1.06)}}
.cl-chero__c{position:relative;z-index:3;padding:clamp(24px,4vw,52px);max-width:60%}
.cl-chero__pack{color:#dbe1ea;font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:clamp(13px,1.6vw,17px);margin:0 0 8px}
.cl-chero__amt{font-size:clamp(30px,5vw,58px);font-weight:900;color:#fff;line-height:1.02;margin:0 0 18px}
.cl-chero__amt b{color:var(--cl-gold)}
.cl-chero__note{color:#a6b0be;font-size:13px;margin:14px 0 0}
.cl-chero__note a{color:var(--cl-gold);font-weight:700}
.cl-chero__char{position:absolute;right:19%;bottom:0;z-index:2;height:106%;width:auto;max-width:40%;object-fit:contain;object-position:bottom;pointer-events:none;filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}

/* wins ticker */
.cl-wins{position:absolute;right:16px;top:16px;z-index:4;width:258px;max-width:32%;background:rgba(255,255,255,.96);border-radius:14px;box-shadow:var(--cl-shadow);overflow:hidden}
.cl-wins__row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--cl-line-2);font-size:12.5px}
.cl-wins__row:last-child{border-bottom:0}
.cl-wins__row img{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:none}
.cl-wins__row b{color:var(--cl-text)}
.cl-wins__row span{color:var(--cl-blue-d);font-weight:700}

/* ============================ CATEGORY TABS ========================= */
.cl-cats{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;align-items:center;background:var(--cl-card);border-radius:14px;padding:10px;box-shadow:var(--cl-shadow-sm);scrollbar-width:thin}
.cl-cats::-webkit-scrollbar{height:5px}
.cl-cat{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-width:74px;flex:0 0 auto;padding:8px 10px;border-radius:11px;color:var(--cl-muted);font-size:12px;font-weight:700;transition:.14s}
.cl-cat .cl-ico{width:22px;height:22px}
.cl-cat:hover{background:var(--cl-line-2);color:var(--cl-text)}
.cl-cat.is-on{color:var(--cl-blue-d)}
.cl-cat.is-on .cl-ico{color:var(--cl-blue)}
.cl-cat.is-on::after{content:"";width:22px;height:3px;border-radius:3px;background:var(--cl-blue)}

/* ============================ GAME SECTIONS ======================== */
.cl-sec{display:flex;flex-direction:column;gap:12px}
.cl-sec__head{display:flex;align-items:center;gap:10px}
.cl-sec__ico{width:22px;height:22px;color:var(--cl-blue)}
.cl-sec__t{font-size:19px;font-weight:800;color:var(--cl-text)}
.cl-sec__tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.cl-all{display:inline-flex;align-items:center;gap:4px;color:var(--cl-blue-d);font-weight:700;font-size:13px}
.cl-all .cl-ico{width:13px;height:13px}
.cl-arw{width:34px;height:34px;border-radius:9px;background:var(--cl-card);border:1px solid var(--cl-line);color:var(--cl-muted);display:flex;align-items:center;justify-content:center;box-shadow:var(--cl-shadow-sm)}
.cl-arw:hover{color:var(--cl-blue);border-color:var(--cl-blue)}
.cl-rail-g{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-behavior:smooth;scroll-snap-type:x proximity}
.cl-rail-g>*{scroll-snap-align:start}
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

/* tile */
.cl-tile{position:relative;flex:0 0 auto;width:158px;border-radius:14px;overflow:hidden;background:#112047;box-shadow:var(--cl-shadow-sm);transition:.18s transform,.18s box-shadow}
.cl-grid .cl-tile,.cl-slipcas__grid .cl-tile{width:auto}
.cl-tile:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(8,16,38,.3)}
.cl-tile__img{aspect-ratio:158/196;width:100%;object-fit:cover}
.cl-tile__ribbon{position:absolute;top:0;left:0;background:linear-gradient(135deg,#ff7a5e,var(--cl-blue-d));color:#fff;font-size:8px;font-weight:900;letter-spacing:.4px;padding:3px 8px;border-bottom-right-radius:8px;z-index:2}
.cl-tile__badges{position:absolute;top:6px;right:6px;display:flex;gap:5px;z-index:2}
.cl-badge{display:inline-flex;align-items:center;gap:3px;background:rgba(8,14,34,.82);color:#e4e9f0;font-size:10px;font-weight:800;padding:3px 6px;border-radius:7px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cl-badge .cl-ico{width:11px;height:11px}
.cl-tile__foot{position:absolute;left:6px;bottom:6px;z-index:2}
.cl-tile__name,.cl-tile__prov{display:none}
.cl-tile__rtp{display:inline-block;background:rgba(8,14,34,.85);color:var(--cl-gold);font-size:10px;font-weight:800;letter-spacing:.3px;padding:3px 7px;border-radius:7px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cl-tile__play{position:absolute;inset:0;background:rgba(9,16,40,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:.18s;z-index:3}
.cl-tile:hover .cl-tile__play{opacity:1}
.cl-tile__play span{background:var(--cl-blue);color:#fff;font-weight:800;padding:9px 18px;border-radius:10px;font-size:13px}

.cl-cas-foot{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.cl-cas-count{color:var(--cl-muted);font-size:13px}
.cl-cas-count b{color:var(--cl-text)}

/* hot combos */
.cl-combos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.cl-combo{background:linear-gradient(180deg,#1e3568,#112047);border:1px solid var(--cl-line-d);border-radius:14px;padding:12px;color:var(--cl-on-dark)}
.cl-combo__top{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.4px;color:#9aa4b2;margin-bottom:10px}
.cl-combo__hot{background:var(--cl-blue);color:#fff;padding:2px 7px;border-radius:6px;text-transform:uppercase}
.cl-combo__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.cl-combo__k{color:#8b94a2;font-size:10px;display:block}
.cl-combo__v{color:#fff;font-weight:800;font-size:15px}
.cl-combo__v--g{color:var(--cl-gold)}

/* ============================ PROMO ================================ */
.cl-akt-hero{position:relative;border-radius:18px;overflow:hidden;text-align:center;padding:46px 20px;color:#fff;
  background:radial-gradient(120% 140% at 50% 0%,#c8261a,#0d1a3c 70%);box-shadow:var(--cl-shadow)}
.cl-akt-hero__t{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:2px;margin:0}
.cl-akt-hero__s{color:var(--cl-gold);font-weight:800;letter-spacing:4px;text-transform:uppercase;margin:6px 0 0}
.cl-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.cl-chip{height:38px;padding:0 22px;border-radius:20px;border:1px solid rgba(255,255,255,.28);color:#dbe1ea;font-weight:700;font-size:13px;display:inline-flex;align-items:center}
.cl-chip.is-on{background:var(--cl-blue);border-color:var(--cl-blue);color:#fff}
.cl-promos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.cl-promo{position:relative;background:var(--cl-card);border-radius:16px;box-shadow:var(--cl-shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:.18s transform,.18s box-shadow}
.cl-promo:hover{transform:translateY(-4px);box-shadow:var(--cl-shadow)}
.cl-promo__pic{position:relative;height:190px;background:radial-gradient(120% 120% at 50% 20%,#1c3566,#112047);overflow:hidden}
.cl-promo__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.cl-promo__tag{position:absolute;top:16px;right:-38px;z-index:3;width:142px;text-align:center;transform:rotate(45deg);background:var(--cl-blue);color:#fff;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;padding:6px 0;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.cl-promo__tag--sport{background:var(--cl-gold-d)}
.cl-promo__ic{position:absolute;left:50%;top:190px;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:var(--cl-shadow-sm);display:flex;align-items:center;justify-content:center;z-index:4}
.cl-promo__ic .cl-ico{width:30px;height:30px;color:var(--cl-blue)}
.cl-promo__body{padding:38px 18px 18px;text-align:center;display:flex;flex-direction:column;gap:8px;flex:1}
.cl-promo__t{font-size:14px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--cl-text);margin:0}
.cl-promo__sep{width:30px;height:2px;background:var(--cl-line);margin:2px auto}
.cl-promo__d{font-size:13px;color:var(--cl-muted);margin:0;flex:1}
.cl-promo__d b{color:var(--cl-text)}
.cl-promo__d .g{color:var(--cl-blue-d);font-weight:700}
.cl-promo__btns{display:flex;gap:8px;margin-top:8px}
.cl-promo__btns .cl-btn{flex:1;height:40px;font-size:12.5px;padding:0 8px}

/* ============================ ARTICLE ============================== */
.cl-art{background:var(--cl-card);border-radius:18px;box-shadow:var(--cl-shadow-sm);padding:clamp(20px,3.4vw,44px);margin-top:16px}
.cl-art h1{font-size:clamp(26px,3.6vw,40px);line-height:1.14;font-weight:900;color:var(--cl-text);margin:0 0 14px}
.cl-art .cl-lead{font-size:clamp(16px,1.9vw,19px);color:#455160;font-weight:600;margin:0 0 8px}
.cl-art h2{font-size:clamp(21px,2.6vw,28px);font-weight:800;color:var(--cl-text);margin:34px 0 12px;padding-left:15px;position:relative}
.cl-art h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:5px;border-radius:3px;background:var(--cl-blue)}
.cl-art h3{font-size:clamp(17px,2vw,20px);font-weight:800;color:var(--cl-text);margin:24px 0 8px}
.cl-art p{margin:0 0 14px;color:#2e3b4c}
.cl-art strong,.cl-art b{color:var(--cl-text)}
.cl-art a{color:var(--cl-blue-d);font-weight:700}
.cl-art a:hover{text-decoration:underline}

.cl-bullets{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px}
.cl-bullets li{position:relative;padding-left:30px;color:#2e3b4c}
.cl-bullets li::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:6px;background:rgba(240,74,55,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6fe0' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px}
.cl-art ol{margin:0 0 16px;padding-left:0;list-style:none;counter-reset:it}
.cl-art ol li{position:relative;padding-left:38px;margin-bottom:10px;color:#2e3b4c;counter-increment:it}
.cl-art ol li::before{content:counter(it);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:8px;background:var(--cl-blue);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}

.cl-quote{margin:22px 0;padding:18px 22px;border-left:4px solid var(--cl-blue);background:var(--cl-line-2);border-radius:0 12px 12px 0;font-style:italic;color:#455160}
.cl-quote cite{display:block;margin-top:8px;font-style:normal;font-weight:700;color:var(--cl-muted);font-size:13px}

.cl-byline{display:flex;align-items:center;gap:12px;margin:24px 0;padding:14px 18px;border-radius:12px;background:linear-gradient(90deg,rgba(240,74,55,.1),transparent);border:1px solid rgba(240,74,55,.25)}
.cl-byline__av{width:44px;height:44px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--cl-blue),#ff8168);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px}
.cl-byline__n{font-weight:800;color:var(--cl-text)}
.cl-byline__r{font-size:13px;color:var(--cl-blue-d);font-weight:700}

.cl-tw{overflow-x:auto;margin:0 0 18px;border-radius:12px;border:1px solid var(--cl-line)}
.cl-tw table{width:100%;border-collapse:collapse;min-width:520px}
.cl-tw th,.cl-tw td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--cl-line);font-size:14px;vertical-align:top}
.cl-tw thead th{background:var(--cl-navy);color:#e4e9f0;font-weight:700;position:sticky;top:0}
.cl-tw tbody tr:nth-child(even){background:var(--cl-line-2)}
.cl-tw tbody tr:last-child td{border-bottom:0}
.cl-tw td:first-child,.cl-tw th:first-child{font-weight:700;color:var(--cl-text)}

.cl-facts{overflow-x:auto;margin:0 0 18px;border-radius:12px;border:1px solid var(--cl-line)}
.cl-facts table{width:100%;border-collapse:collapse;min-width:420px}
.cl-facts td{padding:12px 16px;border-bottom:1px solid var(--cl-line);font-size:14px}
.cl-facts tr:last-child td{border-bottom:0}
.cl-facts td:first-child{width:38%;font-weight:700;color:var(--cl-text);background:var(--cl-line-2)}

.cl-rating{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:20px 0;padding:20px;border-radius:14px;background:linear-gradient(135deg,#14264f,#24407a);color:#fff}
.cl-rating__score{font-size:44px;font-weight:900;color:var(--cl-gold);line-height:1}
.cl-rating__score span{font-size:20px;color:#9aa4b2}
.cl-rating__label{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#9aa4b2}
.cl-rating__bars{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px}
.cl-rbar{display:grid;grid-template-columns:170px 1fr 34px;align-items:center;gap:10px;font-size:13px}
.cl-rbar__track{height:8px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden}
.cl-rbar__fill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cl-blue),#ff8168);width:0;transition:width 1.1s ease}
.cl-rbar__v{font-weight:800;color:var(--cl-gold);text-align:right}

.cl-abanner{position:relative;overflow:hidden;border-radius:18px;margin:30px 0;padding:34px 36px;min-height:150px;color:#fff;
  background:linear-gradient(120deg,#a81d10,#8f1810 52%,#112047 92%)}
.cl-abanner::after{content:"";position:absolute;right:30%;top:-50px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(218,41,28,.32),transparent 70%);z-index:0}
.cl-abanner__body{position:relative;z-index:2;max-width:64%;display:flex;flex-direction:column;align-items:flex-start}
.cl-abanner__t{font-size:clamp(23px,3vw,32px);font-weight:900;margin:0;line-height:1.1}
.cl-abanner__d{color:#dfe4ec;margin:7px 0 0;font-size:15px}
.cl-abanner__body .cl-btn{margin-top:16px}
.cl-abanner--char{min-height:215px;padding-right:clamp(150px,36%,340px)}
.cl-abanner__char{position:absolute;right:1.5%;bottom:0;height:124%;width:auto;max-width:37%;object-fit:contain;object-position:bottom center;z-index:1;pointer-events:none;filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}

.cl-faq{display:flex;flex-direction:column;gap:10px;margin:8px 0 18px}
.cl-faq__item{border:1px solid var(--cl-line);border-radius:12px;overflow:hidden;background:#fff}
.cl-faq__q{width:100%;display:flex;align-items:center;gap:12px;padding:15px 18px;font-weight:700;color:var(--cl-text);text-align:left}
.cl-faq__q .cl-ico{margin-left:auto;width:18px;height:18px;color:var(--cl-blue);transition:.2s transform}
.cl-faq__item.is-open .cl-faq__q .cl-ico{transform:rotate(180deg)}
.cl-faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 18px}
.cl-faq__item.is-open .cl-faq__a{max-height:640px}
.cl-faq__a p{padding:2px 0 16px;margin:0;color:#2e3b4c}

.cl-testi{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:8px 0 18px}
.cl-testi__c{background:var(--cl-line-2);border-radius:14px;padding:18px;border:1px solid var(--cl-line)}
.cl-testi__c p{font-style:italic;margin:0 0 10px;color:#455160}
.cl-testi__a{font-weight:700;color:var(--cl-blue-d);font-size:13px}

/* ============================ RUOTA MODAL ========================== */
.cl-wheelov{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(120% 120% at 50% 40%,rgba(10,20,48,.9),rgba(8,14,34,.95))}
.cl-wheelov.is-open{display:flex}
.cl-wheelov__box{position:relative;width:100%;max-width:520px;text-align:center;color:#fff}
.cl-wheelov__close{position:absolute;right:0;top:-4px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;z-index:5}
.cl-wheelov__title{font-size:30px;font-weight:900;letter-spacing:1px;margin:0 0 18px;text-shadow:0 3px 14px rgba(0,0,0,.4)}
.cl-wheelov__title b{color:var(--cl-gold)}
.cl-wheel-stage{position:relative;width:min(420px,86vw);aspect-ratio:1;margin:0 auto}
.cl-wheel-rim{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,transparent 68%,#8a1810 69% 72%,var(--cl-gold) 73% 80%,#8a1810 81%);
  box-shadow:0 0 40px rgba(240,74,55,.6),0 20px 50px rgba(0,0,0,.55)}
.cl-wheel-rim::before{content:"";position:absolute;inset:6.5%;border-radius:50%;
  background:repeating-conic-gradient(#ffffff 0 3deg,transparent 3deg 45deg)}
.cl-wheel{position:absolute;inset:11%;border-radius:50%;overflow:hidden;
  transition:transform 5.4s cubic-bezier(.13,.82,.2,1);will-change:transform;
  background:conic-gradient(
    var(--cl-blue) 0 45deg,#ffffff 45deg 90deg,var(--cl-blue) 90deg 135deg,#ffffff 135deg 180deg,
    var(--cl-blue) 180deg 225deg,#ffffff 225deg 270deg,var(--cl-blue) 270deg 315deg,#ffffff 315deg 360deg);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.22)}
.cl-wheel__seg{position:absolute;inset:0;pointer-events:none;transform:rotate(calc(var(--i) * 45deg + 22.5deg))}
.cl-wheel__seg span{position:absolute;top:7%;left:50%;transform:translate(-50%,0) rotate(90deg);transform-origin:center;
  font-size:13px;font-weight:800;color:#fff;white-space:nowrap;letter-spacing:.2px}
.cl-wheel__seg:nth-child(2n) span{color:#8f1810;text-shadow:0 1px 2px rgba(255,255,255,.65)}
.cl-wheel__seg--win span{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.85);font-size:14px;font-weight:900}
.cl-wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20%;height:20%;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 40% 35%,#ff7a5e,var(--cl-blue-d));border:3px solid var(--cl-gold);box-shadow:0 0 18px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cl-wheel-hub img{width:74%}
/* gold triangle pointer (distinct from CA diamond) */
.cl-wheel-ptr{position:absolute;left:50%;top:-2%;transform:translateX(-50%);z-index:5;width:0;height:0;
  border-left:16px solid transparent;border-right:16px solid transparent;border-top:32px solid var(--cl-gold);filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.cl-wheel-remaining{margin:18px 0 10px;color:#dbe1ea;font-weight:700;letter-spacing:.5px;font-size:13px;text-transform:uppercase}
.cl-wheel-spin{height:52px;padding:0 40px;border-radius:14px;font-weight:800;font-size:16px;color:#8f1810;
  background:linear-gradient(180deg,#ffffff,var(--cl-gold));box-shadow:0 8px 22px rgba(218,41,28,.55)}
.cl-wheel-spin:hover{filter:brightness(1.06)}
.cl-wheel-spin:disabled{opacity:.5;cursor:default;filter:grayscale(.3)}
.cl-wheel-details{display:block;margin-top:12px;color:#9aa4b2;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.cl-wheel-result{display:none}
.cl-wheelov.is-won .cl-wheel-stage,.cl-wheelov.is-won .cl-wheel-remaining,.cl-wheelov.is-won .cl-wheel-spin,.cl-wheelov.is-won .cl-wheel-details{display:none}
.cl-wheelov.is-won .cl-wheel-result{display:block;animation:cl-pop .4s ease}
@keyframes cl-pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.cl-wheel-result__cup{font-size:64px;line-height:1;margin-bottom:8px}
.cl-wheel-result__t{font-size:26px;font-weight:900;margin:0 0 6px;color:#fff}
.cl-wheel-result__b{font-size:22px;font-weight:900;color:var(--cl-gold);margin:0 0 4px}
.cl-wheel-result__d{color:#dbe1ea;margin:0 0 20px}

/* ============================ FOOTER =============================== */
.cl-foot{background:linear-gradient(180deg,#14264f,#081026);color:var(--cl-on-dark-mut);margin-top:24px;padding:36px 0 22px}
.cl-foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.cl-foot__logo{display:inline-block;background:#fff;padding:9px 14px;border-radius:12px;margin-bottom:14px}
.cl-foot__logo img{height:28px;display:block}
.cl-foot__about{font-size:13px;line-height:1.7;max-width:340px}
.cl-fcol h3{color:#e4e9f0;font-size:14px;font-weight:800;margin:0 0 12px}
.cl-fcol a{display:block;padding:5px 0;font-size:13.5px;color:#9aa4b2}
.cl-fcol a:hover{color:var(--cl-blue-l)}
.cl-foot__pays{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.cl-paych{height:30px;padding:0 12px;border-radius:7px;background:var(--cl-navy-2);color:#d0d7e1;font-size:12px;font-weight:700;display:inline-flex;align-items:center}
.cl-foot__bar{border-top:1px solid var(--cl-line-d);margin-top:26px;padding-top:18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px}
.cl-foot__soc{display:flex;gap:8px}
.cl-foot__soc a{width:34px;height:34px;border-radius:9px;background:var(--cl-navy-2);color:#d0d7e1;display:flex;align-items:center;justify-content:center}
.cl-foot__soc a:hover{background:var(--cl-blue);color:#fff}
.cl-foot__copy{margin-left:auto}
.cl-foot__age{width:36px;height:36px;border-radius:50%;border:2px solid var(--cl-gold);color:var(--cl-gold);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.cl-foot__rg{width:100%;font-size:12px;color:#8b94a2;line-height:1.7}

/* ============================ ANIMATIONS ========================== */
body.js [data-animate]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
body.js [data-animate].is-in{opacity:1;transform:none}
.cl-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.cl-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  body.js [data-animate]{opacity:1;transform:none;transition:none}
  .cl-reveal{opacity:1;transform:none;transition:none}
  .cl-ruota::after,.cl-ruota__disc,.cl-chero__glow,.cl-chero__lights{animation:none}
}

/* ============================ MOBILE DRAWER ======================= */
.cl-scrim{position:fixed;inset:0;background:rgba(6,11,28,.6);z-index:90;opacity:0;visibility:hidden;transition:.2s}
.cl-scrim.is-on{opacity:1;visibility:visible}
.cl-mnav{position:fixed;top:0;left:0;bottom:0;width:min(300px,84vw);z-index:100;background:var(--cl-navy);color:var(--cl-on-dark);
  transform:translateX(-100%);transition:transform .26s ease;overflow:auto;padding:16px}
.cl-mnav.is-on{transform:none}
.cl-mnav__x{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:10px;color:#d0d7e1;font-size:22px;display:flex;align-items:center;justify-content:center}
.cl-mnav__logo{display:inline-block;background:#fff;padding:8px 12px;border-radius:10px;margin:2px 0 18px}
.cl-mnav__logo img{height:24px;margin:0;display:block}
.cl-mnav a{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:11px;font-weight:700;color:#dfe4ec}
.cl-mnav a .cl-ico{color:#8b94a2;width:20px;height:20px}
.cl-mnav a:hover,.cl-mnav a.is-active{background:var(--cl-navy-2);color:var(--cl-blue-l)}
.cl-mnav a.is-active .cl-ico{color:var(--cl-blue-l)}
.cl-mnav__cta{display:flex;gap:8px;margin-top:16px}
.cl-mnav__cta .cl-btn{flex:1}
.cl-mnav__cta .cl-btn--login{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue));color:#fff;border:0}

/* ============================ LEGAL / RULES ======================= */
.cl-legal{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:start;margin:20px 0 50px}
.cl-toc{position:sticky;top:calc(var(--cl-head-h) + 16px);background:var(--cl-card);border-radius:14px;box-shadow:var(--cl-shadow-sm);padding:16px}
.cl-toc__t{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--cl-muted);font-weight:800;margin:0 0 10px}
.cl-toc a{display:block;padding:8px 10px;border-radius:9px;color:var(--cl-text);font-size:13.5px;font-weight:600}
.cl-toc a:hover{background:var(--cl-line-2);color:var(--cl-blue-d)}
.cl-legal__body{background:var(--cl-card);border-radius:16px;box-shadow:var(--cl-shadow-sm);padding:clamp(20px,3vw,40px)}
.cl-legal__body h1{font-size:clamp(26px,3.4vw,36px);font-weight:900;margin:0 0 6px;color:var(--cl-text)}
.cl-legal__upd{color:var(--cl-muted);font-size:13px;margin:0 0 22px}
.cl-legal__sec{scroll-margin-top:calc(var(--cl-head-h) + 16px);border-top:1px solid var(--cl-line);padding-top:22px;margin-top:22px}
.cl-legal__sec:first-of-type{border-top:0;padding-top:0;margin-top:0}
.cl-legal__sec h2{font-size:22px;font-weight:800;color:var(--cl-text);margin:0 0 12px;padding-left:15px;position:relative}
.cl-legal__sec h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:5px;border-radius:3px;background:var(--cl-blue)}
.cl-legal__sec h3{font-size:17px;font-weight:800;margin:18px 0 6px;color:var(--cl-text)}
.cl-legal__sec p{margin:0 0 12px;color:#2e3b4c}
.cl-legal__sec a{color:var(--cl-blue-d);font-weight:700}
.cl-legal__list{list-style:none;margin:2px 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.cl-legal__list li{position:relative;padding-left:24px;color:#2e3b4c}
.cl-legal__list li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--cl-blue);transform:rotate(45deg)}
.cl-legal__list strong{color:var(--cl-text)}

/* inline article imagery */
.cl-fig{margin:28px 0;border-radius:16px;overflow:hidden;box-shadow:var(--cl-shadow-sm)}
.cl-fig img{width:100%;display:block}

/* ============================ RESPONSIVE ========================= */
@media (max-width:1180px){
  .cl-shell{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:1040px){
  .cl-head__nav{display:none}
  .cl-burger{display:flex}
}
@media (max-width:860px){
  .cl-shell{grid-template-columns:minmax(0,1fr)}
  .cl-rail{display:none}
  .cl-foot__grid{grid-template-columns:1fr 1fr}
  .cl-chero__char,.cl-wins{display:none}
  .cl-chero__c,.cl-hero__c{max-width:100%}
  .cl-legal{grid-template-columns:1fr}
  .cl-toc{position:static;order:-1}
}
@media (max-width:560px){
  :root{--cl-head-h:56px}
  .cl-lang{display:none}
  .cl-foot__grid{grid-template-columns:1fr}
  .cl-promos{grid-template-columns:1fr;gap:16px}
  .cl-tile{width:138px}
}
@media (max-width:400px){
  .cl-promos{grid-template-columns:1fr}
  .cl-rbar{grid-template-columns:120px 1fr 30px}
}

.cl-abanner .cl-abanner__t{color:#fff}
.cl-abanner .cl-abanner__d{color:#dfe4ec}
.cl-art .cl-btn--reg{color:#8f1810}
.cl-art .cl-btn--login{color:#fff}
.cl-art .cl-btn:hover{text-decoration:none}

@media (max-width:640px){
  .cl-head__auth{display:none}
  .cl-head__in{gap:10px}
  .cl-abanner__char{display:none}
  .cl-abanner--char{padding-right:22px;min-height:0}
  .cl-abanner{padding:24px 22px;margin:22px 0}
  .cl-abanner__body{max-width:100%}
  .cl-chero{min-height:0}
  .cl-chero__c{padding:26px 20px;max-width:100%}
  .cl-chero__amt{font-size:clamp(20px,5.4vw,27px);line-height:1.15}
  .cl-chero__pack{font-size:12px}
  .cl-chero__glow{display:none}
  .cl-hero__amt{font-size:clamp(26px,8vw,40px)}
  .cl-hero__c{max-width:100%}
}

/* =========================================================================
   VISUAL UPGRADE — BLOCK 1/4: PALETTE & DEPTH
   Static depth only (no keyframes). Keeps azzurro #da291c + gold #ffffff.
   ========================================================================= */
:root{
  --cl-navy-hi:#1e3568;                          /* panel gradient — top   */
  --cl-navy-mid:#14264f;                         /* panel gradient — mid   */
  --cl-navy-lo:#0d1a3c;                          /* panel gradient — floor */
  --cl-ink:#060b1c;                              /* deepest navy           */
  --cl-panel-brd:rgba(150,160,175,.20);          /* refined cool 1px rim   */
  --cl-hair-gold:rgba(218,41,28,.24);           /* faint gold hairline    */
  --cl-inset-hi:inset 0 1px 0 rgba(255,255,255,.06); /* top inner-highlight */
  --cl-glow-gold:0 0 24px rgba(218,41,28,.16);  /* tuned, non-neon        */
  --cl-on-dark-mut:#aab3c1;                       /* was #9aa4b2            */
  --cl-mut-2:#949eac;                             /* replaces #8b94a2 group */
}
.cl-head{
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 42%),
    linear-gradient(178deg,#ff5a48 0%,#da291c 55%,#e5382a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 20px rgba(8,16,38,.28);
}
.cl-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 14%),
    linear-gradient(180deg,var(--cl-navy-hi) 0%,var(--cl-navy-mid) 60%,var(--cl-navy-lo) 100%);
  border:1px solid var(--cl-panel-brd);
  box-shadow:var(--cl-inset-hi),0 12px 28px rgba(6,11,28,.34);
}
.cl-panel__h{
  background:linear-gradient(180deg,rgba(240,74,55,.12),rgba(240,74,55,0));
  border-bottom:1px solid var(--cl-hair-gold);
  box-shadow:0 1px 0 rgba(218,41,28,.08);
  color:#ccd4de;
}
.cl-panel__h .cl-trash{color:var(--cl-mut-2)}
.cl-slip__ticket{
  background:linear-gradient(180deg,#1e3568,#14264f);
  border:1px solid rgba(150,160,175,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 18px rgba(6,11,28,.35);
  color:#6c7480;
}
.cl-slip__hint{color:#8b94a2}
.cl-slip__tab{color:#9aa4b2}
.cl-slip__code input{
  background:linear-gradient(180deg,#14264f,#1e3568);
  border:1px solid rgba(150,160,175,.16);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}
.cl-slipcas__tab{color:var(--cl-mut-2)}
.cl-combo{
  background:linear-gradient(180deg,#1e3568,#112047 70%,#081026);
  border:1px solid rgba(150,160,175,.16);
  box-shadow:var(--cl-inset-hi);
}
.cl-combo__k{color:var(--cl-mut-2)}
.cl-hero__slide{
  background:
    radial-gradient(60% 90% at 84% 16%,rgba(218,41,28,.10),transparent 60%),
    radial-gradient(78% 115% at 72% 24%,#1c3566 0%,#0d1a3c 52%,var(--cl-ink) 88%);
}
.cl-rating{
  background:
    radial-gradient(90% 120% at 10% 12%,rgba(218,41,28,.12),transparent 55%),
    linear-gradient(135deg,#14264f 0%,#24407a 55%,#0d1a3c 100%);
  border:1px solid rgba(150,160,175,.16);
  box-shadow:var(--cl-inset-hi),0 12px 30px rgba(9,16,40,.35);
}
.cl-rbar__track{background:rgba(255,255,255,.10);box-shadow:inset 0 1px 1px rgba(0,0,0,.22)}
.cl-rbar__fill{background:linear-gradient(90deg,var(--cl-blue),#ff8168);box-shadow:0 0 10px rgba(240,74,55,.45)}
.cl-btn--reg{
  background:linear-gradient(180deg,#ffffff 0%,#fde6e2 50%,#f6d2ca 100%);
  color:#8f1810;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px rgba(218,41,28,.40),var(--cl-glow-gold);
}
.cl-ruota{
  background:linear-gradient(135deg,#fff4f1 0%,#fcddd5 42%,var(--cl-gold) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 20px rgba(218,41,28,.42),var(--cl-glow-gold);
}
.cl-ruota--fixed{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px rgba(218,41,28,.5),0 0 30px rgba(218,41,28,.20)}
.cl-wheel-spin{
  background:linear-gradient(180deg,#ffffff,#fde6e2 50%,#f6d2ca);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px rgba(218,41,28,.5),0 0 26px rgba(218,41,28,.18);
}
.cl-btn--login{
  background:linear-gradient(180deg,#ff6f52,#da291c 55%,var(--cl-blue));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(240,74,55,.34);
}
.cl-foot__rg{color:var(--cl-mut-2)}

/* =========================================================================
   VISUAL UPGRADE — BLOCK 2/4: RAIL DE-CRAMP + CONFIG PANEL
   ========================================================================= */
.cl-panel__h{padding:14px 16px}
.cl-rail{gap:18px}
.cl-rail>*{flex-shrink:0}   /* panels keep natural height; rail scrolls (overflow:auto) instead of clipping */
.cl-ruota{height:58px;padding:0 16px;font-size:15.5px;letter-spacing:.3px}
.cl-ruota__disc{width:32px;height:32px}
.cl-slip__tabs{padding:10px 10px 0}
.cl-slip__tab{height:44px}
.cl-slip__body{padding:28px 20px 20px}
.cl-slip__ticket{margin:0 auto 14px}
.cl-slip__code{padding:0 20px 18px}
.cl-slip__foot{padding:0 20px 20px}
.cl-side__h{margin:4px 6px 10px}
.cl-qlist{gap:3px}
.cl-qrow{height:46px;padding:0 12px;gap:12px}
.cl-slipcas__tabs{padding:14px 16px 0}
.cl-slipcas__grid{padding:14px 16px 16px;gap:10px}
/* CONFIG panel body (replaces the broken empty stub) */
.cl-cfg .cl-panel__h .cl-ico{color:var(--cl-gold)}
.cl-cfg__body{display:flex;flex-direction:column;gap:16px;padding:14px}
.cl-cfg__row{display:flex;flex-direction:column;gap:9px}
.cl-cfg__lbl{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#98a2b0}
.cl-seg{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  padding:4px;border-radius:12px;
  background:var(--cl-navy-2);border:1px solid var(--cl-line-d);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.32);
}
.cl-seg::before{
  content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:4px;
  width:calc((100% - 8px) / 3);border-radius:9px;
  background:linear-gradient(180deg,#ffffff,var(--cl-gold));
  box-shadow:0 3px 10px rgba(218,41,28,.45),inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateX(calc(var(--seg,0) * 100%));
  transition:transform .3s cubic-bezier(.34,1.4,.5,1);
}
.cl-seg__opt{
  position:relative;z-index:1;height:34px;border-radius:9px;background:transparent;
  font-size:11px;font-weight:700;letter-spacing:0;white-space:nowrap;padding:0 2px;
  color:#98a2b0;transition:color .2s ease;
}
.cl-seg__opt.is-on{color:#8f1810}
.cl-seg__opt:not(.is-on):hover{color:#e4e9f0}
.cl-seg__opt:focus-visible{outline:2px solid var(--cl-blue-l);outline-offset:2px}
.cl-switch{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.cl-switch__cb{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cl-switch__track{
  position:relative;flex:none;width:44px;height:26px;border-radius:26px;
  background:var(--cl-navy-2);border:1px solid var(--cl-line-d);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
  transition:background .22s ease,border-color .22s ease;
}
.cl-switch__thumb{
  position:absolute;top:50%;left:3px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#f7ded6);box-shadow:0 2px 5px rgba(0,0,0,.4);
  transform:translateY(-50%);transition:transform .24s cubic-bezier(.34,1.56,.64,1);
}
.cl-switch__cb:checked + .cl-switch__track{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue));border-color:var(--cl-blue)}
.cl-switch__cb:checked + .cl-switch__track .cl-switch__thumb{transform:translate(16px,-50%)}
.cl-switch__cb:focus-visible + .cl-switch__track{outline:2px solid var(--cl-blue-l);outline-offset:2px}
.cl-switch__txt{font-size:13.5px;font-weight:600;color:#d0d7e1}

/* =========================================================================
   VISUAL UPGRADE — BLOCK 3/4: MOTION SYSTEM
   Rides the existing body.js / [data-animate] / .is-in / .cl-reveal system.
   New @keyframes: cl-riseIn, cl-kenburns, cl-bob. transform/opacity/filter only.
   ========================================================================= */
@keyframes cl-riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cl-kenburns{0%{transform:scale(1.06) translate3d(0,0,0)}50%{transform:scale(1.12) translate3d(-1.5%,-1%,0)}100%{transform:scale(1.06) translate3d(0,0,0)}}
@keyframes cl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
body.js [data-animate].cl-stagger{opacity:1;transform:none;transition:none}
body.js [data-animate].cl-stagger > *{opacity:0}
body.js [data-animate].cl-stagger.is-in > *{opacity:1;animation:cl-riseIn .5s cubic-bezier(.22,.61,.36,1) backwards}
body.js [data-animate].cl-stagger.is-in > *:nth-child(1){animation-delay:.05s}
body.js [data-animate].cl-stagger.is-in > *:nth-child(2){animation-delay:.12s}
body.js [data-animate].cl-stagger.is-in > *:nth-child(3){animation-delay:.19s}
body.js [data-animate].cl-stagger.is-in > *:nth-child(4){animation-delay:.26s}
body.js [data-animate].cl-stagger.is-in > *:nth-child(5){animation-delay:.33s}
body.js [data-animate].cl-stagger.is-in > *:nth-child(6){animation-delay:.40s}
body.js [data-animate].cl-stagger.is-in > *:nth-child(7){animation-delay:.47s}
body.js [data-animate].cl-stagger.is-in > *:nth-child(8){animation-delay:.54s}
.cl-btn{position:relative;overflow:hidden;isolation:isolate}
.cl-btn > svg,.cl-btn > span{position:relative;z-index:1}
.cl-btn:hover{transform:translateY(-2px)}
.cl-btn:active{transform:translateY(0) scale(.985);transition-duration:.06s}
.cl-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 6px var(--cl-gold)}
.cl-btn--reg::before{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:42%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:translateX(-160%) skewX(-20deg)}
.cl-btn--reg:hover::before{transform:translateX(340%) skewX(-20deg);transition:transform .75s ease}
.cl-btn--reg:hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 26px rgba(218,41,28,.55),0 0 28px rgba(218,41,28,.22)}
.cl-btn--login:hover{box-shadow:0 12px 26px rgba(240,74,55,.55)}
.cl-qrow{position:relative;transition:background .16s ease,color .16s ease,transform .16s ease}
.cl-qrow::before{content:"";position:absolute;left:2px;top:50%;width:3px;height:20px;border-radius:3px;
  background:var(--cl-gold);transform:translateY(-50%) scaleY(0);transform-origin:center;transition:transform .18s ease}
.cl-qrow:hover{transform:translateX(3px)}
.cl-qrow:hover::before,.cl-qrow.is-active::before{transform:translateY(-50%) scaleY(1)}
.cl-qrow .cl-ico{transition:transform .16s ease,color .16s ease}
.cl-qrow:hover .cl-ico{transform:translateX(2px)}
.cl-qrow:focus-visible{outline:2px solid var(--cl-gold);outline-offset:-2px;color:#fff}
.cl-panel{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cl-panel:hover{transform:translateY(-2px);box-shadow:var(--cl-inset-hi),0 18px 38px rgba(8,14,34,.5);border-color:#37568f}
.cl-tile__img{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.cl-tile:hover .cl-tile__img{transform:scale(1.06)}
.cl-tile__play span{transform:translateY(6px);transition:transform .2s ease}
.cl-tile:hover .cl-tile__play span{transform:none}
.cl-tile:focus-visible{outline:2px solid var(--cl-gold);outline-offset:2px}
.cl-navlink::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;
  background:var(--cl-gold);transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.cl-navlink:hover::after{transform:scaleX(1)}
.cl-navlink.is-active::after{display:none}
.cl-navlink:hover .cl-ico{transform:translateY(-1px)}
.cl-navlink:focus-visible{outline:2px solid var(--cl-gold);outline-offset:2px}
.cl-hero__bg{transform-origin:50% 45%;animation:cl-kenburns 18s ease-in-out infinite;will-change:transform}
.cl-ruota{transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.cl-ruota:hover{filter:brightness(1.05);box-shadow:0 12px 28px rgba(218,41,28,.55)}
.cl-ruota:active{transform:translateY(1px)}
.cl-ruota--fixed{animation:cl-bob 3.2s ease-in-out infinite}
.cl-ruota--fixed:hover{animation-play-state:paused;box-shadow:0 14px 32px rgba(218,41,28,.62)}
.cl-hero__arw{transition:background .16s ease,transform .16s ease}
.cl-hero__arw:hover{transform:translateY(-50%) scale(1.08)}
.cl-arw{transition:color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.cl-arw:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(8,16,38,.18)}
.cl-cat .cl-ico{transition:transform .16s ease}
.cl-cat:hover .cl-ico{transform:translateY(-2px)}
.cl-foot__soc a{transition:background .16s ease,color .16s ease,transform .16s ease}
.cl-foot__soc a:hover{transform:translateY(-2px)}

/* =========================================================================
   VISUAL UPGRADE — BLOCK 4/4: REDUCED-MOTION GUARD (second reduce block)
   Toggle thumb + odds-format pill get transition:none only (NOT transform:none)
   so their STATE still updates instantly.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  body.js [data-animate].cl-stagger > *{opacity:1!important;animation:none!important}
  .cl-hero__bg,.cl-ruota--fixed{animation:none!important}
  .cl-btn--reg::before{display:none}
  .cl-btn:hover,.cl-btn:active,.cl-panel:hover,.cl-qrow:hover,.cl-arw:hover,
  .cl-foot__soc a:hover,.cl-qrow:hover .cl-ico,.cl-cat:hover .cl-ico,
  .cl-navlink:hover .cl-ico,.cl-ruota:active,
  .cl-tile:hover .cl-tile__img,.cl-tile__play span{transform:none!important}
  .cl-hero__arw:hover{transform:translateY(-50%)!important}
  .cl-seg::before,.cl-seg__opt,.cl-switch__track,.cl-switch__thumb,
  .cl-qrow,.cl-qrow::before,.cl-ruota,.cl-navlink::after,
  .cl-tile__img,.cl-tile__play span{transition:none!important}
}

/* =========================================================================
   IVIBET NEW ZEALAND — SWISS IDENTITY OVERRIDE (block 5/5)
   Light "New Zealand flag navy+red+white" header, white-cross motif, 3-col cockpit,
   Wetten-Kopieren live feed, live odds converter. Scarlet + graphite + white.
   ========================================================================= */
:root{--cl-cockpit-l:248px;--cl-cockpit-r:330px}

/* ---- LIGHT HEADER (inverts the solid-red header) ---- */
.cl-head{
  background:linear-gradient(180deg,#ffffff,#e9eefb);
  border-bottom:3px solid var(--cl-blue);
  color:var(--cl-text);
  box-shadow:0 2px 14px rgba(8,16,38,.09);
}
.cl-logo{background:var(--cl-blue);box-shadow:0 3px 10px rgba(218,41,28,.35)}
.cl-burger{color:#41474f}
.cl-burger:hover{background:#e3e9f4}
.cl-navlink{color:#41474f}
.cl-navlink .cl-ico{color:#98a0aa}
.cl-navlink:hover{color:#151a1f;background:#e3e9f4}
.cl-navlink:hover .cl-ico{color:var(--cl-blue)}
.cl-navlink.is-active{color:#fff;background:var(--cl-blue)}
.cl-navlink.is-active .cl-ico{color:#fff}
.cl-navlink::after{background:var(--cl-blue)}
.cl-lang{color:#41474f}
.cl-lang:hover{background:#e3e9f4;color:#151a1f}
.cl-head__auth .cl-btn--login{border:1px solid var(--cl-blue);color:var(--cl-blue);background:transparent;box-shadow:none}
.cl-head__auth .cl-btn--login:hover{background:rgba(218,41,28,.08);filter:none;box-shadow:none}
.cl-head__auth .cl-btn--reg{background:linear-gradient(180deg,#f04a37,var(--cl-blue));color:#fff;box-shadow:0 6px 16px rgba(218,41,28,.34)}
.cl-btn:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--cl-blue)}

/* ---- scarlet accents that must pop on graphite (were flag-white) ---- */
.cl-hero__kick,.cl-akt-hero__s{color:var(--cl-blue-l)}
.cl-hero__amt span,.cl-chero__amt b,.cl-combo__v--g,.cl-tile__rtp{color:var(--cl-blue-l)}
.cl-hero__dot.is-on{background:var(--cl-blue-l)}
.cl-slip__tab.is-on::after,.cl-slipcas__tab.is-on::after{background:var(--cl-blue-l)}
.cl-rating__score{color:var(--cl-blue-l)}
.cl-wheel-ptr{border-top-color:var(--cl-blue)}
.cl-qrow__badge{background:var(--cl-blue);color:#fff}
.cl-bullets li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da291c' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E")}

/* ---- WHITE-CROSS motif ---- */
.cl-cross{position:relative;display:inline-block}
.cl-cross::before,.cl-cross::after{content:"";position:absolute;background:#fff;border-radius:1px}
.cl-cross::before{left:39%;right:39%;top:16%;bottom:16%}
.cl-cross::after{top:39%;bottom:39%;left:16%;right:16%}
.cl-wheel-hub .cl-cross{width:64%;height:64%}
.cl-flag{position:relative;width:22px;height:22px;border-radius:5px;background:var(--cl-blue);flex:none;box-shadow:0 1px 3px rgba(218,41,28,.45)}
.cl-flag::before,.cl-flag::after{content:"";position:absolute;background:#fff;border-radius:1px}
.cl-flag::before{left:42%;right:42%;top:20%;bottom:20%}
.cl-flag::after{top:42%;bottom:42%;left:20%;right:20%}
.cl-sec__ico--cross{color:var(--cl-blue)}

/* ---- 3-COLUMN COCKPIT (index) ---- */
.cl-shell--cockpit{
  max-width:1520px;
  grid-template-columns:var(--cl-cockpit-l) minmax(0,1fr) var(--cl-cockpit-r);
  grid-template-areas:"lrail main rail";
}
.cl-shell--cockpit .cl-shell__main{grid-area:main}
.cl-shell--cockpit .cl-rail{grid-area:rail}
.cl-lrail{grid-area:lrail;position:sticky;top:calc(var(--cl-head-h) + 14px);display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - var(--cl-head-h) - 28px);overflow:auto}
.cl-lrail>*{flex-shrink:0}
.cl-lrail .cl-panel{padding:12px 12px 8px}

/* ---- WETTEN KOPIEREN live feed (new mechanic) ---- */
.cl-copy{background:linear-gradient(180deg,#14264f,#0d1a3c);border:1px solid var(--cl-line-d);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(8,16,38,.30)}
.cl-copy__head{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 12px}
.cl-copy__title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px}
.cl-copy__live{margin-left:auto;font-size:12px;color:#aab3c1;text-align:right;line-height:1.55}
.cl-copy__live b{color:#ff7a5e;font-weight:800;font-variant-numeric:tabular-nums}
.cl-copy__filters{display:flex;gap:7px;flex-wrap:wrap;padding:0 18px 14px}
.cl-copyf{height:30px;padding:0 13px;border-radius:16px;font-size:12px;font-weight:700;color:#c9d1db;background:#1e3568;border:1px solid #2c4a86;transition:.15s}
.cl-copyf:hover{color:#fff;border-color:var(--cl-blue-l)}
.cl-copyf.is-on{background:var(--cl-blue);border-color:var(--cl-blue);color:#fff}
.cl-copy__feed{display:flex;flex-direction:column;max-height:560px;overflow:auto;padding:0 10px 10px}
.cl-copycard{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"av head odds" "av sel odds" "prob prob prob" "foot foot foot";gap:3px 12px;padding:14px 10px;border-radius:12px;transition:background .15s}
.cl-copycard:hover{background:rgba(255,255,255,.03)}
.cl-copycard + .cl-copycard{border-top:1px solid rgba(255,255,255,.06)}
.cl-copycard__av{grid-area:av;width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#23457e,#2c4a86);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;align-self:start;font-size:15px}
.cl-copycard__head{grid-area:head;display:flex;align-items:center;gap:8px;font-size:12px;color:#8b94a2}
.cl-copycard__user{color:#e4e9f0;font-weight:700;font-size:13px}
.cl-copycard__live{display:inline-flex;align-items:center;gap:4px;color:#ff7a5e;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.cl-copycard__live::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5a48;animation:cl-livedot 1.6s ease-out infinite}
@keyframes cl-livedot{0%{box-shadow:0 0 0 0 rgba(240,74,55,.6)}100%{box-shadow:0 0 0 7px rgba(240,74,55,0)}}
.cl-copycard__tag{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#9aa4b2;background:#0f2148;padding:3px 8px;border-radius:6px}
.cl-copycard__sel{grid-area:sel;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cl-copycard__pick{color:#fff;font-weight:700;font-size:14px}
.cl-copycard__mkt{color:#8b94a2;font-size:12px}
.cl-copycard__odds{grid-area:odds;align-self:center;min-width:66px;height:46px;border-radius:11px;background:linear-gradient(180deg,#f04a37,#da291c);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(218,41,28,.4);font-variant-numeric:tabular-nums}
.cl-copycard__prob{grid-area:prob;display:flex;align-items:center;gap:10px;margin-top:8px}
.cl-copycard__probtrack{flex:1;height:6px;border-radius:5px;background:rgba(255,255,255,.10);overflow:hidden}
.cl-copycard__probfill{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--cl-blue),#ff7a5e)}
.cl-copycard__probv{font-size:11px;color:#9aa4b2;font-weight:700;white-space:nowrap}
.cl-copycard__foot{grid-area:foot;display:flex;align-items:center;gap:12px;margin-top:11px}
.cl-copycard__pay{font-size:12px;color:#aab3c1}
.cl-copycard__pay b{color:#e4e9f0}
.cl-copycard__cnt{font-size:12px;color:#8b94a2;display:inline-flex;align-items:center;gap:5px}
.cl-copybtn{margin-left:auto;height:36px;padding:0 18px;border-radius:10px;background:var(--cl-blue);color:#fff;font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:7px;transition:background .15s,transform .15s}
.cl-copybtn:hover{background:var(--cl-blue-l);transform:translateY(-1px)}
.cl-copybtn.is-copied{background:#1f6b4c;cursor:default;pointer-events:none}
.cl-copycard.is-hidden{display:none}

/* ---- live odds converter (config panel) ---- */
.cl-odds{display:flex;align-items:center;justify-content:space-between;margin-top:2px;padding:10px 12px;border-radius:11px;background:#1e3568;border:1px solid #2c4a86}
.cl-odds__k{font-size:12px;color:#9aa4b2;font-weight:600}
.cl-odds__v{font-size:20px;font-weight:900;color:#ff7a5e;font-variant-numeric:tabular-nums;letter-spacing:.3px}

/* ---- responsive cockpit ---- */
@media (max-width:1240px){
  .cl-shell--cockpit{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"main rail"}
  .cl-lrail{display:none}
}
@media (max-width:860px){
  .cl-shell--cockpit{grid-template-columns:minmax(0,1fr);grid-template-areas:"main"}
  .cl-shell--cockpit .cl-rail{display:none}
  .cl-copy__live{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.cl-copycard__live::before{animation:none}}

/* Mobile CTA resilience: preserve button contrast and allow long labels to wrap. */
.cl-mnav__cta{flex-wrap:wrap}
.cl-mnav__cta .cl-btn{
  flex:1 1 110px;
  max-width:100%;
  min-width:0;
  height:auto;
  min-height:44px;
  padding:10px 12px;
  white-space:normal;
  line-height:1.2;
  text-align:center;
  overflow-wrap:anywhere;
}
.cl-mnav__cta .cl-btn--login,
.cl-mnav__cta .cl-btn--login:hover,
.cl-mnav__cta .cl-btn--login:focus,
.cl-mnav__cta .cl-btn--login:focus-visible{
  background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue));
  color:#fff;
}
.cl-mnav__cta .cl-btn--reg,
.cl-mnav__cta .cl-btn--reg:hover,
.cl-mnav__cta .cl-btn--reg:focus,
.cl-mnav__cta .cl-btn--reg:focus-visible{
  background:linear-gradient(180deg,#ffffff 0%,#fde6e2 50%,#f6d2ca 100%);
  color:#8f1810;
}

@media (max-width:640px){
  .cl-chero__c > div .cl-btn{
    flex:1 1 100%;
    width:100%;
  }
  .cl-chero__c .cl-btn,
  .cl-hero__c .cl-btn,
  .cl-abanner__body .cl-btn,
  .cl-wheel-result .cl-btn{
    max-width:100%;
    min-width:0;
    height:auto;
    min-height:52px;
    padding:10px 18px;
    white-space:normal;
    line-height:1.25;
    text-align:center;
    overflow-wrap:anywhere;
  }
  .cl-promo__btns{flex-wrap:wrap}
  .cl-promo__btns .cl-btn{
    flex:1 1 110px;
    max-width:100%;
    min-width:0;
    height:auto;
    min-height:40px;
    padding:8px;
    white-space:normal;
    line-height:1.2;
    text-align:center;
    overflow-wrap:anywhere;
  }
  .cl-chero__c .cl-btn .cl-ico,
  .cl-hero__c .cl-btn .cl-ico,
  .cl-abanner__body .cl-btn .cl-ico,
  .cl-promo__btns .cl-btn .cl-ico,
  .cl-wheel-result .cl-btn .cl-ico{flex:0 0 auto}
}

/* =========================================================================
   IVIBET NEW ZEALAND — NZ IDENTITY OVERRIDE (block 6/6)
   Navy-blue header (re-inverts the light header), Southern-Cross motif,
   live match-odds ticker, Boost Your Odds builder, live Cash Out. Navy+red+white.
   ========================================================================= */
.cl-head{
  background:linear-gradient(180deg,#1b3a8f,#12224e);
  border-bottom:3px solid var(--cl-blue);
  color:#fff;
  box-shadow:0 4px 18px rgba(8,16,38,.30);
}
.cl-logo{background:#fff;box-shadow:0 3px 10px rgba(8,16,38,.35)}
.cl-burger{color:#dbe4f5}
.cl-burger:hover{background:rgba(255,255,255,.12)}
.cl-navlink{color:#c6d3ee}
.cl-navlink .cl-ico{color:#8ea3ce}
.cl-navlink:hover{color:#fff;background:rgba(255,255,255,.12)}
.cl-navlink:hover .cl-ico{color:#fff}
.cl-navlink.is-active{color:#fff;background:var(--cl-blue)}
.cl-navlink.is-active .cl-ico{color:#fff}
.cl-navlink::after{background:var(--cl-blue)}
.cl-lang{color:#c6d3ee}
.cl-lang:hover{background:rgba(255,255,255,.12);color:#fff}
.cl-head__auth .cl-btn--login{border:1px solid rgba(255,255,255,.7);color:#fff;background:transparent;box-shadow:none}
.cl-head__auth .cl-btn--login:hover{background:rgba(255,255,255,.14);filter:none;box-shadow:none}
.cl-head__auth .cl-btn--reg{background:linear-gradient(180deg,#f04a37,var(--cl-blue));color:#fff;box-shadow:0 6px 16px rgba(218,41,28,.34)}
.cl-btn:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--cl-blue)}

/* ---- SOUTHERN CROSS motif ---- */
.cl-flag{display:none;position:relative;width:26px;height:22px;border-radius:5px;flex:none;
  background:#12224e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cg fill='%23ffffff'%3E%3Cpolygon points='40,4 41.6,8.6 46.5,8.7 42.6,11.7 44,16.4 40,13.6 36,16.4 37.4,11.7 33.5,8.7 38.4,8.6'/%3E%3Cpolygon points='30,20 31.3,23.7 35.2,23.8 32.1,26.2 33.2,30 30,27.7 26.8,30 27.9,26.2 24.8,23.8 28.7,23.7'/%3E%3Cpolygon points='48,24 49,26.8 51.9,26.9 49.6,28.6 50.4,31.4 48,29.7 45.6,31.4 46.4,28.6 44.1,26.9 47,26.8'/%3E%3Cpolygon points='36,38 37.3,41.7 41.2,41.8 38.1,44.2 39.2,48 36,45.7 32.8,48 33.9,44.2 30.8,41.8 34.7,41.7'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:0 1px 3px rgba(8,16,38,.5);border:1px solid rgba(255,255,255,.15)}
.cl-flag::before,.cl-flag::after{content:none}
.cl-cross::before,.cl-cross::after{content:none}
.cl-cross{background:#fff;clip-path:polygon(50% 2%,61% 35%,96% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,4% 35%,39% 35%)}
.cl-wheel-hub .cl-cross{width:70%;height:70%}

/* ---- LIVE MATCH-ODDS TICKER ---- */
.cl-ticker{background:linear-gradient(180deg,#12224e,#0d1a3c);border-bottom:1px solid var(--cl-line-d);overflow:hidden}
.cl-ticker__in{display:flex;align-items:center;height:44px;white-space:nowrap;width:max-content;animation:cl-marquee 40s linear infinite}
.cl-ticker:hover .cl-ticker__in{animation-play-state:paused}
@keyframes cl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cl-tk{display:inline-flex;align-items:center;gap:9px;padding:0 18px;border-right:1px solid rgba(255,255,255,.07);font-size:13px;color:#c6d3ee}
.cl-tk__live{width:7px;height:7px;border-radius:50%;flex:none;background:#ff5a48;animation:cl-livedot 1.6s ease-out infinite}
@keyframes cl-livedot{0%{box-shadow:0 0 0 0 rgba(240,74,55,.6)}100%{box-shadow:0 0 0 7px rgba(240,74,55,0)}}
.cl-tk__lg{color:#8ea3ce;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.cl-tk__m{color:#e9edf3;font-weight:600}
.cl-tk__o{color:#fff;font-weight:800;background:rgba(255,255,255,.08);border-radius:7px;padding:3px 9px;font-variant-numeric:tabular-nums}

/* ---- BOOST YOUR ODDS builder ---- */
.cl-boost{background:linear-gradient(180deg,#14264f,#0d1a3c);border:1px solid var(--cl-line-d);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(8,16,38,.30)}
.cl-boost__head{display:flex;align-items:center;gap:10px;padding:16px 18px 4px}
.cl-boost__title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px}
.cl-boost__pct{margin-left:auto;font-size:12px;font-weight:800;color:#ff8168;background:rgba(240,74,55,.14);border:1px solid rgba(240,74,55,.3);padding:4px 10px;border-radius:20px}
.cl-boost__sub{padding:2px 18px 12px;color:#9aa4b2;font-size:12.5px}
.cl-boost__legs{display:flex;flex-direction:column;padding:0 10px}
.cl-leg{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;cursor:pointer;transition:background .15s}
.cl-leg:hover{background:rgba(255,255,255,.03)}
.cl-leg + .cl-leg{border-top:1px solid rgba(255,255,255,.06)}
.cl-leg__chk{width:24px;height:24px;border-radius:7px;border:2px solid #3a5285;background:transparent;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;transition:.15s}
.cl-leg.is-on .cl-leg__chk{background:var(--cl-blue);border-color:var(--cl-blue)}
.cl-leg__chk .cl-ico{width:15px;height:15px;opacity:0;transition:.15s}
.cl-leg.is-on .cl-leg__chk .cl-ico{opacity:1}
.cl-leg__body{min-width:0}
.cl-leg__pick{display:block;color:#fff;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-leg__m{display:block;margin-top:1px;color:#8b94a2;font-size:12px}
.cl-leg__lg{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#9aa4b2;background:#0f2148;padding:3px 8px;border-radius:6px;white-space:nowrap}
.cl-leg__o{min-width:52px;text-align:center;color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.cl-boost__foot{margin:8px 12px 14px;padding:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.cl-boost__meter{height:9px;border-radius:6px;background:rgba(255,255,255,.10);overflow:hidden;margin-bottom:12px}
.cl-boost__meterfill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cl-blue),#ff8168);width:0;transition:width .35s cubic-bezier(.22,.61,.36,1)}
.cl-boost__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cl-boost__stat{min-width:88px}
.cl-boost__k{font-size:11px;color:#8b94a2;text-transform:uppercase;letter-spacing:.5px}
.cl-boost__v{font-size:19px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.cl-boost__v--boost{color:#ff8168}
.cl-boost__v--pay{color:#5ce08a}
.cl-boost__cta{margin-left:auto}

/* ---- LIVE CASH OUT (rail) ---- */
.cl-cash__body{padding:14px}
.cl-cash__match{display:flex;align-items:center;gap:8px;font-size:12px;color:#9aa4b2;margin-bottom:5px}
.cl-cash__pick{color:#fff;font-weight:700;font-size:14px;margin-bottom:12px}
.cl-cash__fig{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.cl-cash__now{font-size:26px;font-weight:900;color:#5ce08a;font-variant-numeric:tabular-nums}
.cl-cash__stake{font-size:12px;color:#8b94a2}
.cl-cash__btn{width:100%;height:46px;border-radius:12px;background:linear-gradient(180deg,#f04a37,var(--cl-blue));color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.cl-cash__btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cl-cash__btn b{font-variant-numeric:tabular-nums}
.cl-cash.is-done .cl-cash__btn{background:#1f6b4c;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .cl-ticker__in{animation:none}
  .cl-tk__live{animation:none}
}
@media (max-width:560px){
  .cl-boost__legs{padding:0 4px}
  .cl-leg{gap:8px;grid-template-columns:auto 1fr auto}
  .cl-leg__lg{display:none}
}

/* =========================================================================
   IVIBET ČESKO — CZECHIA IDENTITY OVERRIDE (block 7/7)
   Bohemian-blue header (brighter than the NZ navy), Czech tricolour
   white+red+blue, the flag's hoist-TRIANGLE as the recurring motif
   (flag chip, wheel hub, wheel pointer), tricolour Kolo štěstí, and two
   NEW honest-math mechanics: "Skutečný vs. Simulovaný trh" + "Simulátor
   protočení". Blue #11457e + red #d7141a + white.
   ========================================================================= */
:root{
  --cl-blue:#d7141a;        /* accent = Czech red (links/active/CTA/markers) */
  --cl-blue-d:#a60f14;
  --cl-blue-l:#ef2b31;
  --cl-gold:#ffffff;        /* white highlight stays */
  --cl-gold-d:#ef2b31;
  --cl-czblue:#11457e;      /* bohemian flag-blue (header + triangle) */
  --cl-czblue-l:#1a5aa8;
  /* dark panels -> bohemian blue */
  --cl-navy:#103a72;
  --cl-navy-2:#164a8e;
  --cl-navy-3:#1f5aa4;
  --cl-line-d:#245aa0;
  --cl-navy-hi:#164a8e;
  --cl-navy-mid:#103a72;
  --cl-navy-lo:#0b2d58;
  --cl-ink:#08213f;
}

/* ---- BOHEMIAN-BLUE HEADER (re-inverts the NZ navy header) ---- */
.cl-head{
  background:linear-gradient(180deg,var(--cl-czblue-l) 0%,var(--cl-czblue) 55%,#0e3c6f 100%);
  border-bottom:3px solid var(--cl-blue);
  color:#fff;
  box-shadow:0 4px 18px rgba(8,16,38,.32);
}
.cl-logo{background:#fff;box-shadow:0 3px 10px rgba(8,16,38,.35)}
.cl-navlink{color:#dbe7fb}
.cl-navlink .cl-ico{color:#9ab7e2}
.cl-navlink:hover{color:#fff;background:rgba(255,255,255,.13)}
.cl-navlink:hover .cl-ico{color:#fff}
.cl-navlink.is-active{color:#fff;background:var(--cl-blue)}
.cl-navlink.is-active .cl-ico{color:#fff}
.cl-navlink::after{background:var(--cl-blue)}
.cl-lang{color:#dbe7fb}
.cl-lang:hover{background:rgba(255,255,255,.13);color:#fff}
.cl-head__auth .cl-btn--login{border:1px solid rgba(255,255,255,.72);color:#fff;background:transparent;box-shadow:none}
.cl-head__auth .cl-btn--login:hover{background:rgba(255,255,255,.16);filter:none;box-shadow:none}
.cl-head__auth .cl-btn--reg{background:linear-gradient(180deg,#ffffff,#eef2fa);color:var(--cl-czblue);box-shadow:0 6px 16px rgba(8,16,38,.28)}

/* ---- CZECH-FLAG CHIP (white/red bicolour + blue hoist triangle) ---- */
.cl-flag{display:none}
.cl-flag::before{content:"";position:absolute;left:0;top:0;width:0;height:0;
  border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent var(--cl-czblue)}
.cl-flag::after{content:none}
/* rail league mini-flags echo the tricolour */
.cl-lg__flag{background:linear-gradient(180deg,#fff 0 50%,var(--cl-blue) 50% 100%)}

/* ---- TRICOLOUR KOLO ŠTĚSTÍ (blue / white / red) + TRIANGLE hub ---- */
.cl-wheel{
  background:conic-gradient(
    var(--cl-czblue) 0 45deg,#ffffff 45deg 90deg,var(--cl-blue) 90deg 135deg,#ffffff 135deg 180deg,
    var(--cl-czblue) 180deg 225deg,#ffffff 225deg 270deg,var(--cl-blue) 270deg 315deg,#ffffff 315deg 360deg);
}
.cl-wheel__seg:nth-child(2n) span{color:var(--cl-czblue);text-shadow:0 1px 2px rgba(255,255,255,.7)}
.cl-wheel-hub{background:radial-gradient(circle at 40% 35%,#2f6ec0,var(--cl-czblue));border-color:#fff}
.cl-wheel-hub .cl-cross{width:0;height:0;background:none;clip-path:none;border-radius:0;
  border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.cl-wheel-ptr{border-top-color:var(--cl-czblue)}
.cl-ruota__disc{background:conic-gradient(from 0deg,var(--cl-czblue) 0 25%,var(--cl-blue) 0 50%,var(--cl-czblue) 0 75%,var(--cl-blue) 0)}

/* ---- section markers become the flag TRIANGLE (right-pointing), vertically centred on the heading text ---- */
.cl-art h2::before,.cl-legal__sec h2::before{
  width:0;height:0;background:none;border-radius:0;top:50%;bottom:auto;transform:translateY(-50%);
  border-style:solid;border-width:9px 0 9px 13px;border-color:transparent transparent transparent var(--cl-blue)}
/* fix inherited dark first-column colour bleeding onto the dark table HEAD (black-on-blue) */
.cl-tw thead th:first-child,.cl-tw thead th{color:#e4e9f0}

/* =========================================================================
   NEW MECHANIC 1 — "Skutečný, nebo simulovaný trh?" (index)
   Toggle between a real CS2 market and its AI-simulated look-alike, exposing
   the honest differences the Ivibet sidebar puts two rows apart.
   ========================================================================= */
.cl-real{
  background:linear-gradient(180deg,var(--cl-navy-hi),var(--cl-navy-lo));
  border:1px solid var(--cl-line-d);border-radius:18px;overflow:hidden;
  box-shadow:0 12px 30px rgba(8,16,38,.30);color:var(--cl-on-dark)}
.cl-real__head{display:flex;align-items:center;gap:10px;padding:16px 18px 4px}
.cl-real__title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px}
.cl-real__title .cl-ico{color:var(--cl-blue-l)}
.cl-real__sub{padding:2px 18px 14px;color:#a9bcda;font-size:12.5px}
.cl-real__seg{grid-template-columns:repeat(2,1fr);margin:0 14px 14px}
.cl-real__seg::before{width:calc((100% - 8px) / 2)}
.cl-real__seg .cl-seg__opt.is-on{color:var(--cl-czblue)}
.cl-real__panel{display:none}
.cl-real__panel.is-on{display:block;animation:cl-riseIn .35s ease}
.cl-real__grid{display:flex;flex-direction:column;padding:0 16px}
.cl-real__row{display:grid;grid-template-columns:172px 1fr;gap:14px;padding:11px 8px;border-top:1px solid rgba(255,255,255,.07);font-size:13.5px}
.cl-real__row:first-child{border-top:0}
.cl-real__k{color:#9ab2d6;font-weight:600}
.cl-real__v{color:#eaf1fb}
.cl-real__v b{color:#fff}
.cl-real__verdict{margin:12px 16px 16px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.55}
.cl-real__verdict--ok{background:rgba(46,160,110,.14);border:1px solid rgba(46,160,110,.34);color:#c7f0dc}
.cl-real__verdict--warn{background:rgba(215,20,26,.14);border:1px solid rgba(215,20,26,.36);color:#ffd6d6}
.cl-real__verdict b{color:#fff}
.cl-real__tag{display:inline-block;margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:4px 9px;border-radius:16px}
.cl-real__tag--real{background:rgba(46,160,110,.18);color:#7ee2ac}
.cl-real__tag--sim{background:rgba(215,20,26,.18);color:#ff9a92}

/* =========================================================================
   NEW MECHANIC 2 — "Simulátor protočení" (index)
   Bonus × wagering multiplier → total turnover, number of spins and the
   theoretical house cost at a given RTP. The arithmetic nobody shows you.
   ========================================================================= */
.cl-roll{
  background:linear-gradient(180deg,var(--cl-navy-hi),var(--cl-navy-lo));
  border:1px solid var(--cl-line-d);border-radius:18px;overflow:hidden;
  box-shadow:0 12px 30px rgba(8,16,38,.30);color:var(--cl-on-dark)}
.cl-roll__head{display:flex;align-items:center;gap:10px;padding:16px 18px 4px}
.cl-roll__title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px}
.cl-roll__title .cl-ico{color:var(--cl-blue-l)}
.cl-roll__sub{padding:2px 18px 12px;color:#a9bcda;font-size:12.5px}
.cl-roll__inputs{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px;padding:4px 18px 16px}
.cl-roll__field{display:flex;flex-direction:column;gap:8px}
.cl-roll__lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;color:#bcccea}
.cl-roll__lbl b{color:#fff;font-size:14px;font-variant-numeric:tabular-nums}
.cl-roll input[type=range]{width:100%;accent-color:var(--cl-blue);cursor:pointer}
.cl-roll__bar{height:10px;margin:2px 18px 0;border-radius:6px;background:rgba(255,255,255,.10);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.cl-roll__barfill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cl-czblue),var(--cl-blue));width:10%;transition:width .3s cubic-bezier(.22,.61,.36,1)}
.cl-roll__cap{display:flex;justify-content:space-between;padding:7px 18px 0;font-size:11px;color:#8ea5c9}
.cl-roll__out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 18px 4px}
.cl-roll__stat{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px}
.cl-roll__k{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#9ab2d6;margin-bottom:3px}
.cl-roll__v{font-size:19px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.cl-roll__v small{font-size:12px;font-weight:700;color:#bcccea}
.cl-roll__v--cost{color:#ff8168}
.cl-roll__verdict{margin:12px 18px 18px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);color:#dbe8f8;font-size:13px;line-height:1.6}
.cl-roll__verdict b{color:#fff}
.cl-roll__verdict.is-fair{background:rgba(46,160,110,.13);border-color:rgba(46,160,110,.32);color:#c7f0dc}
.cl-roll__verdict.is-steep{background:rgba(215,20,26,.13);border-color:rgba(215,20,26,.34);color:#ffd6d6}

@media (max-width:560px){
  .cl-roll__inputs{grid-template-columns:1fr}
  .cl-roll__out{grid-template-columns:1fr}
  .cl-real__row{grid-template-columns:1fr;gap:3px}
  .cl-real__k{font-size:12px}
}

/* =========================================================================
   IVIBET SWEDEN — SWEDEN IDENTITY OVERRIDE (block 8/8)
   The family's FIRST chromatic-light header: Swedish YELLOW #fecc00 carrying
   deep-blue type, over deep Swedish-blue panels. The recurring motif is
   TRE KRONOR — three crowns set in a triangle — instead of another cross or
   tricolour bar. Blue/yellow Fortune Wheel, Swedish flag chip, right rail.
   ========================================================================= */
:root{
  --cl-blue:#006aa7;         /* accent = Swedish flag blue (links / active / markers) */
  --cl-blue-d:#004f7d;
  --cl-blue-l:#1a86c9;
  --cl-gold:#fecc00;         /* Swedish flag yellow — the highlight (was white) */
  --cl-gold-d:#e0b400;
  --cl-czblue:#006aa7;       /* neutralise the inherited "czblue" -> Swedish blue */
  --cl-czblue-l:#1a86c9;
  /* dark panels -> deep Swedish blue */
  --cl-navy:#062a47;
  --cl-navy-2:#0a3a5e;
  --cl-navy-3:#10496f;
  --cl-line-d:#1a5c86;
  --cl-navy-hi:#0a3a5e;
  --cl-navy-mid:#062a47;
  --cl-navy-lo:#041d33;
  --cl-ink:#03131f;
  /* light chrome -> crisp, faintly blue-tinted */
  --cl-bg:#f2f6fa;
  --cl-card:#ffffff;
  --cl-line:#dbe6f0;
  --cl-line-2:#eef4fa;
  --cl-text:#10233a;
  --cl-muted:#64778c;
  --cl-on-dark:#e8f1f8;
  --cl-on-dark-mut:#9db4c8;
}
body{background:var(--cl-bg);color:var(--cl-text)}
/* ---- SWEDISH-YELLOW HEADER carrying deep-blue type ---- */
.cl-head{
  background:linear-gradient(180deg,#ffd831 0%,#fecc00 55%,#f2c000 100%);
  border-bottom:3px solid var(--cl-blue);
  color:var(--cl-navy-2);
  box-shadow:0 4px 18px rgba(120,92,0,.24);
}
.cl-burger{color:var(--cl-navy-2)}
.cl-burger:hover{background:rgba(6,42,71,.12)}
.cl-logo{background:#fff;box-shadow:0 3px 10px rgba(90,70,0,.28)}
.cl-navlink{color:#0b3554;font-weight:700}
.cl-navlink .cl-ico{color:#1a5c86}
.cl-navlink:hover{color:#03192b;background:rgba(6,42,71,.11)}
.cl-navlink:hover .cl-ico{color:#03192b}
.cl-navlink.is-active{color:#fff;background:var(--cl-blue);box-shadow:0 4px 12px rgba(0,79,125,.4)}
.cl-navlink.is-active .cl-ico{color:var(--cl-gold)}
.cl-navlink::after{background:var(--cl-blue)}
.cl-lang{color:#0b3554;font-weight:800}
.cl-lang:hover{background:rgba(6,42,71,.11);color:#03192b}
.cl-head__auth .cl-btn--login{border:1px solid rgba(6,42,71,.55);color:#0b3554;background:transparent;box-shadow:none}
.cl-head__auth .cl-btn--login:hover{background:rgba(6,42,71,.12);filter:none;box-shadow:none}
.cl-head__auth .cl-btn--reg{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue));color:#fff;box-shadow:0 6px 16px rgba(0,79,125,.36)}
/* ---- CTAs: gold on the light pages, blue inside the gold header ---- */
.cl-btn--reg{background:linear-gradient(180deg,#ffd831,var(--cl-gold));color:#0b3554;box-shadow:0 6px 16px rgba(224,180,0,.45)}
.cl-btn--reg:hover{filter:brightness(1.05);box-shadow:0 8px 22px rgba(224,180,0,.55)}
.cl-btn--login{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue));color:#fff;box-shadow:0 6px 16px rgba(0,106,167,.34)}
/* ---- SWEDISH FLAG CHIP: blue field, yellow off-centre cross ---- */
.cl-flag{
  display:block;position:relative;width:31px;height:21px;border-radius:4px;flex:none;overflow:hidden;
  background:
    linear-gradient(var(--cl-gold),var(--cl-gold)) 38% 0/5px 100% no-repeat,
    linear-gradient(var(--cl-gold),var(--cl-gold)) 0 50%/100% 5px no-repeat,
    var(--cl-blue);
  box-shadow:0 1px 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.3);
}
.cl-flag::before,.cl-flag::after{content:none}
.cl-lg__flag{
  background:
    linear-gradient(var(--cl-gold),var(--cl-gold)) 38% 0/4px 100% no-repeat,
    linear-gradient(var(--cl-gold),var(--cl-gold)) 0 50%/100% 4px no-repeat,
    var(--cl-blue);
}
/* ---- FORTUNE WHEEL: blue / yellow + TRE KRONOR hub ---- */
.cl-wheel{
  background:conic-gradient(
    var(--cl-blue) 0 45deg,var(--cl-gold) 45deg 90deg,var(--cl-blue) 90deg 135deg,var(--cl-gold) 135deg 180deg,
    var(--cl-blue) 180deg 225deg,var(--cl-gold) 225deg 270deg,var(--cl-blue) 270deg 315deg,var(--cl-gold) 315deg 360deg);
}
.cl-wheel__seg span{color:#fff;text-shadow:0 1px 2px rgba(0,40,64,.85)}
.cl-wheel__seg:nth-child(2n) span{color:#0b3554;text-shadow:0 1px 1px rgba(255,255,255,.85)}
.cl-wheel__seg--win span{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);font-size:14px}
.cl-wheel-hub{background:radial-gradient(circle at 42% 36%,#1a86c9,var(--cl-blue-d));border-color:var(--cl-gold)}
.cl-wheel-hub .cl-cross{
  width:60%;height:52%;border:0;border-radius:0;clip-path:none;
  background:
    linear-gradient(var(--cl-gold),var(--cl-gold)) 50% 0/32% 44% no-repeat,
    linear-gradient(var(--cl-gold),var(--cl-gold)) 0 100%/32% 44% no-repeat,
    linear-gradient(var(--cl-gold),var(--cl-gold)) 100% 100%/32% 44% no-repeat;
}
.cl-wheel-ptr{border-top-color:var(--cl-gold)}
.cl-ruota{background:linear-gradient(135deg,#ffd831,var(--cl-gold));color:#0b3554;box-shadow:0 8px 20px rgba(224,180,0,.45)}
.cl-ruota__disc{
  background:
    linear-gradient(var(--cl-gold),var(--cl-gold)) 38% 0/22% 100% no-repeat,
    linear-gradient(var(--cl-gold),var(--cl-gold)) 0 50%/100% 22% no-repeat,
    var(--cl-blue);
  border-color:#fff;
}
.cl-wheel-spin{background:linear-gradient(180deg,#ffd831,var(--cl-gold));color:#0b3554}
/* ---- TRE KRONOR section markers: three crowns set in a triangle ---- */
.cl-art h2,.cl-legal__sec h2{padding-left:28px}
.cl-art h2::before,.cl-legal__sec h2::before{
  width:19px;height:16px;left:0;top:50%;bottom:auto;transform:translateY(-50%);
  border-width:0;border-style:none;border-radius:0;
  background:
    linear-gradient(var(--cl-blue),var(--cl-blue)) 50% 0/7px 7px no-repeat,
    linear-gradient(var(--cl-blue),var(--cl-blue)) 0 100%/7px 7px no-repeat,
    linear-gradient(var(--cl-blue),var(--cl-blue)) 100% 100%/7px 7px no-repeat;
}
/* dark-first-column colour on the dark table head (inherited fix) */
.cl-tw thead th:first-child,.cl-tw thead th{color:#e8f1f8}
.cl-hero__amt span{color:var(--cl-gold)}
.cl-rbar__v{color:var(--cl-gold)}
.cl-rating__score{color:var(--cl-gold)}

/* ---- player-type selector for the bonus-value mechanic ---- */
.cl-ptype{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:2px 18px 12px}
.cl-ptype__opt{
  height:38px;border-radius:11px;font-size:12.5px;font-weight:800;letter-spacing:.2px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#bcd4e6;transition:.16s;
}
.cl-ptype__opt:hover{background:rgba(255,255,255,.13);color:#fff}
.cl-ptype__opt.is-on{background:linear-gradient(180deg,#ffd831,var(--cl-gold));border-color:transparent;color:#0b3554;box-shadow:0 4px 12px rgba(224,180,0,.45)}
@media (max-width:560px){.cl-ptype{grid-template-columns:1fr 1fr}}
/* =========================================================================
   IVIBET PILIPINAS — PHILIPPINES IDENTITY OVERRIDE (block 9/9)
   The family's FIRST two-tone header: a hard blue|red split with a white
   diagonal seam, straight off the Philippine flag. Royal-blue panels sit on
   a warm ivory body, and the recurring motif is the EIGHT-RAY SUN (with the
   flag's three stars on the wheel hub) instead of a cross, tricolour bar or
   crown. Blue/red Fortune Wheel, full Philippine flag chip, LEFT rail.
   ========================================================================= */
:root{
  --cl-blue:#0038a8;         /* accent = Philippine flag royal blue */
  --cl-blue-d:#00276f;
  --cl-blue-l:#1a5ad0;
  --cl-red:#ce1126;          /* flag scarlet — the secondary */
  --cl-red-l:#e5253a;
  --cl-gold:#fcd116;         /* flag sun gold — the highlight (was yellow/white) */
  --cl-gold-d:#e0b400;
  --cl-czblue:#ce1126;       /* inherited "czblue" hook -> Philippine red */
  --cl-czblue-l:#e5253a;
  /* dark panels -> deep royal indigo (not SE teal-navy, not CZ bohemian) */
  --cl-navy:#0b1b45;
  --cl-navy-2:#122a63;
  --cl-navy-3:#1a3a82;
  --cl-line-d:#274a9c;
  --cl-navy-hi:#122a63;
  --cl-navy-mid:#0b1b45;
  --cl-navy-lo:#06102b;
  --cl-ink:#050c20;
  /* light chrome -> warm ivory, lit by the sun rather than tinted blue */
  --cl-bg:#faf5e6;
  --cl-card:#fffdf7;
  --cl-line:#ebe0c6;
  --cl-line-2:#f6efdc;
  --cl-text:#22201c;
  --cl-muted:#6f6656;
  --cl-on-dark:#e9eeff;
  --cl-on-dark-mut:#a7b6de;
}
body{background:var(--cl-bg);color:var(--cl-text)}
/* ---- TWO-TONE HEADER: blue | white seam | red ---- */
.cl-head{
  /* seam never runs closer than 700px from the left, so the nav always sits on blue */
  --cl-seam:max(46%,700px);
  background:linear-gradient(100deg,
    #0038a8 0 var(--cl-seam),
    #ffffff var(--cl-seam) calc(var(--cl-seam) + 34px),
    #ce1126 calc(var(--cl-seam) + 34px) 100%);
  border-bottom:3px solid var(--cl-gold);
  color:#fff;
  box-shadow:0 4px 18px rgba(0,18,64,.30);
}
.cl-head::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:230px;pointer-events:none;
  background:radial-gradient(circle at 16% 50%,rgba(252,209,22,.34),transparent 64%);
}
.cl-head__in{position:relative}
.cl-burger{color:#fff}
.cl-burger:hover{background:rgba(255,255,255,.18)}
.cl-logo{background:#fff;box-shadow:0 3px 10px rgba(0,10,40,.34)}
.cl-navlink{color:#eaf0ff;font-weight:700}
.cl-navlink .cl-ico{color:#c3d0f0}
.cl-navlink:hover{color:#fff;background:rgba(255,255,255,.17)}
.cl-navlink:hover .cl-ico{color:#fff}
.cl-navlink.is-active{color:#0b1b45;background:linear-gradient(180deg,#ffdc3d,var(--cl-gold));box-shadow:0 4px 12px rgba(0,10,40,.34)}
.cl-navlink.is-active .cl-ico{color:var(--cl-blue)}
.cl-navlink::after{background:var(--cl-gold)}
.cl-lang{color:#fff;font-weight:800}
.cl-lang:hover{background:rgba(255,255,255,.17);color:#fff}
.cl-head__auth .cl-btn--login{border:1px solid rgba(255,255,255,.75);color:#fff;background:transparent;box-shadow:none}
.cl-head__auth .cl-btn--login:hover{background:rgba(255,255,255,.18);filter:none;box-shadow:none}
.cl-head__auth .cl-btn--reg{background:linear-gradient(180deg,#ffdc3d,var(--cl-gold));color:#0b1b45;box-shadow:0 6px 16px rgba(0,10,40,.34)}
/* ---- CTAs ---- */
.cl-btn--reg{background:linear-gradient(180deg,#ffdc3d,var(--cl-gold));color:#0b1b45;box-shadow:0 6px 16px rgba(224,180,0,.45)}
.cl-btn--reg:hover{filter:brightness(1.05);box-shadow:0 8px 22px rgba(224,180,0,.58)}
.cl-btn--login{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue));color:#fff;box-shadow:0 6px 16px rgba(0,56,168,.34)}
.cl-btn--ghost{border-color:var(--cl-blue);color:var(--cl-blue-d)}
/* ---- flag chip removed at the client's request ---- */
.cl-flag{display:none}
/* ---- FORTUNE WHEEL: blue / red + eight-ray sun hub ---- */
.cl-wheel{
  background:conic-gradient(
    #0038a8 0 45deg,#ce1126 45deg 90deg,#0038a8 90deg 135deg,#ce1126 135deg 180deg,
    #0038a8 180deg 225deg,#ce1126 225deg 270deg,#0038a8 270deg 315deg,#ce1126 315deg 360deg);
}
.cl-wheel__seg span{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cl-wheel__seg:nth-child(2n) span{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cl-wheel__seg--win span{color:var(--cl-gold);text-shadow:0 0 10px rgba(252,209,22,.8);font-size:14px;font-weight:900}
.cl-wheel-hub{background:radial-gradient(circle at 40% 34%,#1a5ad0,var(--cl-blue-d));border-color:var(--cl-gold)}
.cl-wheel-hub .cl-cross{
  width:76%;height:76%;border:0;border-radius:0;clip-path:none;background:
    radial-gradient(circle at 50% 50%,var(--cl-gold) 0 26%,transparent 27%),
    repeating-conic-gradient(from -6deg,var(--cl-gold) 0 12deg,transparent 12deg 45deg);
}
.cl-wheel-ptr{border-top-color:var(--cl-gold)}
.cl-ruota{background:linear-gradient(135deg,#ffdc3d,var(--cl-gold));color:#0b1b45;box-shadow:0 8px 20px rgba(224,180,0,.45)}
.cl-ruota__disc{
  border-color:#fff;background:
    radial-gradient(circle at 50% 50%,var(--cl-gold) 0 22%,transparent 23%),
    repeating-conic-gradient(from -6deg,var(--cl-gold) 0 12deg,transparent 12deg 45deg),
    var(--cl-blue);
}
.cl-wheel-spin{background:linear-gradient(180deg,#ffdc3d,var(--cl-gold));color:#0b1b45}
/* ---- EIGHT-RAY SUN section markers ---- */
.cl-art h2,.cl-legal__sec h2{padding-left:30px}
.cl-art h2::before,.cl-legal__sec h2::before{
  width:20px;height:20px;left:0;top:50%;bottom:auto;transform:translateY(-50%);
  border-width:0;border-style:none;border-radius:0;background:
    radial-gradient(circle at 50% 50%,var(--cl-gold) 0 27%,transparent 28%),
    repeating-conic-gradient(from -6deg,var(--cl-gold) 0 12deg,transparent 12deg 45deg);
}
/* ---- warm the inherited cool-slate body copy so it reads on ivory ---- */
.cl-art p,.cl-art li,.cl-art ol li,.cl-bullets li,.cl-facts td,.cl-tw td{color:#3a352c}
.cl-art .cl-lead{color:#4d4638}
.cl-faq__a,.cl-legal__sec p,.cl-legal__sec li{color:#3a352c}
.cl-tw thead th:first-child,.cl-tw thead th{color:#e9eeff}
.cl-hero__amt span{color:var(--cl-gold)}
.cl-rbar__v{color:var(--cl-blue)}
.cl-rating__score{color:var(--cl-blue)}
/* ---- LEFT RAIL (SE ran it right) ---- */
.cl-shell{grid-template-columns:330px minmax(0,1fr)}
.cl-shell__main{grid-column:2;grid-row:1}
.cl-rail{grid-column:1;grid-row:1}
@media (max-width:1180px){
  .cl-shell{grid-template-columns:300px minmax(0,1fr)}
}
@media (max-width:860px){
  .cl-shell{grid-template-columns:minmax(0,1fr)}
  .cl-shell__main{grid-column:1}
  .cl-rail{grid-column:1;grid-row:2}
}

/* =========================================================================
   NEW MECHANIC 1 — "Casino o Sports?" welcome-route comparator (index)
   The welcome package is one route or the other, chosen before you deposit
   and never switchable. Slide the first deposit and watch the two published
   offers cross over each other.
   ========================================================================= */
.cl-ruta{
  background:linear-gradient(180deg,var(--cl-navy-hi),var(--cl-navy-lo));
  border:1px solid var(--cl-line-d);border-radius:18px;overflow:hidden;
  box-shadow:0 12px 30px rgba(6,16,43,.34);color:var(--cl-on-dark)}
.cl-ruta__head{display:flex;align-items:center;gap:10px;padding:16px 18px 4px}
.cl-ruta__title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px}
.cl-ruta__title .cl-ico{color:var(--cl-gold)}
.cl-ruta__sub{padding:2px 18px 12px;color:#a7b6de;font-size:12.5px}
.cl-ruta__field{display:flex;flex-direction:column;gap:8px;padding:4px 18px 14px}
.cl-ruta__lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;color:#bcccea}
.cl-ruta__lbl b{color:var(--cl-gold);font-size:15px;font-variant-numeric:tabular-nums}
.cl-ruta input[type=range]{width:100%;accent-color:var(--cl-gold);cursor:pointer}
.cl-ruta__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px 4px}
.cl-ruta__card{position:relative;border-radius:14px;padding:14px;border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.05);transition:.2s}
.cl-ruta__card--casino{border-top:3px solid var(--cl-blue-l)}
.cl-ruta__card--sport{border-top:3px solid var(--cl-red-l)}
.cl-ruta__card.is-best{background:rgba(252,209,22,.13);border-color:rgba(252,209,22,.45);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.cl-ruta__badge{font-size:10.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:#a7b6de}
.cl-ruta__amt{font-size:24px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1.15;margin:2px 0 8px}
.cl-ruta__amt small{font-size:12px;font-weight:700;color:#bcccea}
.cl-ruta__row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-top:1px solid rgba(255,255,255,.08)}
.cl-ruta__row span:first-child{color:#9fb0d8}
.cl-ruta__row b{color:#fff;font-variant-numeric:tabular-nums}
.cl-ruta__flag{position:absolute;top:-9px;right:10px;font-size:9.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:14px;background:var(--cl-gold);color:#0b1b45;display:none}
.cl-ruta__card.is-best .cl-ruta__flag{display:block}
.cl-ruta__verdict{margin:14px 18px 18px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);color:#dbe4fb;font-size:13px;line-height:1.6}
.cl-ruta__verdict b{color:#fff}
.cl-ruta__verdict.is-casino{background:rgba(26,90,208,.16);border-color:rgba(26,90,208,.40);color:#d5e2ff}
.cl-ruta__verdict.is-sport{background:rgba(229,37,58,.15);border-color:rgba(229,37,58,.40);color:#ffdbdd}

/* =========================================================================
   NEW MECHANIC 2 — "Timeline ng Unang Withdrawal" (index)
   Verification lands on the first withdrawal, not at sign-up. Pick a method
   and two honest answers and the stage track redraws itself.
   ========================================================================= */
.cl-tl{
  background:linear-gradient(180deg,var(--cl-navy-hi),var(--cl-navy-lo));
  border:1px solid var(--cl-line-d);border-radius:18px;overflow:hidden;
  box-shadow:0 12px 30px rgba(6,16,43,.34);color:var(--cl-on-dark)}
.cl-tl__head{display:flex;align-items:center;gap:10px;padding:16px 18px 4px}
.cl-tl__title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px}
.cl-tl__title .cl-ico{color:var(--cl-gold)}
.cl-tl__sub{padding:2px 18px 12px;color:#a7b6de;font-size:12.5px}
.cl-tl__opts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:2px 18px 10px}
.cl-tl__opts--3{grid-template-columns:repeat(3,1fr)}
.cl-tl__opt{height:38px;border-radius:11px;font-size:12.5px;font-weight:800;letter-spacing:.2px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#bcccea;transition:.16s}
.cl-tl__opt:hover{background:rgba(255,255,255,.14);color:#fff}
.cl-tl__opt.is-on{background:linear-gradient(180deg,#ffdc3d,var(--cl-gold));border-color:transparent;color:#0b1b45;box-shadow:0 4px 12px rgba(224,180,0,.45)}
.cl-tl__toggles{display:flex;flex-wrap:wrap;gap:8px;padding:2px 18px 14px}
.cl-tl__chk{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-size:12.5px;font-weight:700;color:#bcccea;transition:.16s}
.cl-tl__chk.is-on{background:rgba(46,160,110,.16);border-color:rgba(46,160,110,.40);color:#c7f0dc}
.cl-tl__dot{width:14px;height:14px;border-radius:5px;flex:none;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.28);transition:.16s}
.cl-tl__chk.is-on .cl-tl__dot{background:#2ea06e;border-color:#2ea06e}
.cl-tl__track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:6px 18px 4px;position:relative}
.cl-tl__stage{position:relative;padding:26px 8px 4px 0}
.cl-tl__stage::before{content:"";position:absolute;left:0;top:9px;width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.13)}
.cl-tl__stage:last-child::before{width:14px}
.cl-tl__stage::after{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;
  background:var(--cl-navy-lo);border:3px solid var(--cl-blue-l);box-shadow:0 0 0 3px rgba(26,90,208,.22)}
.cl-tl__stage.is-slow::after{border-color:var(--cl-red-l);box-shadow:0 0 0 3px rgba(229,37,58,.24)}
.cl-tl__stage.is-fast::after{border-color:var(--cl-gold);box-shadow:0 0 0 3px rgba(252,209,22,.26)}
.cl-tl__k{font-size:11px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:#9fb0d8}
.cl-tl__v{font-size:14px;font-weight:800;color:#fff;margin-top:2px;font-variant-numeric:tabular-nums}
.cl-tl__n{font-size:11.5px;color:#a7b6de;margin-top:3px;line-height:1.45;padding-right:8px}
.cl-tl__sum{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px 18px 4px}
.cl-tl__stat{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px}
.cl-tl__stat .cl-tl__k{margin-bottom:3px}
.cl-tl__big{font-size:19px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.cl-tl__big small{font-size:12px;font-weight:700;color:#bcccea}
.cl-tl__verdict{margin:14px 18px 18px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);color:#dbe4fb;font-size:13px;line-height:1.6}
.cl-tl__verdict b{color:#fff}
.cl-tl__verdict.is-fair{background:rgba(46,160,110,.13);border-color:rgba(46,160,110,.32);color:#c7f0dc}
.cl-tl__verdict.is-steep{background:rgba(229,37,58,.13);border-color:rgba(229,37,58,.34);color:#ffdbdd}

@media (max-width:640px){
  .cl-ruta__grid{grid-template-columns:1fr}
  .cl-tl__opts{grid-template-columns:1fr 1fr}
  .cl-tl__track{grid-template-columns:1fr;gap:2px}
  .cl-tl__stage{padding:4px 0 8px 26px}
  .cl-tl__stage::before{left:7px;top:0;width:3px;height:100%}
  .cl-tl__stage:last-child::before{height:14px;width:3px}
  .cl-tl__stage::after{left:0;top:2px}
  .cl-tl__sum{grid-template-columns:1fr}
}
/* =========================================================================
   IVIBET BRASIL — BRAZIL IDENTITY OVERRIDE (block 10/10)
   Tropical GREEN header carrying a soft diagonal yellow ribbon, over deep
   flag-blue panels on a faintly green-tinted body. The recurring motif is
   the LOSANGO — the flag's yellow rhombus with its blue centre — instead of
   a cross, tricolour bar, sun or crown. Green/yellow wheel, RIGHT rail,
   no flag chip.
   ========================================================================= */
:root{
  --cl-blue:#009739;         /* accent = Brazilian flag green */
  --cl-blue-d:#00702a;
  --cl-blue-l:#12b64c;
  --cl-gold:#fedd00;         /* flag yellow — the highlight */
  --cl-gold-d:#e0c200;
  --cl-czblue:#fedd00;       /* inherited hook -> yellow, so bar fills run yellow->green */
  --cl-czblue-l:#ffe83a;
  /* dark panels -> flag-globe blue */
  --cl-navy:#04205c;
  --cl-navy-2:#0a3175;
  --cl-navy-3:#0f42a0;
  --cl-line-d:#1a54c0;
  --cl-navy-hi:#0a3175;
  --cl-navy-mid:#04205c;
  --cl-navy-lo:#021539;
  --cl-ink:#010d24;
  /* light chrome -> faint green-grey, not ivory and not blue-white */
  --cl-bg:#f3f6f3;
  --cl-card:#ffffff;
  --cl-line:#dee7e0;
  --cl-line-2:#eef4f0;
  --cl-text:#17231b;
  --cl-muted:#63705f;
  --cl-on-dark:#e6eeff;
  --cl-on-dark-mut:#a3b6e0;
}
body{background:var(--cl-bg);color:var(--cl-text)}
/* ---- GREEN HEADER with a diagonal yellow ribbon ---- */
.cl-head{
  background:linear-gradient(180deg,#00a53f 0%,#009739 62%,#008233 100%);
  border-bottom:3px solid var(--cl-gold);
  color:#fff;
  box-shadow:0 4px 18px rgba(0,58,24,.32);
}
.cl-head::before{
  content:"";position:absolute;inset:0;left:0;top:0;width:auto;height:auto;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 38%,rgba(254,221,0,.22) 45%,rgba(254,221,0,.22) 55%,transparent 62%);
}
.cl-burger{color:#fff}
.cl-burger:hover{background:rgba(255,255,255,.18)}
.cl-logo{background:#fff;box-shadow:0 3px 10px rgba(0,40,16,.34)}
.cl-navlink{color:#e8f7ec;font-weight:700}
.cl-navlink .cl-ico{color:#bfe6cc}
.cl-navlink:hover{color:#fff;background:rgba(255,255,255,.18)}
.cl-navlink:hover .cl-ico{color:#fff}
.cl-navlink.is-active{color:#0a3a1c;background:linear-gradient(180deg,#ffe83a,var(--cl-gold));box-shadow:0 4px 12px rgba(0,40,16,.32)}
.cl-navlink.is-active .cl-ico{color:var(--cl-blue-d)}
.cl-navlink::after{background:var(--cl-gold)}
.cl-lang{color:#fff;font-weight:800}
.cl-lang:hover{background:rgba(255,255,255,.18);color:#fff}
.cl-head__auth .cl-btn--login{border:1px solid rgba(255,255,255,.75);color:#fff;background:transparent;box-shadow:none}
.cl-head__auth .cl-btn--login:hover{background:rgba(255,255,255,.18);filter:none;box-shadow:none}
.cl-head__auth .cl-btn--reg{background:linear-gradient(180deg,#ffe83a,var(--cl-gold));color:#0a3a1c;box-shadow:0 6px 16px rgba(0,40,16,.32)}
/* ---- CTAs ---- */
.cl-btn--reg{background:linear-gradient(180deg,#ffe83a,var(--cl-gold));color:#0a3a1c;box-shadow:0 6px 16px rgba(224,194,0,.45)}
.cl-btn--reg:hover{filter:brightness(1.05);box-shadow:0 8px 22px rgba(224,194,0,.58)}
.cl-btn--login{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue));color:#fff;box-shadow:0 6px 16px rgba(0,151,57,.34)}
.cl-btn--ghost{border-color:var(--cl-blue);color:var(--cl-blue-d)}
/* ---- FORTUNE WHEEL: green / yellow + losango hub ---- */
.cl-wheel{
  background:conic-gradient(
    #009739 0 45deg,#fedd00 45deg 90deg,#009739 90deg 135deg,#fedd00 135deg 180deg,
    #009739 180deg 225deg,#fedd00 225deg 270deg,#009739 270deg 315deg,#fedd00 315deg 360deg);
}
.cl-wheel__seg span{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.cl-wheel__seg:nth-child(2n) span{color:#0a3a1c;text-shadow:0 1px 1px rgba(255,255,255,.75)}
.cl-wheel__seg--win span{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.9);font-size:14px;font-weight:900}
.cl-wheel-hub{background:radial-gradient(circle at 40% 34%,#0f42a0,#021539);border-color:var(--cl-gold)}
.cl-wheel-hub .cl-cross{
  width:50%;height:50%;border:0;border-radius:4px;clip-path:none;
  background:var(--cl-gold);transform:rotate(45deg);box-shadow:0 0 0 3px rgba(2,21,57,.55);
}
.cl-wheel-ptr{border-top-color:var(--cl-gold)}
.cl-ruota{background:linear-gradient(135deg,#ffe83a,var(--cl-gold));color:#0a3a1c;box-shadow:0 8px 20px rgba(224,194,0,.45)}
.cl-ruota__disc{
  border-color:#fff;
  background:conic-gradient(var(--cl-blue) 0 90deg,var(--cl-gold) 90deg 180deg,var(--cl-blue) 180deg 270deg,var(--cl-gold) 270deg 360deg);
}
.cl-wheel-spin{background:linear-gradient(180deg,#ffe83a,var(--cl-gold));color:#0a3a1c}
/* ---- LOSANGO section markers: the flag's rhombus with its blue centre ---- */
.cl-art h2,.cl-legal__sec h2{padding-left:28px}
.cl-art h2::before,.cl-legal__sec h2::before{
  width:16px;height:16px;left:1px;top:50%;bottom:auto;
  transform:translateY(-50%) rotate(45deg);
  border-width:0;border-style:none;border-radius:3px;
  background:
    radial-gradient(circle at 50% 50%,var(--cl-navy-3) 0 30%,transparent 31%),
    var(--cl-gold);
}
/* ---- body copy back to a neutral dark on the green-grey page ---- */
.cl-art p,.cl-art li,.cl-art ol li,.cl-bullets li,.cl-facts td,.cl-tw td{color:#26332a}
.cl-art .cl-lead{color:#3a4a3d}
.cl-faq__a,.cl-legal__sec p,.cl-legal__sec li{color:#26332a}
.cl-tw thead th:first-child,.cl-tw thead th{color:#e6eeff}
.cl-hero__amt span{color:var(--cl-gold)}
.cl-rbar__v{color:var(--cl-blue)}
.cl-rating__score{color:var(--cl-blue)}
/* ---- RIGHT RAIL again (PH ran it left) ---- */
.cl-shell{grid-template-columns:minmax(0,1fr) 330px}
.cl-shell__main{grid-column:1;grid-row:1}
.cl-rail{grid-column:2;grid-row:1}
@media (max-width:1180px){
  .cl-shell{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:860px){
  .cl-shell{grid-template-columns:minmax(0,1fr)}
  .cl-shell__main{grid-column:1}
  .cl-rail{grid-column:1;grid-row:2}
}

/* =========================================================================
   NEW MECHANIC 1 — "Verificador de Bilhete" (index)
   One slip checked against THREE published rule sets at the same time:
   the welcome-bonus rollover (2+ seleções, odd total 2,00+), Compoints
   (cada odd 1,30+) and Combo Boost (3+ seleções, cada odd 1,20+).
   ========================================================================= */
.cl-tick{
  background:linear-gradient(180deg,var(--cl-navy-hi),var(--cl-navy-lo));
  border:1px solid var(--cl-line-d);border-radius:18px;overflow:hidden;
  box-shadow:0 12px 30px rgba(2,21,57,.34);color:var(--cl-on-dark)}
.cl-tick__head{display:flex;align-items:center;gap:10px;padding:16px 18px 4px}
.cl-tick__title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px}
.cl-tick__title .cl-ico{color:var(--cl-gold)}
.cl-tick__sub{padding:2px 18px 12px;color:#a3b6e0;font-size:12.5px}
.cl-tick__legs{display:flex;flex-direction:column;gap:10px;padding:2px 18px 12px}
.cl-tick__leg{display:grid;grid-template-columns:96px 1fr 58px;gap:12px;align-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:9px 12px}
.cl-tick__leg.is-low{background:rgba(254,221,0,.10);border-color:rgba(254,221,0,.34)}
.cl-tick__k{font-size:11.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#9fb3dd}
.cl-tick__leg input[type=range]{width:100%;accent-color:var(--cl-gold);cursor:pointer}
.cl-tick__odd{font-size:15px;font-weight:900;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.cl-tick__ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 18px 12px}
.cl-tick__btn{height:36px;padding:0 14px;border-radius:11px;font-size:12.5px;font-weight:800;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#dbe7ff;transition:.16s}
.cl-tick__btn:hover{background:rgba(255,255,255,.16);color:#fff}
.cl-tick__btn[disabled]{opacity:.4;cursor:not-allowed}
.cl-tick__count{margin-left:auto;font-size:12px;color:#9fb3dd}
.cl-tick__stake{display:flex;flex-direction:column;gap:8px;padding:0 18px 14px}
.cl-tick__lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;color:#bcccea}
.cl-tick__lbl b{color:var(--cl-gold);font-size:15px;font-variant-numeric:tabular-nums}
.cl-tick input[type=range]{width:100%;accent-color:var(--cl-gold);cursor:pointer}
.cl-tick__out{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px 12px}
.cl-tick__stat{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px}
.cl-tick__v{font-size:20px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.cl-tick__v small{font-size:12px;font-weight:700;color:#bcccea}
.cl-tick__badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 4px}
.cl-badge{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);transition:.18s}
.cl-badge__t{font-size:11.5px;font-weight:900;letter-spacing:.3px;color:#dbe7ff}
.cl-badge__s{font-size:11px;color:#9fb3dd;line-height:1.4}
.cl-badge.is-ok{background:rgba(0,151,57,.20);border-color:rgba(18,182,76,.50)}
.cl-badge.is-ok .cl-badge__t{color:#8ff0b4}
.cl-badge.is-no{background:rgba(214,40,40,.15);border-color:rgba(214,40,40,.38)}
.cl-badge.is-no .cl-badge__t{color:#ffb9b9}
.cl-tick__verdict{margin:12px 18px 18px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);color:#dbe7ff;font-size:13px;line-height:1.6}
.cl-tick__verdict b{color:#fff}
.cl-tick__verdict.is-fair{background:rgba(0,151,57,.16);border-color:rgba(18,182,76,.40);color:#c9f5da}
.cl-tick__verdict.is-steep{background:rgba(214,40,40,.14);border-color:rgba(214,40,40,.36);color:#ffd6d6}

/* =========================================================================
   NEW MECHANIC 2 — "Rollover em 7 Dias" (index)
   The sports welcome bonus asks for 5× the promotional amount in qualifying
   multiples inside a seven-day window. This one answers whether the window
   is long enough at the rhythm you actually bet.
   ========================================================================= */
.cl-wk{
  background:linear-gradient(180deg,var(--cl-navy-hi),var(--cl-navy-lo));
  border:1px solid var(--cl-line-d);border-radius:18px;overflow:hidden;
  box-shadow:0 12px 30px rgba(2,21,57,.34);color:var(--cl-on-dark)}
.cl-wk__head{display:flex;align-items:center;gap:10px;padding:16px 18px 4px}
.cl-wk__title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px}
.cl-wk__title .cl-ico{color:var(--cl-gold)}
.cl-wk__sub{padding:2px 18px 12px;color:#a3b6e0;font-size:12.5px}
.cl-wk__inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;padding:4px 18px 14px}
.cl-wk__field{display:flex;flex-direction:column;gap:8px}
.cl-wk__lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;color:#bcccea}
.cl-wk__lbl b{color:var(--cl-gold);font-size:14px;font-variant-numeric:tabular-nums}
.cl-wk input[type=range]{width:100%;accent-color:var(--cl-gold);cursor:pointer}
.cl-wk__strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:0 18px 6px}
.cl-wk__day{border-radius:10px;padding:9px 4px;text-align:center;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);transition:.2s}
.cl-wk__day.is-on{background:linear-gradient(180deg,rgba(18,182,76,.42),rgba(0,151,57,.30));border-color:rgba(18,182,76,.55)}
.cl-wk__day.is-last{background:linear-gradient(180deg,#ffe83a,var(--cl-gold));border-color:transparent}
.cl-wk__day.is-last .cl-wk__dn,.cl-wk__day.is-last .cl-wk__dd{color:#0a3a1c}
.cl-wk__dn{font-size:10px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:#9fb3dd}
.cl-wk__dd{font-size:15px;font-weight:900;color:#fff;line-height:1.2}
.cl-wk__cap{display:flex;justify-content:space-between;padding:6px 18px 0;font-size:11px;color:#8ea5c9}
.cl-wk__out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 18px 4px}
.cl-wk__stat{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px}
.cl-wk__k{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#9fb3dd;margin-bottom:3px}
.cl-wk__v{font-size:19px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.cl-wk__v small{font-size:12px;font-weight:700;color:#bcccea}
.cl-wk__v--cost{color:#ff9a90}
.cl-wk__verdict{margin:12px 18px 18px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);color:#dbe7ff;font-size:13px;line-height:1.6}
.cl-wk__verdict b{color:#fff}
.cl-wk__verdict.is-fair{background:rgba(0,151,57,.16);border-color:rgba(18,182,76,.40);color:#c9f5da}
.cl-wk__verdict.is-steep{background:rgba(214,40,40,.14);border-color:rgba(214,40,40,.36);color:#ffd6d6}

@media (max-width:640px){
  .cl-tick__leg{grid-template-columns:78px 1fr 50px;gap:8px}
  .cl-tick__out{grid-template-columns:1fr}
  .cl-tick__badges{grid-template-columns:1fr}
  .cl-wk__inputs{grid-template-columns:1fr}
  .cl-wk__out{grid-template-columns:1fr}
  .cl-wk__strip{grid-template-columns:repeat(4,1fr)}
}
/* =========================================================================
   IVIBET MÉXICO — MEXICO IDENTITY OVERRIDE (block 11/11)
   The family's FIRST dark-bodied fork: an obsidian page carrying floating
   ivory article cards, an almost-black header closed by a three-band
   TRICOLOUR RULE (green|white|red) instead of a single border, and warm
   charcoal panels instead of navy. The recurring motif is the GRECA — the
   stepped fret — in gold. Green/red wheel, LEFT rail.
   ========================================================================= */
:root{
  --cl-blue:#00875a;         /* accent = Mexican green, lifted for dark-on-dark contrast */
  --cl-blue-d:#006341;
  --cl-blue-l:#12a870;
  --cl-red:#ce1126;
  --cl-red-l:#e6293d;
  --cl-gold:#e8b23a;         /* adobe gold — the highlight */
  --cl-gold-d:#c9942a;
  --cl-czblue:#ce1126;       /* inherited hook -> flag red */
  --cl-czblue-l:#e6293d;
  /* panels -> warm charcoal, not navy */
  --cl-navy:#211d1a;
  --cl-navy-2:#2a2521;
  --cl-navy-3:#3a332c;
  --cl-line-d:#453d34;
  --cl-navy-hi:#2a2521;
  --cl-navy-mid:#211d1a;
  --cl-navy-lo:#161311;
  --cl-ink:#100e0c;
  /* the page itself goes dark; the content cards stay ivory */
  --cl-bg:#141210;
  --cl-card:#fbf7f0;
  --cl-line:#e6ddcd;
  --cl-line-2:#f3ece0;
  --cl-text:#221e1a;
  --cl-muted:#6b6156;
  --cl-on-dark:#f3ece0;
  --cl-on-dark-mut:#b8ac9c;
}
body{background:var(--cl-bg);color:var(--cl-on-dark)}
/* ---- OBSIDIAN HEADER closed by a tricolour rule ---- */
.cl-head{
  background:linear-gradient(180deg,#211c18 0%,#171310 70%,#131110 100%);
  border-bottom:0;
  color:#f3ece0;
  box-shadow:0 6px 26px rgba(0,0,0,.55);
}
.cl-head::before{
  content:"";position:absolute;inset:auto 0 0 0;width:auto;height:3px;pointer-events:none;
  background:linear-gradient(90deg,
    var(--cl-blue-d) 0 33.34%,#ffffff 33.34% 66.67%,var(--cl-red) 66.67% 100%);
}
.cl-burger{color:#f3ece0}
.cl-burger:hover{background:rgba(255,255,255,.12)}
.cl-logo{background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.6)}
.cl-navlink{color:#e0d6c6;font-weight:700}
.cl-navlink .cl-ico{color:#a89b8a}
.cl-navlink:hover{color:#fff;background:rgba(255,255,255,.10)}
.cl-navlink:hover .cl-ico{color:#fff}
.cl-navlink.is-active{color:#221e1a;background:linear-gradient(180deg,#f2c455,var(--cl-gold));box-shadow:0 4px 14px rgba(0,0,0,.5)}
.cl-navlink.is-active .cl-ico{color:var(--cl-blue-d)}
.cl-navlink::after{background:var(--cl-gold)}
.cl-lang{color:#e0d6c6;font-weight:800}
.cl-lang:hover{background:rgba(255,255,255,.10);color:#fff}
.cl-head__auth .cl-btn--login{border:1px solid rgba(243,236,224,.55);color:#f3ece0;background:transparent;box-shadow:none}
.cl-head__auth .cl-btn--login:hover{background:rgba(255,255,255,.12);filter:none;box-shadow:none}
.cl-head__auth .cl-btn--reg{background:linear-gradient(180deg,#f2c455,var(--cl-gold));color:#221e1a;box-shadow:0 6px 16px rgba(0,0,0,.45)}
/* ---- CTAs ---- */
.cl-btn--reg{background:linear-gradient(180deg,#f2c455,var(--cl-gold));color:#221e1a;box-shadow:0 6px 16px rgba(201,148,42,.42)}
.cl-btn--reg:hover{filter:brightness(1.06);box-shadow:0 8px 22px rgba(201,148,42,.55)}
.cl-btn--login{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue));color:#fff;box-shadow:0 6px 16px rgba(0,135,90,.34)}
.cl-btn--ghost{border-color:var(--cl-blue);color:var(--cl-blue-d)}
/* ---- cards must read as cards on a dark page ---- */
.cl-panel,.cl-tick,.cl-wk,.cl-vs,.cl-prob,.cl-hero{border:1px solid var(--cl-line-d)}
.cl-art,.cl-legal__body,.cl-toc,.cl-page>section{box-shadow:0 18px 44px rgba(0,0,0,.45)}
/* ---- RULETA DE LA SUERTE: green / red + greca hub ---- */
.cl-wheel{
  background:conic-gradient(
    #006341 0 45deg,#ce1126 45deg 90deg,#006341 90deg 135deg,#ce1126 135deg 180deg,
    #006341 180deg 225deg,#ce1126 225deg 270deg,#006341 270deg 315deg,#ce1126 315deg 360deg);
}
.cl-wheel__seg span{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cl-wheel__seg:nth-child(2n) span{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cl-wheel__seg--win span{color:var(--cl-gold);text-shadow:0 0 10px rgba(232,178,58,.85);font-size:14px;font-weight:900}
.cl-wheel-hub{background:radial-gradient(circle at 40% 34%,#3a332c,#100e0c);border-color:var(--cl-gold)}
.cl-wheel-hub .cl-cross{
  width:56%;height:44%;border:0;border-radius:0;clip-path:none;transform:none;box-shadow:none;
  background:
    linear-gradient(var(--cl-gold),var(--cl-gold)) 0 100%/26% 44% no-repeat,
    linear-gradient(var(--cl-gold),var(--cl-gold)) 37% 100%/26% 72% no-repeat,
    linear-gradient(var(--cl-gold),var(--cl-gold)) 74% 100%/26% 100% no-repeat;
}
.cl-wheel-ptr{border-top-color:var(--cl-gold)}
.cl-ruota{background:linear-gradient(135deg,#f2c455,var(--cl-gold));color:#221e1a;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.cl-ruota__disc{
  border-color:#f3ece0;
  background:conic-gradient(var(--cl-blue-d) 0 90deg,var(--cl-red) 90deg 180deg,var(--cl-blue-d) 180deg 270deg,var(--cl-red) 270deg 360deg);
}
.cl-wheel-spin{background:linear-gradient(180deg,#f2c455,var(--cl-gold));color:#221e1a}
/* ---- GRECA section markers: the stepped fret ---- */
.cl-art h2,.cl-legal__sec h2{padding-left:30px}
.cl-art h2::before,.cl-legal__sec h2::before{
  width:20px;height:16px;left:0;top:50%;bottom:auto;transform:translateY(-50%);
  border-width:0;border-style:none;border-radius:0;background:
    linear-gradient(var(--cl-gold),var(--cl-gold)) 0 100%/5px 7px no-repeat,
    linear-gradient(var(--cl-gold),var(--cl-gold)) 7.5px 100%/5px 11px no-repeat,
    linear-gradient(var(--cl-gold),var(--cl-gold)) 15px 100%/5px 16px no-repeat;
}
/* ---- copy on the ivory cards ---- */
.cl-art p,.cl-art li,.cl-art ol li,.cl-bullets li,.cl-facts td,.cl-tw td{color:#3a332b}
.cl-art .cl-lead{color:#4d4438}
.cl-faq__a,.cl-legal__sec p,.cl-legal__sec li{color:#3a332b}
.cl-tw thead th:first-child,.cl-tw thead th{color:#f3ece0}
.cl-hero__amt span{color:var(--cl-gold)}
.cl-rbar__v{color:var(--cl-blue-d)}
.cl-rating__score{color:var(--cl-blue-d)}
/* ---- LEFT RAIL (BR ran it right) ---- */
.cl-shell{grid-template-columns:330px minmax(0,1fr)}
.cl-shell__main{grid-column:2;grid-row:1}
.cl-rail{grid-column:1;grid-row:1}
@media (max-width:1180px){
  .cl-shell{grid-template-columns:300px minmax(0,1fr)}
}
@media (max-width:860px){
  .cl-shell{grid-template-columns:minmax(0,1fr)}
  .cl-shell__main{grid-column:1}
  .cl-rail{grid-column:1;grid-row:2}
}

/* =========================================================================
   NEW MECHANIC 1 — "Banner contra Términos" (index)
   The Mexican pages state it outright: some banners show a MX$20.00 minimum
   while the terms require $350 MXN for the spins and the instant round.
   Move the deposit and watch the two columns disagree.
   ========================================================================= */
.cl-vs{
  background:linear-gradient(180deg,var(--cl-navy-hi),var(--cl-navy-lo));
  border-radius:18px;overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.5);color:var(--cl-on-dark)}
.cl-vs__head{display:flex;align-items:center;gap:10px;padding:16px 18px 4px}
.cl-vs__title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px}
.cl-vs__title .cl-ico{color:var(--cl-gold)}
.cl-vs__sub{padding:2px 18px 12px;color:var(--cl-on-dark-mut);font-size:12.5px}
.cl-vs__field{display:flex;flex-direction:column;gap:8px;padding:4px 18px 14px}
.cl-vs__lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;color:#cfc2b0}
.cl-vs__lbl b{color:var(--cl-gold);font-size:15px;font-variant-numeric:tabular-nums}
.cl-vs input[type=range]{width:100%;accent-color:var(--cl-gold);cursor:pointer}
.cl-vs__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px 4px}
.cl-vs__card{border-radius:14px;padding:14px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.05)}
.cl-vs__card--banner{border-top:3px solid var(--cl-gold)}
.cl-vs__card--terms{border-top:3px solid var(--cl-blue-l)}
.cl-vs__card--terms.is-warn{background:rgba(206,17,38,.14);border-color:rgba(230,41,61,.42)}
.cl-vs__badge{font-size:10.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--cl-on-dark-mut)}
.cl-vs__amt{font-size:23px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1.15;margin:2px 0 8px}
.cl-vs__row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-top:1px solid rgba(255,255,255,.08)}
.cl-vs__row span:first-child{color:#bdb0a0}
.cl-vs__row b{color:#fff;font-variant-numeric:tabular-nums}
.cl-vs__row b.is-no{color:#ff9a90}
.cl-vs__row b.is-yes{color:#7fe3b4}
.cl-vs__verdict{margin:14px 18px 18px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);color:#e8ded0;font-size:13px;line-height:1.6}
.cl-vs__verdict b{color:#fff}
.cl-vs__verdict.is-fair{background:rgba(0,135,90,.18);border-color:rgba(18,168,112,.42);color:#c4f0dc}
.cl-vs__verdict.is-steep{background:rgba(206,17,38,.15);border-color:rgba(230,41,61,.40);color:#ffd6d6}

/* =========================================================================
   NEW MECHANIC 2 — "La Ruleta y sus Probabilidades" (index)
   The source publishes the odds: 25% for 25 free spins on the Ruleta Oro and
   0.0001% for the top prize. This turns those two numbers into cumulative
   probability across an orders-of-magnitude slider.
   ========================================================================= */
.cl-prob{
  background:linear-gradient(180deg,var(--cl-navy-hi),var(--cl-navy-lo));
  border-radius:18px;overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.5);color:var(--cl-on-dark)}
.cl-prob__head{display:flex;align-items:center;gap:10px;padding:16px 18px 4px}
.cl-prob__title{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px}
.cl-prob__title .cl-ico{color:var(--cl-gold)}
.cl-prob__sub{padding:2px 18px 12px;color:var(--cl-on-dark-mut);font-size:12.5px}
.cl-prob__opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:2px 18px 12px}
.cl-prob__opt{height:52px;border-radius:12px;font-size:12.5px;font-weight:800;line-height:1.3;padding:0 10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);color:#cfc2b0;transition:.16s}
.cl-prob__opt small{display:block;font-size:11px;font-weight:700;opacity:.85;margin-top:2px}
.cl-prob__opt:hover{background:rgba(255,255,255,.13);color:#fff}
.cl-prob__opt.is-on{background:linear-gradient(180deg,#f2c455,var(--cl-gold));border-color:transparent;color:#221e1a}
.cl-prob__field{display:flex;flex-direction:column;gap:8px;padding:2px 18px 12px}
.cl-prob__lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;color:#cfc2b0}
.cl-prob__lbl b{color:var(--cl-gold);font-size:15px;font-variant-numeric:tabular-nums}
.cl-prob input[type=range]{width:100%;accent-color:var(--cl-gold);cursor:pointer}
.cl-prob__bar{height:12px;margin:2px 18px 0;border-radius:7px;background:rgba(255,255,255,.09);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.cl-prob__fill{display:block;height:100%;border-radius:7px;width:2%;
  background:linear-gradient(90deg,var(--cl-red),var(--cl-gold),var(--cl-blue-l));transition:width .3s cubic-bezier(.22,.61,.36,1)}
.cl-prob__cap{display:flex;justify-content:space-between;padding:7px 18px 0;font-size:11px;color:#9c9084}
.cl-prob__out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 18px 4px}
.cl-prob__stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:12px}
.cl-prob__k{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#a89b8a;margin-bottom:3px}
.cl-prob__v{font-size:19px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.cl-prob__v small{font-size:12px;font-weight:700;color:#cfc2b0}
.cl-prob__v--cost{color:#ff9a90}
.cl-prob__verdict{margin:12px 18px 18px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);color:#e8ded0;font-size:13px;line-height:1.6}
.cl-prob__verdict b{color:#fff}
.cl-prob__verdict.is-fair{background:rgba(0,135,90,.18);border-color:rgba(18,168,112,.42);color:#c4f0dc}
.cl-prob__verdict.is-steep{background:rgba(206,17,38,.15);border-color:rgba(230,41,61,.40);color:#ffd6d6}

@media (max-width:640px){
  .cl-vs__grid{grid-template-columns:1fr}
  .cl-prob__opts{grid-template-columns:1fr}
  .cl-prob__out{grid-template-columns:1fr}
}
/* ---- dark-page contrast fixes: chrome text that sits OUTSIDE the ivory cards ---- */
.cl-sec__t,.cl-sect__t{color:#f3ece0}
.cl-sec__head .cl-sec__ico{color:var(--cl-gold)}
.cl-cas-count{color:#b8ac9c}
.cl-cas-count b{color:#f3ece0}
.cl-cas-foot{color:#b8ac9c}
.cl-sec__more,.cl-sec__link{color:var(--cl-gold)}
.cl-page>h2,.cl-page>p{color:#e8ded0}
.cl-wins,.cl-wins__row{color:var(--cl-text)}
.cl-cattabs,.cl-cattabs__opt{color:var(--cl-muted)}


/* =========================================================================
   IVIBET CHILE — CHILE IDENTITY OVERRIDE (block 12/12)
   "La Estrella Solitaria". The family's first WHITE header, and the first to
   carry a flag CANTON: a solid blue square hard against the left edge with
   the lone white star inside it, closed by a red rule. The page below is
   COOL midnight navy (México's dark fork was warm obsidian) under crisp
   white cards, each opened by a CORDILLERA ridge — a zig-zag band of blue
   peaks. No gold anywhere: the palette is flag blue, flag red and white.
   Blue/red wheel with a white star hub. RIGHT rail (México ran left).
   ========================================================================= */
:root{
  --cl-blue:#1e5fd0;        /* accent = flag blue, lifted to read on navy */
  --cl-blue-d:#0b3c8c;
  --cl-blue-l:#3d7ce8;
  --cl-red:#d52b1e;
  --cl-red-l:#eb4133;
  --cl-gold:#ff4b3a;        /* the "highlight" hook is now a warm flag red */
  --cl-gold-d:#d52b1e;
  --cl-czblue:#0b3c8c;      /* inherited hook -> flag blue */
  --cl-czblue-l:#1e5fd0;
  /* panels: cool slate-navy, deeper and bluer than the inherited navy */
  --cl-navy:#132445;
  --cl-navy-2:#1a3057;
  --cl-navy-3:#24406e;
  --cl-line-d:#2b4a7d;
  --cl-navy-hi:#1a3057;
  --cl-navy-mid:#132445;
  --cl-navy-lo:#0a1428;
  --cl-ink:#060e1e;
  /* cool midnight page, crisp white cards */
  --cl-bg:#0c1730;
  --cl-card:#ffffff;
  --cl-line:#dde5f2;
  --cl-line-2:#eef3fa;
  --cl-text:#111c2e;
  --cl-muted:#5d6b80;
  --cl-on-dark:#e8eefb;
  --cl-on-dark-mut:#93a3c0;
  --cl-canton:72px;
}
body{
  background:
    radial-gradient(1100px 620px at 12% -10%,#16294f 0%,transparent 62%),
    linear-gradient(180deg,#0c1730 0%,#0a1428 100%);
  background-attachment:fixed;
  color:var(--cl-on-dark);
}

/* ---- WHITE HEADER + FLAG CANTON WITH THE LONE STAR ---- */
.cl-head{
  background:linear-gradient(180deg,#ffffff 0%,#f3f6fc 100%);
  border-bottom:3px solid var(--cl-red);
  color:var(--cl-text);
  box-shadow:0 4px 20px rgba(6,18,45,.28);
}
.cl-head::before{content:none}
.cl-head__in{position:relative;padding-left:calc(var(--cl-canton) + 16px)}
.cl-head__in::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--cl-canton);
  background:linear-gradient(180deg,#1a55bb,#0b3c8c);pointer-events:none;
}
.cl-head__in::after{
  content:"";position:absolute;left:calc(var(--cl-canton)/2 - 15px);top:50%;
  width:30px;height:30px;transform:translateY(-50%);background:#fff;pointer-events:none;
  clip-path:polygon(50% 0%,61.8% 34.5%,98% 34.5%,69.1% 56%,80% 90.5%,50% 69%,20% 90.5%,30.9% 56%,2% 34.5%,38.2% 34.5%);
}
.cl-burger{color:#2b3648}
.cl-burger:hover{background:#e6ecf8}
.cl-logo{background:#fff;box-shadow:0 2px 10px rgba(11,60,140,.20);border:1px solid #e2e9f6}
.cl-navlink{color:#3a465c;font-weight:700}
.cl-navlink .cl-ico{color:#8d9bb3}
.cl-navlink:hover{color:var(--cl-blue-d);background:#e9eff9}
.cl-navlink:hover .cl-ico{color:var(--cl-blue-d)}
.cl-navlink.is-active{color:#fff;background:linear-gradient(180deg,#1a55bb,var(--cl-blue-d));box-shadow:0 4px 14px rgba(11,60,140,.34)}
.cl-navlink.is-active .cl-ico{color:#fff}
.cl-navlink::after{background:var(--cl-red)}
.cl-lang{color:#3a465c;font-weight:800}
.cl-lang:hover{background:#e9eff9;color:var(--cl-blue-d)}
.cl-head__auth .cl-btn--login{border:1px solid var(--cl-blue-d);color:var(--cl-blue-d);background:transparent;box-shadow:none}
.cl-head__auth .cl-btn--login:hover{background:rgba(11,60,140,.09);filter:none;box-shadow:none}
.cl-head__auth .cl-btn--reg{background:linear-gradient(180deg,var(--cl-red-l),var(--cl-red));color:#fff;box-shadow:0 6px 16px rgba(213,43,30,.34)}

/* ---- CTAs: red registers, blue logs in ---- */
.cl-btn--reg{background:linear-gradient(180deg,var(--cl-red-l),var(--cl-red));color:#fff;box-shadow:0 6px 16px rgba(213,43,30,.36)}
.cl-btn--reg:hover{filter:brightness(1.06);box-shadow:0 8px 22px rgba(213,43,30,.48)}
.cl-btn--login{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue-d));color:#fff;box-shadow:0 6px 16px rgba(11,60,140,.34)}
.cl-btn--ghost{border-color:var(--cl-blue-d);color:var(--cl-blue-d)}
.cl-seg::before{
  background:linear-gradient(180deg,#a8241b,#74110c);
  box-shadow:0 3px 10px rgba(116,17,12,.55),inset 0 1px 0 rgba(255,255,255,.22)
}
.cl-seg__opt.is-on{color:#fff}

/* ---- cards float on the midnight page ---- */
.cl-panel,.cl-tick,.cl-wk,.cl-vs,.cl-prob,.cl-cal,.cl-lad,.cl-hero{border:1px solid var(--cl-line-d)}
.cl-art,.cl-legal__body,.cl-toc,.cl-page>section{box-shadow:0 20px 46px rgba(2,8,22,.55)}

/* ---- CORDILLERA: a ridge of blue peaks opens every article card ---- */
.cl-art{position:relative;overflow:hidden;padding-top:calc(clamp(20px,3.4vw,44px) + 16px)}
.cl-art::before{
  content:"";position:absolute;left:0;right:0;top:0;height:12px;pointer-events:none;
  background:
    linear-gradient(135deg,var(--cl-blue-d) 25%,transparent 25%) -11px 0/22px 12px repeat-x,
    linear-gradient(225deg,var(--cl-blue-d) 25%,transparent 25%) -11px 0/22px 12px repeat-x,
    var(--cl-red);
}

/* ---- LA ESTRELLA SOLITARIA: the section marker is a lone five-pointed star ---- */
.cl-art h2,.cl-legal__sec h2{padding-left:28px}
.cl-art h2::before,.cl-legal__sec h2::before{
  width:18px;height:18px;left:0;top:50%;bottom:auto;transform:translateY(-50%);
  border-width:0;border-style:none;border-radius:0;background:var(--cl-red);
  clip-path:polygon(50% 0%,61.8% 34.5%,98% 34.5%,69.1% 56%,80% 90.5%,50% 69%,20% 90.5%,30.9% 56%,2% 34.5%,38.2% 34.5%);
}
.cl-art h3::before{background:var(--cl-blue-d)}

/* ---- RULETA DE LA SUERTE: blue / red with a white star hub ---- */
.cl-wheel{
  background:conic-gradient(
    #0b3c8c 0 45deg,#d52b1e 45deg 90deg,#0b3c8c 90deg 135deg,#d52b1e 135deg 180deg,
    #0b3c8c 180deg 225deg,#d52b1e 225deg 270deg,#0b3c8c 270deg 315deg,#d52b1e 315deg 360deg);
}
.cl-wheel__seg span,.cl-wheel__seg:nth-child(2n) span{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65)}
.cl-wheel__seg--win span{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.9);font-size:14px;font-weight:900}
.cl-wheel-hub{background:radial-gradient(circle at 40% 34%,#1c3968,#081428);border-color:#fff}
.cl-wheel-hub .cl-cross{
  width:60%;height:60%;border:0;border-radius:0;transform:none;box-shadow:none;background:#fff;
  clip-path:polygon(50% 0%,61.8% 34.5%,98% 34.5%,69.1% 56%,80% 90.5%,50% 69%,20% 90.5%,30.9% 56%,2% 34.5%,38.2% 34.5%);
}
.cl-wheel-ptr{border-top-color:#fff}
.cl-ruota{background:linear-gradient(135deg,var(--cl-red-l),var(--cl-red));color:#fff;box-shadow:0 8px 22px rgba(213,43,30,.5)}
.cl-ruota__disc{
  border-color:#fff;
  background:#0b3c8c url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 61.8,34.5 98,34.5 69.1,56 80,90.5 50,69 20,90.5 30.9,56 2,34.5 38.2,34.5' fill='%23ffffff'/%3E%3C/svg%3E") center/62% no-repeat;
}
.cl-wheel-spin{background:linear-gradient(180deg,var(--cl-red-l),var(--cl-red));color:#fff}

/* ---- copy on the white cards ---- */
.cl-art p,.cl-art li,.cl-art ol li,.cl-bullets li,.cl-facts td,.cl-tw td{color:#2b3648}
.cl-art .cl-lead{color:#3d4a5e}
.cl-faq__a,.cl-legal__sec p,.cl-legal__sec li{color:#2b3648}
.cl-tw thead th:first-child,.cl-tw thead th{color:#eaf0fb}
.cl-hero__amt span{color:#ffffff}
.cl-rbar__v,.cl-rating__score{color:var(--cl-blue-d)}
.cl-art a:not(.cl-btn){color:var(--cl-blue-d)}
.cl-art a.cl-btn,
.cl-art a.cl-btn:hover,
.cl-art a.cl-btn:focus,
.cl-art a.cl-btn:focus-visible{color:#fff}
.cl-art ol li::before{background:var(--cl-blue-d)}

/* ---- chrome that sits OUTSIDE a card and inherits body colour ---- */
.cl-sec__t,.cl-sect__t{color:#eaf0fb}
.cl-cas-count{color:#93a3c0}
.cl-cas-count b{color:#eaf0fb}
.cl-page>h2,.cl-page>p{color:#dde5f4}
.cl-wins,.cl-wins__row{color:var(--cl-text)}
.cl-wins__row span{color:var(--cl-blue-d)}

/* ---- RIGHT RAIL (México ran it left) ---- */
.cl-shell{grid-template-columns:minmax(0,1fr) 330px}
.cl-shell__main{grid-column:1;grid-row:1}
.cl-rail{grid-column:2;grid-row:1}
@media (max-width:1180px){
  .cl-shell{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:860px){
  .cl-shell{grid-template-columns:minmax(0,1fr)}
  .cl-shell__main{grid-column:1}
  .cl-rail{grid-column:1;grid-row:2}
}
@media (max-width:560px){
  .cl-head__in{padding-left:calc(var(--cl-canton) + 8px)}
  :root{--cl-canton:58px}
  .cl-head__in::after{width:24px;height:24px;left:calc(var(--cl-canton)/2 - 12px)}
}
/* =========================================================================
   NEW MECHANIC 1 — "Calendario Promocional del Mes" (index)
   Chile's bonus material is unusually calendar-driven: the reload lands on
   FRIDAYS, the Bono Secreto on WEDNESDAYS, and the crypto top-up can be
   claimed once every 24 hours. Nothing in the family has been laid out on a
   real month grid before, so this one is a calendar.
   ========================================================================= */
.cl-cal{background:linear-gradient(165deg,var(--cl-navy-2),var(--cl-navy-lo));border-radius:18px;padding:22px 22px 20px;color:var(--cl-on-dark)}
.cl-cal__h{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:20px;font-weight:900;color:#fff}
.cl-cal__h .cl-ico{width:22px;height:22px;color:var(--cl-red-l)}
.cl-cal__d{margin:0 0 16px;font-size:14px;color:var(--cl-on-dark-mut);line-height:1.6}
.cl-cal__ctl{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;margin-bottom:16px}
.cl-cal__f{flex:1 1 260px;min-width:0}
.cl-cal__f>span{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--cl-on-dark-mut);margin-bottom:7px}
.cl-cal__f>span b{font-size:15px;color:#fff;letter-spacing:0;text-transform:none}
.cl-cal__f input[type=range]{width:100%}
.cl-cal__seg{display:flex;gap:4px;background:rgba(255,255,255,.07);padding:4px;border-radius:11px;flex:0 0 auto}
.cl-cal__seg button{padding:7px 11px;border-radius:8px;font-size:12.5px;font-weight:800;color:var(--cl-on-dark-mut);background:transparent;transition:.16s}
.cl-cal__seg button.is-on{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue-d));color:#fff;box-shadow:0 3px 10px rgba(11,60,140,.45)}
.cl-cal__chk{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--cl-on-dark);cursor:pointer}
.cl-cal__chk input{width:17px;height:17px;accent-color:var(--cl-red)}
.cl-cal__wd,.cl-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cl-cal__wd{margin-bottom:6px}
.cl-cal__wd span{text-align:center;font-size:11px;font-weight:800;letter-spacing:.7px;color:var(--cl-on-dark-mut)}
.cl-cal__cell{position:relative;min-height:60px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);padding:5px 6px;display:flex;flex-direction:column;gap:3px}
.cl-cal__cell.is-void{background:transparent;border-color:transparent}
.cl-cal__cell.is-hot{background:rgba(213,43,30,.16);border-color:rgba(235,65,51,.5)}
.cl-cal__cell.is-mid{background:rgba(30,95,208,.16);border-color:rgba(61,124,232,.45)}
.cl-cal__n{font-size:12px;font-weight:800;color:var(--cl-on-dark-mut)}
.cl-cal__cell.is-hot .cl-cal__n,.cl-cal__cell.is-mid .cl-cal__n{color:#fff}
.cl-cal__tag{font-size:9.5px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;padding:2px 5px;border-radius:5px;line-height:1.25}
.cl-cal__tag--v{background:var(--cl-red);color:#fff}
.cl-cal__tag--m{background:var(--cl-blue-d);color:#fff}
.cl-cal__tag--c{background:rgba(255,255,255,.20);color:#fff}
.cl-cal__legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin:14px 0 4px;font-size:12px;color:var(--cl-on-dark-mut)}
.cl-cal__legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.cl-cal__out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.cl-cal__kpi{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:11px 13px}
.cl-cal__kpi small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--cl-on-dark-mut);margin-bottom:4px}
.cl-cal__kpi b{font-size:19px;font-weight:900;color:#fff;display:block;line-height:1.2}
.cl-cal__kpi.is-off b{color:var(--cl-on-dark-mut)}
.cl-cal__note{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--cl-on-dark-mut);border-left:3px solid var(--cl-red);padding-left:12px}
@media (max-width:560px){
  .cl-cal{padding:18px 14px 16px}
  .cl-cal__cell{min-height:52px;padding:4px}
  .cl-cal__tag{font-size:8.5px;padding:1px 3px}
}

/* =========================================================================
   NEW MECHANIC 2 — "Dos Escaleras, Doce Meses" (index)
   The Chilean pages state two loyalty rates and one structural difference:
   the casino ladder KEEPS its progress, the sports ladder RESTARTS every
   calendar month. This runs both over a full year, month by month, so the
   difference stops being a sentence and becomes a shape.
   ========================================================================= */
.cl-lad{background:var(--cl-card);border-radius:18px;padding:22px 22px 20px;color:var(--cl-text)}
.cl-lad__h{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:20px;font-weight:900;color:var(--cl-text)}
.cl-lad__h .cl-ico{width:22px;height:22px;color:var(--cl-blue-d)}
.cl-lad__d{margin:0 0 16px;font-size:14px;color:var(--cl-muted);line-height:1.6}
.cl-lad__f>span{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--cl-muted);margin-bottom:7px}
.cl-lad__f>span b{font-size:16px;color:var(--cl-text);letter-spacing:0;text-transform:none}
.cl-lad__f input[type=range]{width:100%}
.cl-lad__tracks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.cl-lad__t{border:1px solid var(--cl-line);border-radius:14px;padding:14px;background:var(--cl-line-2)}
.cl-lad__t--cas{border-color:rgba(11,60,140,.35)}
.cl-lad__t--dep{border-color:rgba(213,43,30,.35)}
.cl-lad__tt{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.cl-lad__tt b{font-size:14px;font-weight:900;color:var(--cl-text)}
.cl-lad__pill{font-size:10px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;padding:3px 8px;border-radius:20px;color:#fff}
.cl-lad__t--cas .cl-lad__pill{background:var(--cl-blue-d)}
.cl-lad__t--dep .cl-lad__pill{background:var(--cl-red)}
.cl-lad__rate{font-size:12px;color:var(--cl-muted);margin:0 0 12px}
.cl-lad__bars{display:flex;align-items:stretch;gap:4px;height:104px;margin-bottom:8px}
.cl-lad__bar{flex:1;height:100%;position:relative;background:rgba(17,28,46,.10);border-radius:4px 4px 0 0;display:flex;align-items:flex-end;overflow:hidden}
.cl-lad__bar i{display:block;width:100%;border-radius:4px 4px 0 0;transition:height .35s cubic-bezier(.22,.61,.36,1)}
.cl-lad__t--cas .cl-lad__bar i{background:linear-gradient(180deg,var(--cl-blue-l),var(--cl-blue-d))}
.cl-lad__t--dep .cl-lad__bar i{background:linear-gradient(180deg,var(--cl-red-l),var(--cl-red))}
.cl-lad__mo{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;font-size:9px;font-weight:800;color:var(--cl-muted);text-align:center;margin-bottom:12px}
.cl-lad__rows{display:flex;flex-direction:column;gap:7px}
.cl-lad__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:var(--cl-muted)}
.cl-lad__row b{font-size:14px;font-weight:900;color:var(--cl-text)}
.cl-lad__row.is-key b{color:var(--cl-blue-d)}
.cl-lad__t--dep .cl-lad__row.is-key b{color:var(--cl-red)}
.cl-lad__verdict{margin-top:16px;border:1px solid var(--cl-line);border-left:4px solid var(--cl-blue-d);border-radius:12px;padding:13px 15px;font-size:13.5px;line-height:1.65;color:#2b3648;background:#fff}
.cl-lad__verdict b{color:var(--cl-text)}
.cl-lad__note{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--cl-muted)}
@media (max-width:760px){
  .cl-lad__tracks{grid-template-columns:1fr}
  .cl-lad{padding:18px 14px 16px}
}

/* =========================================================================
   MOBILE HERO FIT — the slide had a locked 1040/378 aspect-ratio, so on a
   phone the kicker + headline + subline + CTA did not fit inside it and
   spilled over the arrows and dots. Below 760px the slide grows with its
   content instead.
   ========================================================================= */
@media (max-width:760px){
  .cl-hero__slide{aspect-ratio:auto;min-height:210px}
  .cl-hero__c{max-width:100%;padding:18px 16px 42px}
  .cl-hero__kick{font-size:11.5px;letter-spacing:.6px;margin:0 0 5px;line-height:1.3}
  .cl-hero__amt{font-size:clamp(21px,6.2vw,30px);line-height:1.14}
  .cl-hero__sub{font-size:11.5px;letter-spacing:.2px;line-height:1.35;margin:7px 0 14px;text-transform:none}
  .cl-hero__c .cl-btn{height:auto;min-height:42px;padding:9px 18px;font-size:14px;border-radius:11px;
    white-space:normal;line-height:1.2;text-align:center;max-width:100%}
  .cl-hero__arw{display:none}
  .cl-hero__dots{bottom:12px}
}
@media (max-width:400px){
  .cl-hero__slide{min-height:190px}
  .cl-hero__amt{font-size:clamp(19px,6.6vw,25px)}
  .cl-hero__c{padding:15px 13px 40px}
}