:root{--g:#064e3b;--g2:#033a2c;--e:#087f5b;--gold:#f5c542;--ink:#101814;--paper:#f7faf8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#06130f;color:#eaf6ef;line-height:1.65}a{color:inherit}.wrap{max-width:1180px;margin:auto;padding:0 20px}.top{position:sticky;top:0;z-index:50;background:rgba(3,30,22,.96);border-bottom:1px solid #275b49;backdrop-filter:blur(10px)}.nav{display:flex;align-items:center;gap:18px;min-height:72px}.brand{font-size:27px;font-weight:800;text-decoration:none;white-space:nowrap}.brand b{color:var(--gold)}.links{display:flex;gap:16px;margin-left:auto;align-items:center}.links a{text-decoration:none;font-size:14px}.btn{display:inline-block;background:var(--gold);color:#12251e;padding:11px 17px;border-radius:9px;font-weight:800;text-decoration:none}.btn.alt{background:#0c8d5c;color:white}.hero{padding:34px 0 24px}.hero img{width:100%;border-radius:18px;border:1px solid #34614f;box-shadow:0 20px 50px #0008}.crumb{font-size:13px;color:#a9c6ba;margin-top:22px}.content{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;padding:20px 0 60px}.article{background:#f7faf8;color:#17251f;border-radius:18px;padding:34px}.article h1,.article h2,.article h3{line-height:1.2;color:#073c2e}.article h1{font-size:38px}.article h2{margin-top:34px;font-size:27px;border-bottom:2px solid #e3b72f;padding-bottom:8px}.article h3{margin-top:24px}.article a{color:#066b4a}.article table{width:100%;border-collapse:collapse;display:block;overflow:auto}.article th,.article td{padding:10px;border:1px solid #cddbd5;text-align:left;white-space:nowrap}.article blockquote{margin:20px 0;padding:14px 18px;background:#fff4cf;border-left:4px solid var(--gold)}.side{position:sticky;top:92px;height:max-content;background:#0b2a20;border:1px solid #275b49;border-radius:16px;padding:20px}.side h3{margin-top:0;color:var(--gold)}.side a{display:block;margin:9px 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:#fff;border:1px solid #d6e2dd;border-radius:12px;padding:18px;color:#17251f}.rank{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f5c542;font-weight:900}.notice{background:#102f25;border:1px solid #3f715f;padding:18px;border-radius:12px}.footer{background:#020b08;border-top:1px solid #21483a;padding:34px 0;color:#b9cdc5}.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.footer a{display:block;margin:7px 0;text-decoration:none}.mobilebar{display:none}.pill{display:inline-block;padding:5px 10px;border-radius:99px;background:#e6f3ed;color:#07543d;margin:3px;font-size:13px}@media(max-width:850px){.links{display:none}.content{grid-template-columns:1fr}.side{position:static}.article{padding:22px}.article h1{font-size:31px}.cards{grid-template-columns:1fr}.footergrid{grid-template-columns:1fr}.mobilebar{display:flex;position:fixed;z-index:60;bottom:0;left:0;right:0;background:#06251b;padding:10px;gap:8px}.mobilebar a{flex:1;text-align:center}.footer{padding-bottom:85px}}

/* ===== Modern UI Enhancement Layer ===== */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --glow:0 0 0 1px rgba(245,197,66,.16),0 18px 50px rgba(0,0,0,.28);
}
body{overflow-x:hidden;background:
radial-gradient(circle at 18% -10%,rgba(8,127,91,.18),transparent 35%),
radial-gradient(circle at 85% 10%,rgba(245,197,66,.08),transparent 30%),#06130f}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,black,transparent 75%)}
.top{transition:background .35s var(--ease-soft),box-shadow .35s var(--ease-soft),border-color .35s var(--ease-soft)}
.top.scrolled{background:rgba(2,20,15,.9);border-bottom-color:rgba(245,197,66,.25);box-shadow:0 12px 36px rgba(0,0,0,.28)}
.brand{transition:transform .28s var(--ease-out),filter .28s ease}.brand:hover{transform:translateY(-2px);filter:drop-shadow(0 0 14px rgba(245,197,66,.3))}
.links a:not(.btn){position:relative;padding:7px 0;transition:color .25s ease,transform .25s var(--ease-out)}
.links a:not(.btn):after{content:"";position:absolute;left:50%;right:50%;bottom:1px;height:2px;border-radius:4px;background:linear-gradient(90deg,var(--gold),#fff0a8);transition:left .28s var(--ease-out),right .28s var(--ease-out)}
.links a:not(.btn):hover{color:var(--gold);transform:translateY(-1px)}.links a:not(.btn):hover:after{left:0;right:0}
.btn{position:relative;overflow:hidden;isolation:isolate;transform:translateZ(0);box-shadow:0 9px 22px rgba(245,197,66,.12);transition:transform .25s var(--ease-out),box-shadow .25s ease,filter .25s ease}
.btn:before{content:"";position:absolute;inset:-1px;z-index:-1;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.58) 42%,transparent 62%);transform:translateX(-140%);transition:transform .65s var(--ease-out)}
.btn:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 14px 32px rgba(245,197,66,.25);filter:saturate(1.08)}.btn:hover:before{transform:translateX(140%)}.btn:active{transform:translateY(-1px) scale(.99)}
.btn.alt{box-shadow:0 9px 22px rgba(12,141,92,.16)}.btn.alt:hover{box-shadow:0 14px 32px rgba(12,141,92,.28)}
.hero{perspective:1200px}.hero img{transform:translateZ(0);transition:transform .65s var(--ease-out),box-shadow .65s var(--ease-out),border-color .35s ease;will-change:transform}.hero:hover img{transform:translateY(-5px) scale(1.008);box-shadow:0 30px 70px rgba(0,0,0,.52),0 0 0 1px rgba(245,197,66,.16);border-color:rgba(245,197,66,.5)}
.crumb a{transition:color .2s ease}.crumb a:hover{color:var(--gold)}
.article{box-shadow:0 18px 55px rgba(0,0,0,.16);transition:box-shadow .35s ease}.article:hover{box-shadow:0 24px 70px rgba(0,0,0,.22)}
.article h1{background:linear-gradient(90deg,#073c2e,#087f5b 72%,#9c7713);-webkit-background-clip:text;background-clip:text;color:transparent}
.article h2{position:relative;border-bottom:0;padding-bottom:13px}.article h2:after{content:"";position:absolute;left:0;bottom:0;width:78px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--gold),#087f5b);transition:width .45s var(--ease-out)}.article h2:hover:after{width:150px}
.article a{font-weight:700;text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}.article a:hover{color:#0a9467;text-decoration-color:var(--gold)}
.cards{perspective:1200px}.card{position:relative;overflow:hidden;box-shadow:0 8px 25px rgba(4,56,40,.08);transition:transform .35s var(--ease-out),box-shadow .35s ease,border-color .35s ease}.card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,127,91,.05),transparent 45%,rgba(245,197,66,.09));opacity:0;transition:opacity .3s ease}.card:hover{transform:translateY(-8px);box-shadow:0 18px 42px rgba(4,56,40,.18);border-color:rgba(8,127,91,.35)}.card:hover:before{opacity:1}.card>*{position:relative;z-index:1}
.side{overflow:hidden;box-shadow:var(--glow);transition:transform .35s var(--ease-out),box-shadow .35s ease,border-color .35s ease}.side:before{content:"";position:absolute;inset:-80% -30%;pointer-events:none;background:conic-gradient(from 100deg,transparent,rgba(245,197,66,.08),transparent 22%);animation:sideGlow 12s linear infinite}.side>*{position:relative}.side:hover{transform:translateY(-5px);border-color:rgba(245,197,66,.38);box-shadow:0 24px 58px rgba(0,0,0,.35),0 0 34px rgba(245,197,66,.08)}
@keyframes sideGlow{to{transform:rotate(360deg)}}
.notice{position:relative;overflow:hidden;transition:border-color .3s ease,transform .3s var(--ease-out),box-shadow .3s ease}.notice:hover{transform:translateY(-3px);border-color:rgba(245,197,66,.55);box-shadow:0 12px 28px rgba(0,0,0,.16)}
.rank{box-shadow:0 4px 14px rgba(245,197,66,.25);transition:transform .3s var(--ease-out),box-shadow .3s ease}.rank:hover{transform:rotate(-8deg) scale(1.12);box-shadow:0 8px 20px rgba(245,197,66,.38)}
.article tbody tr{transition:background .2s ease,transform .2s var(--ease-out)}.article tbody tr:hover{background:#edf8f3;transform:translateX(3px)}
.footer a{transition:color .2s ease,transform .2s var(--ease-out)}.footer a:hover{color:var(--gold);transform:translateX(4px)}
.pill{transition:transform .25s var(--ease-out),background .25s ease}.pill:hover{transform:translateY(-2px);background:#d8f3e8}

/* Scroll reveal */
.reveal-ready{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal-ready.revealed{opacity:1;transform:none}
.reveal-ready:nth-child(2){transition-delay:.05s}.reveal-ready:nth-child(3){transition-delay:.1s}

/* Reading progress */
#reading-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;background:linear-gradient(90deg,#12c77b,var(--gold));box-shadow:0 0 12px rgba(245,197,66,.55);transition:width .08s linear;pointer-events:none}

/* Back to top */
#back-to-top{position:fixed;right:20px;bottom:24px;width:46px;height:46px;border:1px solid rgba(245,197,66,.4);border-radius:50%;background:rgba(3,42,31,.9);color:var(--gold);display:grid;place-items:center;font-size:22px;cursor:pointer;z-index:70;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(12px);transition:.28s var(--ease-out);backdrop-filter:blur(10px)}#back-to-top.show{opacity:1;visibility:visible;transform:none}#back-to-top:hover{transform:translateY(-4px);background:#0a573f}

/* Mobile menu */
.menu-toggle{display:none;margin-left:auto;width:46px;height:42px;border-radius:10px;border:1px solid #356553;background:#08281e;color:#fff;cursor:pointer;font-size:22px}.mobile-nav{display:none}
@media(max-width:850px){
  .nav{min-height:64px}.menu-toggle{display:grid;place-items:center}.links{display:none!important}
  .mobile-nav{position:fixed;z-index:90;top:64px;left:12px;right:12px;padding:14px;background:rgba(3,30,22,.97);border:1px solid rgba(245,197,66,.25);border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.5);backdrop-filter:blur(16px);transform:translateY(-12px) scale(.98);opacity:0;visibility:hidden;transition:.28s var(--ease-out)}
  .mobile-nav.open{display:block;opacity:1;visibility:visible;transform:none}.mobile-nav a{display:block;text-decoration:none;padding:11px 12px;border-radius:10px}.mobile-nav a:hover{background:#0b382a;color:var(--gold)}
  .mobile-nav .mobile-nav-cta{margin-top:8px;background:linear-gradient(135deg,#0c8d5c,#0b6c4b);color:#fff;text-align:center;font-weight:800}
  #back-to-top{bottom:84px;right:14px}.hero{padding-top:24px}.hero img{border-radius:14px}.hero:hover img{transform:none}
  .article tbody tr:hover{transform:none}.card:hover,.side:hover{transform:none}.mobilebar{box-shadow:0 -10px 32px rgba(0,0,0,.28);border-top:1px solid rgba(245,197,66,.18);backdrop-filter:blur(12px);background:rgba(6,37,27,.94)}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}.reveal-ready{opacity:1!important;transform:none!important}.hero img{transform:none!important}}

/* Official CricketApp.org logo */
.brand-logo{display:inline-flex;align-items:center;line-height:0;max-width:310px}
.brand-logo img{display:block;width:auto;height:48px;max-width:100%;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.24));transition:transform .28s var(--ease-out),filter .28s ease}
.brand-logo:hover img{transform:translateY(-2px) scale(1.015);filter:drop-shadow(0 8px 18px rgba(245,197,66,.22))}
.footer-logo{max-width:270px;margin-bottom:12px}
.footer-logo img{height:44px}
@media(max-width:850px){.brand-logo{max-width:235px}.brand-logo img{height:39px}.footer-logo img{height:40px}}
@media(max-width:420px){.brand-logo{max-width:205px}.brand-logo img{height:34px}}

/* ===== CricketApp.org final logo placement =====
   Adjust these two values to resize the logo site-wide without editing HTML. */
:root{
  --header-logo-width: 255px;
  --footer-logo-width: 225px;
}
.nav .header-logo{
  flex:0 0 auto;
  width:var(--header-logo-width);
  max-width:min(34vw,var(--header-logo-width));
  height:auto;
  margin-right:10px;
}
.nav .header-logo img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}
.footer-logo{
  display:inline-flex;
  width:var(--footer-logo-width);
  max-width:100%;
  height:auto;
  margin:0 0 14px;
}
.footer-logo img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}
.footer-description{
  max-width:560px;
  margin:0 0 10px;
  color:#d6e4de;
  font-size:14px;
  line-height:1.7;
}
.footer-disclosure{
  max-width:590px;
  margin:0;
  color:#9fb8ae;
  font-size:12.5px;
  line-height:1.65;
}
.footer-disclosure strong{color:#e8f2ee}
@media(max-width:1050px){
  :root{--header-logo-width:225px;--footer-logo-width:215px}
  .nav .header-logo{max-width:31vw}
}
@media(max-width:850px){
  :root{--header-logo-width:205px;--footer-logo-width:205px}
  .nav .header-logo{max-width:calc(100vw - 92px);margin-right:0}
  .nav .header-logo img,.footer-logo img{height:auto}
}
@media(max-width:420px){
  :root{--header-logo-width:178px;--footer-logo-width:190px}
  .nav .header-logo{max-width:calc(100vw - 82px)}
}

/* Top Casino Apps 2026 comparison */
.casino-table-wrap{overflow-x:auto;margin:22px 0;border:1px solid rgba(214,169,40,.32);border-radius:16px;background:rgba(2,32,24,.58)}
.casino-table{width:100%;border-collapse:collapse;min-width:780px}.casino-table th,.casino-table td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}.casino-table th{color:#f5c542;background:rgba(0,0,0,.22)}.casino-table tr:last-child td{border-bottom:0}.casino-table .rank1{background:rgba(214,169,40,.08)}
.operator-card{margin:26px 0;padding:24px;border:1px solid rgba(214,169,40,.28);border-radius:18px;background:linear-gradient(145deg,rgba(6,78,59,.48),rgba(1,28,21,.74));box-shadow:0 12px 30px rgba(0,0,0,.18);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.operator-card:hover{transform:translateY(-3px);border-color:rgba(245,197,66,.62);box-shadow:0 18px 38px rgba(0,0,0,.26)}
.operator-card.featured{border-color:#d6a928;background:linear-gradient(145deg,rgba(9,96,66,.62),rgba(43,35,3,.36))}.operator-card h2{margin-top:0}.operator-meta{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 16px}.operator-meta span{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:.88rem}.operator-link{display:inline-block;margin-top:10px}.checklist{columns:2;column-gap:32px}.checklist li{break-inside:avoid;margin-bottom:8px}@media(max-width:700px){.operator-card{padding:18px}.checklist{columns:1}}