/* CasinoGcash design system v2 - white theme, GamesHub-style, Philippine logo palette */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600&display=swap');

:root{
  --bg:#FFFFFF; --hero:#F3F4F7; --ink:#10162B; --navy:#14224F; --navy-deep:#0F1733;
  --muted:#5A6072; --line:#E4E6EE; --cta:#F15A29; --cta-dark:#D6481C;
  --gold:#F4B821; --red:#D62B27; --ok:#1F9D55; --no:#D62B27; --maxw:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Source Sans 3',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header:after{content:"";display:block;height:3px;background:var(--cta)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.site-header .logo img{height:40px;width:auto}
.nav{display:flex;gap:30px;align-items:center}
.nav a{color:var(--ink);font-family:'Sora',sans-serif;font-weight:600;font-size:15px;letter-spacing:.1px}
.nav a:hover{color:var(--cta)}
@media(max-width:880px){.nav{display:none}}

.page-hero{background:var(--hero)}
.page-hero .wrap{display:block;padding:48px 22px 52px}

.hero-text{max-width:940px}
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:16px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--cta)}
h1{font-family:'Sora',sans-serif;font-weight:800;color:var(--navy);
  font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.8px;margin-bottom:16px}
.intro{font-size:18px;color:#2C3142;max-width:680px}
.intro strong{color:var(--navy)}
.byline{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:24px}
.byline .who{display:flex;align-items:center;gap:12px}
.byline img{height:48px;width:48px;border-radius:50%;object-fit:cover}
.byline .lbl{font-size:13px;color:var(--muted)}
.byline .nm{font-family:'Sora',sans-serif;font-weight:700;color:var(--ink);font-size:15px}
.disclaimer{margin-top:22px;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:13px 18px;font-size:14px;color:var(--muted);max-width:680px;display:flex;gap:10px;align-items:flex-start}
.disclaimer:before{content:"\24D8";color:var(--ink);font-size:17px;line-height:1.4}
.disclaimer b{color:var(--ink)}


.article{padding:50px 0 64px}
.article .wrap{max-width:1320px}
.article h2{font-family:'Sora',sans-serif;font-weight:800;color:var(--navy);
  font-size:clamp(23px,2.9vw,32px);margin:46px 0 14px;line-height:1.18;letter-spacing:-.4px}
.article h2:first-child{margin-top:0}
.article h3{font-family:'Sora',sans-serif;font-weight:700;color:var(--ink);font-size:20px;margin:28px 0 8px}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 18px 22px}
.article li{margin-bottom:9px}
.article a{color:var(--cta);font-weight:600}
.article a:hover{color:var(--cta-dark);text-decoration:underline}
.article strong{color:var(--navy)}
.article table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:15px}
.article th{background:var(--navy);color:#fff;font-family:'Sora',sans-serif;font-weight:600;text-align:left;padding:12px 14px}
.article td{padding:12px 14px;border-bottom:1px solid var(--line)}
.article tbody tr:nth-child(even){background:var(--hero)}

.brandlist{margin:26px 0 32px;display:flex;flex-direction:column;gap:16px}
.brand-row{display:grid;grid-template-columns:58px 150px 1fr 112px 1.8fr 168px;align-items:center;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 20px rgba(15,23,51,.06);
  padding:0 22px 0 0;overflow:hidden;position:relative}
.brand-row .ranknum{align-self:stretch;background:var(--navy-deep);color:#fff;
  font-family:'Sora',sans-serif;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center}
.brand-row .logo-cell{height:60px;display:flex;align-items:center;justify-content:center;background:var(--navy-deep);border-radius:10px;padding:9px 14px}
.brand-row .logo-cell img{max-height:38px;max-width:100%;width:auto;object-fit:contain}
.brand-row .name{font-family:'Sora',sans-serif;font-weight:700;font-size:18px;color:var(--ink)}
.brand-row .name small{display:block;font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.brand-row .score{border:1px solid var(--line);border-radius:9px;padding:10px 6px;text-align:center;background:#fff}
.brand-row .score .lbl{font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:600;text-transform:uppercase;display:block}
.brand-row .score .num{font-family:'Sora',sans-serif;font-weight:800;font-size:24px;color:var(--cta);line-height:1.1}
.brand-row .bonus{background:var(--hero);border-radius:9px;padding:14px 18px;text-align:center;
  font-family:'Sora',sans-serif;font-weight:700;font-size:16px;color:var(--ink)}
.brand-row .actions{display:flex;flex-direction:column;gap:8px;padding:14px 0}
.btn-cta{display:block;text-align:center;background:var(--cta);color:#fff;font-family:'Sora',sans-serif;
  font-weight:700;font-size:15px;padding:14px 16px;border-radius:9px;letter-spacing:.3px;transition:background .15s}
.btn-cta:hover{background:var(--cta-dark);color:#fff;text-decoration:none}
.article a.btn-cta{color:#fff}
.article a.btn-cta:hover{color:#fff;text-decoration:none}
.article a.btn-review{color:var(--muted)}
.article a.btn-review:hover{color:var(--cta)}
.verdict .v-off a.btn-cta,.article .verdict a.btn-cta{color:#fff}
.btn-review{display:block;text-align:center;font-family:'Sora',sans-serif;font-weight:600;font-size:13px;color:var(--muted)}
.btn-review:hover{color:var(--cta)}
@media(max-width:860px){
  .brand-row{grid-template-columns:48px 1fr 96px;gap:14px;padding:0 16px 16px 0}
  .brand-row .ranknum{grid-row:1/4}
  .brand-row .logo-cell{grid-column:2;grid-row:1;width:130px;height:54px;margin-top:14px}
  .brand-row .name{grid-column:2;grid-row:2}
  .brand-row .score{grid-column:3;grid-row:1/3;align-self:center;margin-top:10px}
  .brand-row .bonus{grid-column:2/4;grid-row:3}
  .brand-row .actions{grid-column:2/4;grid-row:4;flex-direction:row}
  .brand-row .actions a{flex:1}
}

.review-top{display:grid;grid-template-columns:1fr 320px;gap:30px;margin:6px 0 26px;align-items:start}
@media(max-width:880px){.review-top{grid-template-columns:1fr}}
.review-main .rl{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.review-main .rl .logo-cell{height:72px;width:160px;background:var(--navy-deep);border-radius:12px;
  display:flex;align-items:center;justify-content:center;padding:12px}
.review-main .rl .logo-cell img{max-height:44px;max-width:86%;object-fit:contain}
.proscons{display:grid;grid-template-columns:1fr 1fr;background:var(--hero);border-radius:12px;overflow:hidden;margin:0 0 14px;align-items:start}
@media(max-width:620px){.proscons{grid-template-columns:1fr}}
.proscons>div{padding:18px 22px}
.proscons h4{font-family:'Sora',sans-serif;font-size:14px;margin-bottom:12px;color:var(--ink);text-transform:uppercase;letter-spacing:.6px}
.proscons ul{list-style:none;margin:0}
.proscons li{margin-bottom:10px;padding-left:26px;position:relative;font-size:15.5px}
.proscons .pros li:before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:800}
.proscons .cons li:before{content:"\2717";position:absolute;left:0;color:var(--no);font-weight:800}
.verdict{background:var(--navy-deep);border-radius:14px;overflow:hidden;align-self:start;position:static}
.verdict .v-top{padding:24px;color:#fff}
.verdict .v-top .lbl{font-family:'Sora',sans-serif;font-weight:700;font-size:16px;margin-bottom:6px}
.verdict .v-top .score{font-family:'Sora',sans-serif;font-weight:800;font-size:50px;line-height:1;color:var(--cta)}
.verdict .v-top .score span{font-size:18px;color:#fff;opacity:.6;font-weight:600}
.verdict .v-off{background:rgba(255,255,255,.06);padding:22px 24px;color:#fff}
.verdict .v-off .lbl{font-size:13px;opacity:.75;margin-bottom:6px}
.verdict .v-off .big{font-family:'Sora',sans-serif;font-weight:700;font-size:19px;line-height:1.3;margin-bottom:16px}
.verdict .v-off .btn-cta{width:100%}
.keyfeat{border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-top:18px;background:#fff}
.keyfeat h3{font-family:'Sora',sans-serif;font-weight:800;color:var(--navy);font-size:19px;margin-bottom:8px}
.keyfeat .kf{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.keyfeat .kf:last-child{border-bottom:none}
.keyfeat dt{color:var(--muted)}
.keyfeat dd{text-align:right;font-weight:600;color:var(--ink);max-width:62%}

.site-footer{background:var(--hero);color:var(--muted);margin-top:64px;padding:42px 0 34px;font-size:14px;border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.site-footer img{height:34px;margin-bottom:10px}
.site-footer a{color:var(--ink);font-family:'Sora',sans-serif;font-weight:600}
.site-footer a:hover{color:var(--cta)}
.site-footer .fnav{display:flex;gap:22px;flex-wrap:wrap}
.site-footer .legal{width:100%;border-top:1px solid var(--line);margin-top:26px;padding-top:20px;font-size:12.5px;color:var(--muted);line-height:1.7}
.disclosure{font-size:13.5px;color:var(--muted);font-style:italic;margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}

/* ---- Mobile navigation ---- */
.navtoggle{display:none}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin:-8px}
.hamburger span{width:24px;height:3px;background:var(--navy);border-radius:2px;transition:.2s}
@media(max-width:880px){
  .hamburger{display:flex}
  .site-header .wrap{position:relative}
  .nav{display:flex;flex-direction:column;gap:0;position:absolute;top:78px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(15,23,51,.10);
    max-height:0;overflow:hidden;transition:max-height .25s ease;z-index:60}
  .nav a{padding:15px 22px;border-bottom:1px solid var(--line);font-size:16px;width:100%}
  .nav a:last-child{border-bottom:none}
  .navtoggle:checked ~ .nav{max-height:70vh;overflow:auto}
  .navtoggle:checked ~ .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .navtoggle:checked ~ .hamburger span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .page-hero .wrap{padding:30px 16px 36px}
  h1{font-size:clamp(25px,7vw,34px)}
  .byline{gap:18px}
  .article{padding:36px 0 48px}
  .review-top{gap:22px}
}




/* ---- Mini reviews (reference design: verdict + key-features boxes on the right) ---- */
.minireview{border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin:18px 0;background:#fff;box-shadow:0 6px 18px rgba(15,23,51,.05)}
.minireview>h3{font-family:'Sora',sans-serif;font-weight:800;color:var(--cta);font-size:22px;margin:0 0 16px}
.mr-grid{display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:start}
@media(max-width:860px){.mr-grid{grid-template-columns:1fr}}
.mr-left{min-width:0}
.mr-left .mr-lead{color:#33384a;font-size:15.5px;line-height:1.7;margin:0 0 18px}
.minireview .proscons{margin:0}
.mr-side{min-width:0}
.minireview .verdict{margin:0}
.minireview .verdict .v-top{padding:20px 22px}
.minireview .verdict .v-top .score{font-size:42px}
.minireview .verdict .v-off{padding:18px 22px}
.minireview .verdict .v-off .big{font-size:17px;margin-bottom:14px}
.minireview .keyfeat{margin-top:16px;padding:20px 22px}
.minireview .keyfeat h3{font-size:17px;margin-bottom:6px}
.minireview .keyfeat .kf{padding:11px 0;font-size:14px}

/* Mini-review "bottom line" paragraph */
.mr-extra{margin:14px 0 0;padding:14px 16px;background:var(--hero);border-left:3px solid var(--cta);border-radius:6px;font-size:15px;color:#33384a;line-height:1.6}
.mr-extra strong{color:var(--navy);font-family:'Sora',sans-serif}