/* ==========================================================================
   Diwa Top - divatop.org
   Layout, widths, radii and component anatomy follow the measured ALL DIWA GAME
   (Appyn) reference. Palette and type are this site's own.
   ========================================================================== */

:root{
  /* palette: marigold accent, dark ink on accent fills (7.64:1) */
  --accent:#ef8f12;
  --accent-d:#d6780a;
  --accent-ink:#17120a;
  --accent-link:#9a5200;        /* 5.86:1 on white */
  --page:#e6e9ef;
  --card:#fff;
  --ink:#4c4c4c;
  --ink-strong:#333;
  --ink-title:#444;
  --meta:#6f6f6f;               /* reference uses #a7a7a7; darkened for AA */
  --muted:#ababab;
  --head:#1d222d;
  --head-deep:#13161d;
  --line:#eaeaea;
  --shadow:2px 2px 2px 0 #e3e3e3;
  --green:#5edd1f;
  --green-d:#4ab814;
  --tg:#006fa7;

  /* radius system: 20 cards/boxes/buttons, 50 pills, 25 app icon */
  --r:20px;
  --r-pill:50px;
  --r-icon:25px;

  --measure:1260px;             /* 1220 inner at 20px padding -> 147px grid cells */
  --side:300px;
  --gap:38px;

  --f-body:'Figtree','Open Sans',system-ui,sans-serif;
  --f-disp:'Sora','Figtree',system-ui,sans-serif;
  --t:200ms cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:400 13px/25px var(--f-body);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent-link);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--accent-d)}
button{font:inherit}
.ic{flex:0 0 auto;display:block}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:var(--accent-ink);padding:10px 18px;border-radius:0 0 var(--r) 0;font-weight:600}
.skip:focus{left:0}

/* ----------------------------------------------------- shared measure (D1/C11)
   Header, content, footer and the disclaimer band all use .container, so every
   bounded block shares one pair of vertical edges. */
.container{width:100%;max-width:var(--measure);margin:0 auto;padding:0 20px;
  display:flex;align-items:flex-start;gap:var(--gap)}
.container.is-block{display:block}

/* ------------------------------------------------------------------- header */
.site-head{background:var(--head);border-bottom:2px solid var(--accent);
  position:sticky;top:0;z-index:60}
.head-in{height:60px;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:44px;width:auto;object-fit:contain}

.site-nav ul{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.site-nav a{display:block;padding:8px 13px;border-radius:var(--r-pill);color:#d7dae2;
  font-size:13px;font-weight:600;cursor:pointer;transition:background var(--t),color var(--t)}
.site-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.site-nav a.is-active{background:var(--accent);color:var(--accent-ink)}
.nav-cta a{background:rgba(239,143,18,.16);color:#ffc877}
.nav-cta a.is-active{background:var(--accent);color:var(--accent-ink)}

.nav-tog{display:none;background:none;border:0;color:#fff;padding:6px;cursor:pointer}
.nav-tog-close{display:none}
.nav-tog[aria-expanded="true"] .nav-tog-open{display:none}
.nav-tog[aria-expanded="true"] .nav-tog-close{display:block}

/* --------------------------------------------------------------------- hero */
.hero{position:relative;background:#000;padding:90px 0 40px;overflow:hidden}
.hero .imgbg{position:absolute;inset:0;pointer-events:none}
.hero .imgbg img{width:120%;max-width:none;height:100%;object-fit:cover;opacity:.3;
  position:absolute;left:-10%;top:0}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 45%,rgba(0,0,0,.82),rgba(0,0,0,.35) 70%,rgba(0,0,0,.6))}
.hero .container{position:relative;z-index:2;justify-content:center}
.subcontainer{width:100%;max-width:730px;text-align:center;color:#fff}
.hero h1{font:300 40px/46px var(--f-disp);margin:0 0 8px;color:#fff}
.hero h2{font:300 16px/30px var(--f-body);margin:0 0 22px;color:#e4e6ea}

.search-box{max-width:600px;margin:0 auto;display:flex;gap:8px}
.search-box input{flex:1 1 auto;height:44px;border:0;border-radius:var(--r-pill);
  background:#f2f2f2;font:400 16px/44px var(--f-body);color:#333;padding:0 20px;min-width:0}
.search-box input::placeholder{color:#767676}
.search-box button{width:70px;height:44px;border:0;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background var(--t),transform var(--t)}
.search-box button:hover{background:#ffa42c}
.search-box button:active{transform:translateY(1px)}

.cat-row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:26px 0 0}
.cat-row a{display:flex;flex-direction:column;align-items:center;gap:7px;width:66px;
  color:#e4e6ea;font-size:11px;line-height:14px;font-weight:600;cursor:pointer}
.cat-row .ci{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;opacity:.5;color:#fff;transition:opacity var(--t),transform var(--t)}
.cat-row a:hover{color:#fff}
.cat-row a:hover .ci{opacity:1;transform:translateY(-2px)}

/* search result count for the live filter */
.filter-note{display:none;margin:0 0 14px;padding:10px 16px;background:#fff;
  border-radius:var(--r);box-shadow:var(--shadow);font-weight:600;color:var(--ink-strong)}
.filter-note.on{display:block}

/* ----------------------------------------------------------------- sections */
.sections{padding:20px 0 30px}
.main-col{flex:1 1 auto;min-width:0}

.title-section{font:400 22px/30px var(--f-disp);color:var(--ink-strong);
  margin:3px 10px 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.title-section a{float:right;font:600 12px/30px var(--f-body);color:var(--accent-link)}

/* 6-column grid, 147px cells at the 1220px measure */
.grid{display:grid;grid-template-columns:repeat(6,1fr);margin:0 0 18px}
.grid.grid-3{grid-template-columns:repeat(3,1fr)}

.bav1{padding:10px}
.bav1-in{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  border-bottom:2px solid var(--accent);overflow:hidden;height:100%;
  transition:transform var(--t),box-shadow var(--t)}
.bav1-in:hover{transform:translateY(-3px);box-shadow:3px 4px 10px 0 #d8dbe2}
.bav1-img{display:block;padding:15px 15px 8px;cursor:pointer}
.bav1-img img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:#f2f3f6}
.bav1-meta{padding:0 15px 13px;display:flex;flex-direction:column}
.bav1-t{margin:0;font:600 14px/20px var(--f-body)}
.bav1-t a{color:var(--ink-title);display:block;height:20px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.bav1-t a:hover{color:var(--accent-link)}
.bav1-m{font:400 12px/18px var(--f-body);color:var(--meta);height:18px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.bav2{padding:10px}
.bav2-in{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  border-bottom:2px solid var(--accent);padding:15px;display:flex;gap:14px;height:100%;
  transition:transform var(--t),box-shadow var(--t)}
.bav2-in:hover{transform:translateY(-3px);box-shadow:3px 4px 10px 0 #d8dbe2}
.bav2-img{flex:0 0 90px;cursor:pointer}
.bav2-img img{width:90px;height:90px;object-fit:cover;border-radius:var(--r);background:#f2f3f6}
.bav2-meta{min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.bav2-t{margin:0;font:600 15px/21px var(--f-body)}
.bav2-t a{color:var(--ink-title);cursor:pointer}
.bav2-t a:hover{color:var(--accent-link)}
.bav2-m{font:600 12px/18px var(--f-body);color:var(--accent-link)}
.bav2-sub{font:400 12px/17px var(--f-body);color:var(--meta);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bav2-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  font:700 11px/16px var(--f-body);color:var(--ink-strong);text-transform:uppercase;
  letter-spacing:.04em;cursor:pointer;padding:6px 0 2px;
  transition:color var(--t),gap var(--t)}
.bav2-cta:hover{color:var(--accent-link);gap:9px}
.bav2-cta-ic{transform:rotate(-90deg)}

.more-wrap{text-align:center;margin:6px 0 10px}
.view-more{display:inline-block;width:225px;line-height:40px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);font:700 13px/40px var(--f-body);
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
  transition:background var(--t),transform var(--t)}
.view-more:hover{background:#ffa42c;color:var(--accent-ink)}
.view-more:active{transform:translateY(1px)}

/* ------------------------------------------------------------------ sidebar */
.sidebar{flex:0 0 var(--side);width:var(--side);position:sticky;top:80px;align-self:flex-start}
.widget{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:20px 25px;margin:0 0 20px}
.box-title{font:700 17px/22px var(--f-body);text-transform:uppercase;color:var(--muted);
  letter-spacing:.03em;margin:0 0 14px;position:relative;padding-bottom:10px}
.box-title::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;
  background:var(--accent)}

.side-search{display:flex;gap:8px}
.side-q{flex:1 1 auto;min-width:0;height:38px;border:1px solid #dcdfe6;border-radius:var(--r-pill);
  background:#f7f8fa;padding:0 16px;font:400 13px/38px var(--f-body);color:#333}
.side-q::placeholder{color:#767676}
.side-btn{flex:0 0 46px;height:38px;border:0;border-radius:var(--r-pill);background:var(--accent);
  color:var(--accent-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--t)}
.side-btn:hover{background:#ffa42c}

.side-list{list-style:none;margin:0;padding:0}
.side-list li+li{border-top:1px solid var(--line)}
.side-list a{display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;
  column-gap:12px;align-items:center;padding:10px 0;cursor:pointer}
.side-list img{grid-row:1/3;width:46px;height:46px;border-radius:12px;object-fit:cover;background:#f2f3f6}
.side-t{font:600 13px/18px var(--f-body);color:var(--ink-title);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.side-m{font:400 12px/16px var(--f-body);color:var(--meta)}
.side-list a:hover .side-t{color:var(--accent-link)}

.side-cat{list-style:none;margin:0;padding:0}
.side-cat li+li{margin-top:6px}
.side-cat a{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r-pill);
  background:#f7f8fa;color:var(--ink-strong);font-weight:600;cursor:pointer;
  transition:background var(--t),color var(--t)}
.side-cat a:hover{background:var(--accent);color:var(--accent-ink)}

/* ====================================================== editorial engine (C11)
   The editorial column is a white .box on the grey ground. Both wrappers are
   listed so the homepage box inside .sections also matches. */
.sections .box,.app-s .box,.static-s .box{background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 25px}
.entry-wrap{margin:0 0 20px}

.entry{color:var(--ink)}
.entry p{margin:0 0 16px;font-size:14px;line-height:26px}
.entry a{color:var(--accent-link);text-decoration:underline;text-underline-offset:2px}
.entry h1,.entry-h1{font:700 32px/40px var(--f-disp);color:var(--ink-strong);margin:0 0 14px}
.entry h2{font:700 21px/30px var(--f-disp);color:var(--ink-strong);text-align:start;margin:28px 0 12px}
.entry h3{font:600 16px/24px var(--f-body);color:var(--ink-strong);margin:18px 0 8px}

.lede{padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:8px}
.lede p{font-size:15px;line-height:28px;color:#565656}

.sec-head{margin:34px 0 14px}
.sec-head h2{margin:0 0 8px}
.sec-rule{display:block;width:52px;height:3px;background:var(--accent);border-radius:2px}
.sec-intro p:last-child,.sec-body p:last-child{margin-bottom:0}
.sec-intro{margin-bottom:18px}

.entry-list{margin:0 0 16px;padding:0 0 0 2px;list-style:none}
.entry-list li{position:relative;padding:0 0 0 26px;margin:0 0 9px;font-size:14px;line-height:25px}
.entry-list li::before{content:"";position:absolute;left:6px;top:10px;width:7px;height:7px;
  border-radius:2px;background:var(--accent)}

.tbl-wrap{overflow-x:auto;margin:0 0 18px;border-radius:var(--r)}
.entry-table{width:100%;border-collapse:collapse;background:#f7f8fa;border-radius:var(--r);
  overflow:hidden;font-size:13px}
.entry-table th{background:var(--head);color:#fff;text-align:left;padding:11px 14px;
  font:600 13px/20px var(--f-body)}
.entry-table td{padding:11px 14px;border-top:1px solid #e4e7ee;line-height:21px}

/* editorial card grid - tinted, never white-on-white inside the white box */
.ed-grid{display:grid;gap:14px;margin:0 0 6px}
.ed-grid.cols-1{grid-template-columns:1fr}
.ed-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.ed-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.ed-card{background:#f7f8fa;outline:1px solid #e4e7ee;border-radius:var(--r);padding:18px;
  border-bottom:2px solid var(--accent);transition:transform var(--t),outline-color var(--t)}
.ed-card:hover{transform:translateY(-2px);outline-color:var(--accent)}
.ed-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:12px;background:rgba(239,143,18,.14);color:var(--accent-d);margin:0 0 10px}
.ed-card h3{margin:0 0 7px;font-size:15px;line-height:22px}
.ed-card p{font-size:13px;line-height:23px;margin:0 0 10px}
.ed-card p:last-child{margin-bottom:0}

/* CTA band */
.cta-band{margin:34px 0 10px;padding:34px 30px;border-radius:var(--r);background:var(--head);
  color:#e9ebf0;position:relative;overflow:hidden;text-align:center}
.cta-band::before{content:"";position:absolute;left:50%;top:-110px;width:420px;height:260px;
  transform:translateX(-50%);background:radial-gradient(circle,rgba(239,143,18,.45),transparent 70%);
  pointer-events:none}
.cta-band h2.cta-h{position:relative;text-align:center;color:#fff;margin:0 0 12px;
  font:600 24px/32px var(--f-disp)}
.cta-copy{position:relative;max-width:none}
.cta-band p{color:#ccd1dc;font-size:14px;line-height:26px}
.cta-band .entry-list li{color:#ccd1dc}
.cta-band .entry-list li::before{background:var(--accent)}
.cta-sub{color:#fff;text-align:center;margin:16px 0 6px}
.cta-btns{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* scoped so .entry a cannot win and render an invisible label */
.entry a.hx-btn,a.hx-btn,.cta-band a.hx-btn{display:inline-flex;align-items:center;gap:8px;
  padding:0 24px;height:44px;border-radius:var(--r-pill);font:700 13px/44px var(--f-body);
  text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer;
  transition:background var(--t),color var(--t),transform var(--t)}
.entry a.hx-btn-primary,a.hx-btn-primary{background:var(--accent);color:var(--accent-ink)}
.entry a.hx-btn-primary:hover,a.hx-btn-primary:hover{background:#ffa42c;color:var(--accent-ink)}
.entry a.hx-btn-ghost,a.hx-btn-ghost{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.entry a.hx-btn-ghost:hover,a.hx-btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
a.hx-btn:active{transform:translateY(1px)}

/* FAQ accordion */
.faq{margin:0 0 6px}
.faq-i{background:#f7f8fa;outline:1px solid #e4e7ee;border-radius:var(--r);margin:0 0 10px;
  overflow:hidden}
.faq-i summary{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;
  list-style:none;transition:background var(--t)}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::marker{content:""}
.faq-i summary:hover{background:#f0f2f6}
.faq-i summary h3{margin:0;flex:1 1 auto;font:600 15px/23px var(--f-body);color:var(--ink-strong)}
.faq-chev{color:var(--accent-d);transition:transform var(--t)}
.faq-i[open] .faq-chev{transform:rotate(180deg)}
.faq-i[open] summary{background:#f0f2f6}
.faq-a{padding:2px 18px 16px}
.faq-a p{margin:0 0 10px;font-size:13px;line-height:24px}
.faq-a p:last-child{margin-bottom:0}

/* ============================================================ APK single page */
.sbar-band{background:var(--head);border-radius:0 0 var(--r) var(--r);padding:16px 0}
.sbar-band .container{justify-content:center}
.sbar-band .search-box{width:100%}

.app-s{padding:20px 0 30px}
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;
  font-size:12px;color:var(--meta)}
.crumb a{color:var(--accent-link)}
.crumb span[aria-current]{color:var(--ink-strong);font-weight:600}

.app-box{display:flex;gap:25px;align-items:flex-start}
.app-box .s2{order:-1;flex:1 1 auto;min-width:0}
.app-box .s1{flex:0 0 150px;width:150px;text-align:center}
.app-ico{width:150px;height:150px;border-radius:var(--r-icon);object-fit:cover;
  background:#f2f3f6;margin:0 0 14px}

.cat-label{font:700 12px/18px var(--f-body);text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-link);margin:0 0 6px}
h1.main-box-title{font:700 38px/48px var(--f-disp);color:var(--ink);margin:0 0 6px}
.src-tag{font-size:12px;color:var(--meta);margin:0 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.chips li{background:#f7f8fa;outline:1px solid #e4e7ee;border-radius:var(--r);
  padding:5px 13px;font:600 12px/18px var(--f-body);color:var(--ink-strong)}
.short-d{font-size:14px;line-height:25px;margin:0 0 16px}

/* badge on the detail page is static, never absolute (C7) */
.badge{display:inline-block;position:static;background:var(--accent);color:var(--accent-ink);
  border-radius:var(--r);padding:4px 12px;font:700 11px/16px var(--f-body);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.badge-hot{background:#e8532f;color:#fff}

.da-s{display:flex;flex-wrap:wrap;border-radius:var(--r);overflow:hidden;
  outline:1px solid #e4e7ee;margin:0 0 16px}
.da-s .cell{flex:0 0 33.333%;width:33.333%;padding:11px 14px;background:#f7f8fa;
  border-bottom:1px solid #e4e7ee}
.da-s .cell:nth-child(3n){border-right:0}
.da-s .cell{border-right:1px solid #e4e7ee}
.da-s .cell b{display:block;font:700 11px/16px var(--f-body);text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.da-s .cell span{font:600 13px/20px var(--f-body);color:var(--ink-strong)}

.share-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px;padding:0;list-style:none}
.share-row a{display:flex;align-items:center;justify-content:center;gap:6px;width:104px;
  min-height:31px;border-radius:var(--r);color:#fff;font:600 11px/16px var(--f-body);
  cursor:pointer;transition:filter var(--t),transform var(--t)}
.share-row a:hover{filter:brightness(1.12);color:#fff}
.share-row a:active{transform:translateY(1px)}
.sh-fb{background:#1877f2}.sh-tw{background:#111}.sh-pi{background:#e60023}
.sh-tg{background:#2aabee}.sh-wa{background:#25d366}

.dl-btn,.tg-btn{display:flex;align-items:center;min-height:33px;border-radius:var(--r);
  font:700 12px/16px var(--f-body);padding:8px 5px 8px 38px;position:relative;margin:0 0 9px;
  cursor:pointer;text-transform:uppercase;letter-spacing:.04em;overflow:hidden;
  transition:filter var(--t),transform var(--t)}
.dl-btn .ib,.tg-btn .ib{position:absolute;left:0;top:0;bottom:0;width:30px;
  background:rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center}
.dl-btn{background:var(--green);color:var(--accent-ink)}
.dl-btn:hover{background:var(--green);color:var(--accent-ink);filter:brightness(1.07)}
.tg-btn{background:var(--tg);color:#fff}
.tg-btn:hover{background:var(--tg);color:#fff;filter:brightness(1.12)}
.dl-btn:active,.tg-btn:active{transform:translateY(1px)}
.report{display:inline-block;margin-top:4px;font-size:11px;color:var(--meta)}

.sb-note{background:#fff8ec;outline:1px solid #f3dcb6;border-radius:var(--r);padding:14px 16px;
  font-size:12px;line-height:21px;color:#6b5324}
.sb-note strong{color:#4a3714}

.detail-card{margin:0 0 20px}
.detail-card ul{list-style:none;margin:0;padding:0}
.detail-card li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-top:1px solid var(--line);font-size:13px}
.detail-card li:first-child{border-top:0}
.detail-card li b{color:var(--ink-strong);font-weight:600}
.detail-card li span{color:var(--meta);text-align:right}

/* related row fills the full measure: 5 up = 20% each */
.rel-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0}
.rel-i{padding:10px}
.rel-i a{display:block;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  border-bottom:2px solid var(--accent);padding:15px;text-align:center;cursor:pointer;height:100%;
  transition:transform var(--t),box-shadow var(--t)}
.rel-i a:hover{transform:translateY(-3px);box-shadow:3px 4px 10px 0 #d8dbe2}
.rel-i img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);
  background:#f2f3f6;margin:0 0 10px}
.rel-t{display:block;font:600 13px/19px var(--f-body);color:var(--ink-title);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rel-m{display:block;font:400 12px/18px var(--f-body);color:var(--meta)}

/* responsible-gaming strip */
.rg{margin:20px 0 0}
.rg .tips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.rg .tips li{display:flex;align-items:center;gap:7px;background:#f7f8fa;outline:1px solid #e4e7ee;
  border-radius:var(--r-pill);padding:7px 15px;font:600 12px/18px var(--f-body);color:var(--ink-strong)}
.rg .tips .ic{color:var(--accent-d)}

/* --------------------------------------------------------- static page hero */
.page-hero{position:relative;background:#000;padding:54px 0;overflow:hidden;
  border-radius:0 0 var(--r) var(--r)}
.page-hero .imgbg{position:absolute;inset:0}
.page-hero .imgbg img{width:110%;max-width:none;height:100%;object-fit:cover;opacity:.32;position:absolute;left:-5%}
.page-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.45))}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{font:700 34px/44px var(--f-disp);color:#fff;margin:0}
.page-hero .crumb{margin:0 0 10px;color:#c6cad4}
.page-hero .crumb a{color:#ffc877}
.page-hero .crumb span[aria-current]{color:#fff}
.static-s{padding:20px 0 30px}

/* ------------------------------------------------------------------- footer */
.site-foot{background:var(--head);border-top:2px solid var(--accent);color:#c6cad4;
  padding:30px 0 24px;margin-top:10px}
.site-foot .container{display:block}
.site-foot a{color:#c6cad4}
.site-foot a:hover{color:#fff}
.site-foot .box-title{color:#8d93a3}
.site-foot .box-title::after{background:var(--accent)}

.foot-promo{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  background:var(--head-deep);border-radius:var(--r);padding:20px 25px;margin:0 0 26px}
.foot-promo-l{display:flex;align-items:center;gap:14px}
.foot-promo-l img{height:54px;width:auto;object-fit:contain}
.foot-promo-l strong{display:block;color:#fff;font:700 17px/24px var(--f-disp)}
.foot-promo-l span{display:block;font-size:12px;line-height:19px;max-width:none}
.foot-policy{display:flex;flex-wrap:wrap;gap:8px}
.foot-policy a{padding:8px 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);
  font:600 12px/18px var(--f-body);cursor:pointer;transition:background var(--t),color var(--t)}
.foot-policy a:hover{background:var(--accent);color:var(--accent-ink)}

.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:0 0 24px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0 0 7px;font-size:13px}

.foot-trust{display:flex;flex-wrap:wrap;gap:10px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1)}
.foot-trust span{display:flex;align-items:center;gap:8px;font-size:12px;line-height:18px}
.foot-trust .ic{color:var(--accent)}

.disclaimer-band{background:var(--head-deep);color:#8d93a3;padding:20px 0 24px}
.disclaimer-band .container{display:block}
.disclaimer-band p{margin:0;font-size:12px;line-height:21px}
.disclaimer-band strong{color:#e3e6ec}
.disclaimer-band .copy{margin-top:10px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);font-size:12px}

/* floating gradient CTA pill */
.float-cta{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70;
  display:flex;align-items:center;gap:9px;padding:11px 24px;border-radius:var(--r-pill);
  color:#fff;font:700 13px/18px var(--f-body);cursor:pointer;
  background:linear-gradient(135deg,#00c6ff,#0072ff,#8e2de2,#ff0080);
  background-size:300% 300%;animation:fl 9s ease infinite;
  box-shadow:0 6px 22px rgba(0,0,0,.28)}
.float-cta:hover{color:#fff;filter:brightness(1.08)}
@keyframes fl{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.to-top{position:fixed;right:16px;bottom:72px;z-index:70;width:42px;height:42px;border:0;
  border-radius:50%;background:var(--head);color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;opacity:0;visibility:hidden;
  transition:opacity var(--t),visibility var(--t),background var(--t)}
.to-top.on{opacity:1;visibility:visible}
.to-top:hover{background:var(--accent);color:var(--accent-ink)}

/* 404 */
.nf{text-align:center;padding:60px 0}
.nf h1{font:700 72px/80px var(--f-disp);color:var(--accent);margin:0}
.nf h2{font:600 22px/30px var(--f-disp);color:var(--ink-strong);margin:6px 0 14px}

/* reveal-on-scroll */
.rv{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.rv.in{opacity:1;transform:none}

/* ------------------------------------------------------------- breakpoints */
@media (max-width:1180px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .ed-grid.cols-4{grid-template-columns:repeat(3,1fr)}
  .rel-row{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1023px){
  :root{--gap:24px}
  .container{flex-wrap:wrap}
  .main-col{flex:1 1 100%}
  .sidebar{position:static;flex:1 1 100%;width:100%}
  .widget{margin-bottom:16px}
  .ed-grid.cols-4,.ed-grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.grid-3{grid-template-columns:repeat(2,1fr)}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:34px;line-height:40px}
}
@media (max-width:860px){
  .app-box{flex-wrap:wrap}
  .app-box .s1{flex:1 1 100%;width:100%;text-align:left;display:flex;gap:18px;align-items:flex-start}
  .app-box .s1 .s1-btns{flex:1 1 auto;min-width:0}
  .app-ico{margin:0}
  .rel-row{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
  body{font-size:16px;line-height:26px}
  .nav-tog{display:flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:60px;background:var(--head-deep);
    border-bottom:2px solid var(--accent);padding:10px 20px 16px}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .site-nav a{padding:12px 14px;font-size:16px}
  .hero{padding:48px 0 30px}
  .hero h1{font-size:28px;line-height:36px}
  .hero h2{font-size:15px;line-height:26px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid.grid-3{grid-template-columns:1fr}
  .ed-grid.cols-4,.ed-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .rel-row{grid-template-columns:repeat(2,1fr)}
  .sections .box,.app-s .box,.static-s .box,.widget{padding:18px}
  .entry p,.entry-list li{font-size:16px;line-height:27px}
  .entry h1,.entry-h1{font-size:26px;line-height:34px}
  .entry h2{font-size:19px;line-height:28px}
  h1.main-box-title{font-size:27px;line-height:36px}
  .page-hero h1{font-size:25px;line-height:34px}
  .da-s .cell{flex:0 0 50%;width:50%}
  .foot-cols{grid-template-columns:1fr}
  .float-cta{font-size:12px;padding:10px 18px}
  .cta-band{padding:26px 18px}
  .cta-band h2.cta-h{font-size:20px;line-height:28px}
}
@media (max-width:519px){
  .ed-grid.cols-4,.ed-grid.cols-3{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .rel-row{grid-template-columns:repeat(2,1fr)}
  .share-row a{width:calc(50% - 4px)}
  .da-s .cell{flex:0 0 100%;width:100%;border-right:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .float-cta{animation:none}
}

/* small layout utilities used by single-purpose templates */
.cta-btns.is-centred{justify-content:center}
.search-box.is-inset{margin:0 10px 16px}
.entry .note-foot{margin-top:22px}