/* ================================================================================================
   V5.2 front page (homev5.php, 2026-10-21). Loaded only by /, /ms/ and /zh/ (render_standalone $meta['css']),
   so everything here, header and footer included, changes those three pages and nothing else.
   Light editorial theme: warm white, navy text, a little champagne gold. Arial throughout.
   ================================================================================================ */
html.abr-apple { --h5-bg: #FAFAF8; --h5-alt: #F5F3EF; --h5-card: #FFFFFF; --h5-navy: #142B49; --h5-body: #36465A; --h5-mut: #758195;
  --h5-gold: #B78B4D; --h5-gold-d: #9E7640; --h5-gold2: #E9D5B3; --h5-goldbg: #F8F2E8; --h5-line: #E8E9E8; --h5-ok: #2C8A69;
  --h5-shadow: 0 1px 2px rgba(20, 43, 73, .04), 0 6px 18px rgba(20, 43, 73, .04); }
html.abr-apple, html.abr-apple body, html.abr-apple body *:not(svg):not(path) { font-family: Arial, Helvetica, sans-serif !important; }
html.abr-apple body :is(h1, h2, h3, em, i, b, strong, small) { font-style: normal !important; }
html.abr-apple body, html.abr-apple #root, html.abr-apple #root > div { background: var(--h5-bg) !important; }
html.abr-apple #root main .max-w-5xl { max-width: 1240px !important; }

/* The header is the same on every page since V6 (2026-10-22): its rules are at the end of apple.css, not here. */

/* ---------- Page body ---------- */
html.abr-apple #root .rich-content .h5 { display: flex; flex-direction: column; gap: 52px; margin: 0 0 40px; color: var(--h5-body); }
html.abr-apple #root .rich-content .h5 * { box-sizing: border-box; }
html.abr-apple #root .rich-content .h5 :is(p, li, dd, dt, summary, h1, h2, h3, small, b) { text-align: left !important; hyphens: manual; -webkit-hyphens: manual; }
html.abr-apple #root .rich-content .h5 :is(ul, ol) { list-style: none !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
html.abr-apple #root .rich-content .h5 :is(ul, ol) > li { margin: 0 !important; padding: 0; max-width: none !important; color: inherit; }
html.abr-apple #root .rich-content .h5 :is(ul, ol) > li::before { content: none !important; display: none !important; }
html.abr-apple #root .rich-content .h5 a { text-decoration: none !important; }
html.abr-apple #root .rich-content .h5 p { margin: 0 !important; max-width: none !important; }
html.abr-apple #root .rich-content .h5 section { margin: 0 !important; scroll-margin-top: 84px; }
html.abr-apple #root .rich-content .h5 svg { flex: 0 0 auto; }
html.abr-apple #root .rich-content .h5 .h5-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--h5-gold) !important; }

/* Buttons: gold for the main action, white with a navy line for the second */
html.abr-apple #root .rich-content .h5 a.h5-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-size: 15px; font-weight: 700; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
html.abr-apple #root .rich-content .h5 a.h5-btn-p { background: var(--h5-gold); border: 1.5px solid var(--h5-gold); color: #fff !important; }
html.abr-apple #root .rich-content .h5 a.h5-btn-p:hover { background: var(--h5-gold-d); border-color: var(--h5-gold-d); }
html.abr-apple #root .rich-content .h5 a.h5-btn-s { background: #fff; border: 1.5px solid var(--h5-navy); color: var(--h5-navy) !important; }
html.abr-apple #root .rich-content .h5 a.h5-btn-s:hover { background: var(--h5-goldbg); }
html.abr-apple #root .rich-content .h5 a.h5-all { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--h5-navy) !important; }
html.abr-apple #root .rich-content .h5 a.h5-all:hover { color: var(--h5-gold) !important; }

/* ---------- Opening: type on a soft cream panel, a few quiet shapes, the real numbers in a small card ---------- */
html.abr-apple #root .rich-content section.h5-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: 40px; align-items: center;
  padding: 44px 48px !important; border: 1px solid #EFE6D6; border-radius: 24px; background: linear-gradient(135deg, #FCF9F4 0%, #F6EFE3 100%); }
html.abr-apple #root .rich-content section.h5-hero::before { content: ""; position: absolute; z-index: -1; right: -140px; top: -160px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 213, 179, .6) 0%, rgba(233, 213, 179, 0) 68%); pointer-events: none; }
html.abr-apple #root .rich-content section.h5-hero::after { content: ""; position: absolute; z-index: -1; right: 80px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(183, 139, 77, .22); box-shadow: 0 0 0 28px rgba(233, 213, 179, .12); pointer-events: none; }
html.abr-apple #root .rich-content section.h5-hero h1 { margin: 12px 0 0 !important; max-width: 16ch; font-size: 46px !important; line-height: 1.1 !important; letter-spacing: -0.015em; font-weight: 700; color: var(--h5-navy) !important; text-wrap: balance; }
html.abr-apple #root .rich-content .h5 p.h5-lede { margin-top: 14px !important; max-width: 52ch !important; font-size: 16px; line-height: 1.6; color: var(--h5-body) !important; }
html.abr-apple #root .rich-content .h5 p.h5-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px !important; }
html.abr-apple #root .rich-content .h5 ul.h5-trust { display: flex !important; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px !important; }
html.abr-apple #root .rich-content .h5 ul.h5-trust > li { display: flex; align-items: center; gap: 10px; }
html.abr-apple #root .rich-content .h5 .h5-ti { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--h5-gold2); color: var(--h5-gold); }
html.abr-apple #root .rich-content .h5 ul.h5-trust b { display: block; font-size: 13.5px; font-weight: 700; color: var(--h5-navy); line-height: 1.3; }
html.abr-apple #root .rich-content .h5 ul.h5-trust small { display: block; font-size: 12px; color: var(--h5-mut); line-height: 1.35; }
html.abr-apple #root .rich-content .h5 aside.h5-facts { padding: 20px; border: 1px solid var(--h5-line); border-radius: 18px; background: rgba(255, 255, 255, .92); box-shadow: var(--h5-shadow); }
html.abr-apple #root .rich-content .h5 p.h5-facts-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px !important; }
html.abr-apple #root .rich-content .h5 p.h5-facts-h img { width: 34px !important; height: 34px !important; margin: 0 !important; border-radius: 9px !important; box-shadow: none !important; }
html.abr-apple #root .rich-content .h5 p.h5-facts-h b { font-size: 16px; font-weight: 700; color: var(--h5-navy); }
html.abr-apple #root .rich-content .h5 aside.h5-facts ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
html.abr-apple #root .rich-content .h5 aside.h5-facts li { padding: 12px 14px !important; border-radius: 12px; background: var(--h5-goldbg); }
html.abr-apple #root .rich-content .h5 aside.h5-facts li b { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--h5-navy); white-space: nowrap; }
html.abr-apple #root .rich-content .h5 aside.h5-facts li span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--h5-mut); }

/* ---------- Four ranking panels: one card each, rows with thin lines between them ---------- */
html.abr-apple #root .rich-content .h5 .h5-panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: -24px; }
html.abr-apple #root .rich-content .h5 section.h5-panel { padding: 18px 16px 8px !important; border: 1px solid var(--h5-line); border-radius: 18px; background: var(--h5-card); box-shadow: var(--h5-shadow); min-width: 0; }
/* Heading, note and list share three rows with the panels beside them, so a one-line note never pushes one list down */
@supports (grid-template-rows: subgrid) {
  html.abr-apple #root .rich-content .h5 section.h5-panel { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
html.abr-apple #root .rich-content .h5 .h5-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.abr-apple #root .rich-content .h5 .h5-ph h2 { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 17px !important; line-height: 1.25 !important; font-weight: 700; letter-spacing: 0; color: var(--h5-navy) !important; }
html.abr-apple #root .rich-content .h5 .h5-pi { display: inline-flex; color: var(--h5-gold); }
html.abr-apple #root .rich-content .h5 .h5-ph a.h5-all { font-size: 12.5px; }
html.abr-apple #root .rich-content .h5 p.h5-psub { margin: 5px 0 6px !important; font-size: 12.5px; line-height: 1.45; color: var(--h5-mut) !important; }
html.abr-apple #root .rich-content .h5 .h5-rows > li + li { border-top: 1px solid #EFF0EE; }
html.abr-apple #root .rich-content .h5 a.h5-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; margin: 0 -4px; border-radius: 10px; color: var(--h5-body) !important; }
html.abr-apple #root .rich-content .h5 a.h5-row:hover { background: #FBF9F5; }
html.abr-apple #root .rich-content .h5 .h5-rank { flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--h5-goldbg); color: var(--h5-navy); font-size: 13px; font-weight: 700; }
html.abr-apple #root .rich-content .h5 .h5-rows > li:first-child .h5-rank { background: var(--h5-gold); color: #fff; }
/* Every logo and game picture sits in the same 1:1 square */
html.abr-apple #root .rich-content .h5 .h5-pic { flex: 0 0 48px; display: flex; align-items: center; justify-content: center; width: 48px; aspect-ratio: 1 / 1; border: 1px solid var(--h5-line); border-radius: 12px; overflow: hidden; background: #fff; }
html.abr-apple #root .rich-content .h5 :is(.h5-pic, .h5-cover) span.h5-tile { display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1; padding: 5px; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.abr-apple #root .rich-content .h5 :is(.h5-pic, .h5-cover) span.h5-tile img { width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: contain; border-radius: 0 !important; box-shadow: none !important; max-width: none !important; }
html.abr-apple #root .rich-content .h5 :is(.h5-pic, .h5-cover) img.h5-img { display: block; width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1; margin: 0 !important; object-fit: cover; border-radius: 0 !important; box-shadow: none !important; max-width: none !important; }
html.abr-apple #root .rich-content .h5 :is(.h5-pic, .h5-cover) span.h5-img { display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1; margin: 0 !important; border-radius: 0 !important;
  background: linear-gradient(180deg, #23395C, #142B49); color: #fff; font-size: 20px; font-weight: 700; }
html.abr-apple #root .rich-content .h5 .h5-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.abr-apple #root .rich-content .h5 .h5-txt b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--h5-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.abr-apple #root .rich-content .h5 .h5-txt small { display: flex; flex-direction: column; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--h5-mut); }
/* Rows line up across the four panels (owner, 2026-10-22): two fixed fact lines, one row height for all, short rows centred */
html.abr-apple #root .rich-content .h5 .h5-txt small > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.abr-apple #root .rich-content .h5 .h5-txt { min-height: 58px; justify-content: center; }
/* Four panels side by side leave ~160px per name: the arrow goes (the whole row is the link) and Chinese names drop to
   14px, so "Pragmatic Play Live（PP）" and "Saba Sports（沙巴体育）" show in full instead of ending in "…" */
@media (min-width: 1200px) {
  html.abr-apple #root .rich-content .h5 .h5-panels .h5-chev { display: none; }
  html.abr-apple[lang^="zh"] #root .rich-content .h5 .h5-panels .h5-txt b { font-size: 14px; }
}
html.abr-apple #root .rich-content .h5 .h5-star { margin-right: 3px; font-style: normal; color: var(--h5-gold); }
html.abr-apple #root .rich-content .h5 em.h5-sc { font-style: normal; font-weight: 700; color: var(--h5-navy); }
html.abr-apple #root .rich-content .h5 .h5-dot { margin: 0 5px; color: #B9C0CB; }
html.abr-apple #root .rich-content .h5 .h5-ok { color: var(--h5-ok); font-weight: 700; }
html.abr-apple #root .rich-content .h5 .h5-warn { color: #9A6A1E; font-weight: 700; }
html.abr-apple #root .rich-content .h5 .h5-chev { display: inline-flex; color: #A3ABB8; }
html.abr-apple #root .rich-content .h5 a.h5-row:hover .h5-chev { color: var(--h5-gold); }

/* ---------- Section headings ---------- */
html.abr-apple #root .rich-content .h5 .h5-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 18px; }
html.abr-apple #root .rich-content .h5 .h5-head h2, html.abr-apple #root .rich-content .h5 .h5-mi h2 { margin: 0 !important; font-size: 28px !important; line-height: 1.2 !important; font-weight: 700; letter-spacing: -0.01em; color: var(--h5-navy) !important; text-wrap: balance; }
html.abr-apple #root .rich-content .h5 .h5-head p { margin-top: 6px !important; font-size: 15px; line-height: 1.5; color: var(--h5-mut) !important; }

/* ---------- Every review category ---------- */
html.abr-apple #root .rich-content .h5 ul.h5-cats { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
html.abr-apple #root .rich-content .h5 a.h5-cat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; padding: 20px 12px 16px; border: 1px solid var(--h5-line); border-radius: 16px; background: #fff; box-shadow: var(--h5-shadow); color: var(--h5-navy) !important; text-align: center; transition: border-color .15s ease; }
html.abr-apple #root .rich-content .h5 a.h5-cat:hover { border-color: var(--h5-gold2); }
html.abr-apple #root .rich-content .h5 .h5-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--h5-goldbg); color: var(--h5-navy); box-shadow: inset 0 0 0 1px var(--h5-gold2); }
html.abr-apple #root .rich-content .h5 .h5-cat-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.abr-apple #root .rich-content .h5 .h5-cat-t b { font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center !important; }
html.abr-apple #root .rich-content .h5 .h5-cat-t small { font-size: 12px; color: var(--h5-mut); text-align: center !important; }
html.abr-apple #root .rich-content .h5 a.h5-cat .h5-chev { display: none; }

/* ---------- How we test ---------- */
html.abr-apple #root .rich-content .h5 section.h5-method { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2.15fr); gap: 28px; align-items: center; padding: 36px !important; border: 1px solid #EEE7DA; border-radius: 22px; background: var(--h5-alt); }
html.abr-apple #root .rich-content .h5 .h5-mi { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
html.abr-apple #root .rich-content .h5 .h5-mi p.h5-ml { font-size: 14.5px; line-height: 1.6; color: var(--h5-body) !important; }
html.abr-apple #root .rich-content .h5 .h5-mi a.h5-btn { margin-top: 6px; }
html.abr-apple #root .rich-content .h5 ol.h5-steps { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 24px 8px !important; border-radius: 18px; background: #fff; box-shadow: var(--h5-shadow); }
html.abr-apple #root .rich-content .h5 ol.h5-steps > li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 16px !important; }
html.abr-apple #root .rich-content .h5 ol.h5-steps > li + li { border-left: 1px solid #EFF0EE; }
html.abr-apple #root .rich-content .h5 .h5-n { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--h5-goldbg); color: var(--h5-gold-d); font-size: 12px; font-weight: 700; }
html.abr-apple #root .rich-content .h5 .h5-si { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--h5-goldbg); color: var(--h5-gold); }
html.abr-apple #root .rich-content .h5 ol.h5-steps h3 { margin: 4px 0 0 !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 700; color: var(--h5-navy) !important; }
html.abr-apple #root .rich-content .h5 ol.h5-steps p { font-size: 13px; line-height: 1.55; color: var(--h5-body) !important; }

/* ---------- Latest reviews: 16:9 covers ---------- */
html.abr-apple #root .rich-content .h5 ul.h5-latest { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
html.abr-apple #root .rich-content .h5 ul.h5-latest > li { display: flex; }
html.abr-apple #root .rich-content .h5 a.h5-late { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--h5-line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--h5-shadow); color: var(--h5-body) !important; }
html.abr-apple #root .rich-content .h5 a.h5-late:hover { border-color: var(--h5-gold2); }
html.abr-apple #root .rich-content .h5 .h5-cover { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--h5-line);
  background: radial-gradient(120% 120% at 30% 20%, #FFFFFF 0%, #F8F2E8 55%, #F0E4CF 100%); }
/* A studio's own artwork fills the 16:9 cover (cropped, never stretched); a casino logo or a letter tile sits in the middle as a 1:1 square */
html.abr-apple #root .rich-content .h5 .h5-cover { position: relative; overflow: hidden; }
/* ...and a studio with no logo yet (BTi, Asia Gaming) gets the same white tile with a navy letter */
html.abr-apple #root .rich-content .h5 :is(.h5-pic, .h5-cover) span.h5-img { background: #fff; color: #142B49; }
/* Owner, 2026-10-22: studio logos are white tiles now, so a studio's card shows its logo as the same 1:1 square as a casino's */
html.abr-apple #root .rich-content .h5 .h5-cover > img.h5-img { width: 30% !important; max-width: 92px; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 16px !important; background: #fff; box-shadow: 0 6px 18px rgba(20, 43, 73, .10) !important; }
html.abr-apple #root .rich-content .h5 .h5-cover > span:is(.h5-tile, .h5-img) { width: 30% !important; max-width: 92px; height: auto !important; aspect-ratio: 1 / 1; border-radius: 16px !important; overflow: hidden; box-shadow: 0 6px 18px rgba(20, 43, 73, .10) !important; }
html.abr-apple #root .rich-content .h5 .h5-cover > span.h5-tile { background: #fff; }
html.abr-apple #root .rich-content .h5 .h5-lb { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; padding: 14px 16px 16px; }
html.abr-apple #root .rich-content .h5 .h5-lb small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--h5-gold); }
html.abr-apple #root .rich-content .h5 .h5-lb b { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--h5-navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.abr-apple #root .rich-content .h5 .h5-ex { font-size: 13.5px; line-height: 1.55; color: var(--h5-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.abr-apple #root .rich-content .h5 .h5-lf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
html.abr-apple #root .rich-content .h5 .h5-lf time { font-size: 12px; color: var(--h5-mut); }
html.abr-apple #root .rich-content .h5 .h5-lf em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--h5-navy); white-space: nowrap; }

/* ---------- FAQ ---------- */
html.abr-apple #root .rich-content .h5 .h5-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
html.abr-apple #root .rich-content .h5 details.h5-q { margin: 0 !important; border: 1px solid var(--h5-line); border-radius: 14px; background: #fff; }
html.abr-apple #root .rich-content .h5 details.h5-q summary { position: relative; padding: 16px 48px 16px 18px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--h5-navy); }
html.abr-apple #root .rich-content .h5 details.h5-q summary::-webkit-details-marker { display: none; }
html.abr-apple #root .rich-content .h5 details.h5-q summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--h5-gold); }
html.abr-apple #root .rich-content .h5 details.h5-q[open] summary::after { content: "\2212"; }
html.abr-apple #root .rich-content .h5 details.h5-q p { padding: 0 18px 16px !important; font-size: 14px; line-height: 1.65; color: var(--h5-body) !important; }
html.abr-apple #root .rich-content .h5 p.h5-note { margin-top: 16px !important; font-size: 12.5px; line-height: 1.6; color: var(--h5-mut) !important; }
html.abr-apple #root .rich-content .h5 p.h5-note a { color: var(--h5-navy) !important; text-decoration: underline !important; text-underline-offset: 2px; }
html.abr-apple .h5-18 { display: inline-flex; align-items: center; justify-content: center; height: 20px; margin-right: 8px; padding: 0 6px; border-radius: 6px; background: var(--h5-navy); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }

/* ---------- Front-page footer ---------- */
html.abr-apple #root footer.abr-foot.hf { margin-top: 24px; padding: 48px 0 24px; border-top: 1px solid var(--h5-line); background: var(--h5-alt) !important; color: var(--h5-mut); }
html.abr-apple #root footer.hf .hf-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
html.abr-apple #root footer.hf .hf-top { display: grid !important; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
html.abr-apple #root footer.hf a.hf-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--h5-navy) !important; text-decoration: none !important; }
html.abr-apple #root footer.hf a.hf-logo img { width: 36px; height: 36px; border-radius: 9px; }
html.abr-apple #root footer.hf a.hf-logo b { font-size: 19px; font-weight: 700; }
html.abr-apple #root footer.hf .hf-brand p { margin: 12px 0 0; max-width: 36ch; font-size: 14px; line-height: 1.6; color: var(--h5-mut); }
html.abr-apple #root footer.hf .hf-col h2 { margin: 4px 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--h5-navy); }
html.abr-apple #root footer.hf .hf-col ul { list-style: none; margin: 0; padding: 0; }
html.abr-apple #root footer.hf .hf-col li { margin: 0 0 10px; padding: 0; }
html.abr-apple #root footer.hf .hf-col li::before { content: none; }
html.abr-apple #root footer.hf .hf-col a { font-size: 14px; color: var(--h5-body) !important; text-decoration: none !important; }
html.abr-apple #root footer.hf .hf-col a:hover { color: var(--h5-gold) !important; }
html.abr-apple #root footer.hf .af-ads { margin-top: 28px; }
html.abr-apple #root footer.hf .hf-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--h5-line); }
html.abr-apple #root footer.hf .hf-bot p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--h5-mut); }
html.abr-apple #root footer.hf .hf-langs { display: flex; gap: 14px; }
html.abr-apple #root footer.hf .hf-langs a { color: var(--h5-body) !important; text-decoration: none !important; }
html.abr-apple #root footer.hf .hf-langs a[aria-current] { color: var(--h5-navy) !important; font-weight: 700; box-shadow: inset 0 -2px 0 var(--h5-gold); }
html.abr-apple #root footer.hf .hf-disc { flex-basis: 100%; }

/* ---------- Laptop and tablet: two panels a row ---------- */
@media (max-width: 1199px) {
  html.abr-apple #root .rich-content .h5 .h5-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.abr-apple #root .rich-content .h5 ul.h5-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.abr-apple #root .rich-content .h5 section.h5-method { grid-template-columns: minmax(0, 1fr); }
  html.abr-apple #root .rich-content .h5 ul.h5-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  html.abr-apple #root .rich-content section.h5-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 28px !important; }
  html.abr-apple #root .rich-content .h5 aside.h5-facts ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.abr-apple #root .rich-content .h5 .h5-panels { margin-top: 0; }
  html.abr-apple #root .rich-content .h5 ol.h5-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  html.abr-apple #root .rich-content .h5 ol.h5-steps > li:nth-child(3) { border-left: 0; }
  html.abr-apple #root .rich-content .h5 .h5-faq { grid-template-columns: minmax(0, 1fr); }
  html.abr-apple #root footer.hf .hf-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.abr-apple #root footer.hf .hf-brand { grid-column: 1 / -1; }
}

/* ---------- Phone: one column, Casino first; shorter opening ---------- */
@media (max-width: 719px) {
  html.abr-apple #root .rich-content .h5 { gap: 36px; }
  html.abr-apple #root .rich-content section.h5-hero { padding: 24px 18px !important; border-radius: 20px; gap: 18px; }
  html.abr-apple #root .rich-content section.h5-hero::after { display: none; }
  html.abr-apple #root .rich-content section.h5-hero h1 { font-size: 31px !important; }
  html.abr-apple #root .rich-content .h5 p.h5-lede { font-size: 15px; margin-top: 10px !important; }
  html.abr-apple #root .rich-content .h5 p.h5-cta { flex-wrap: nowrap; gap: 8px; margin-top: 18px !important; }
  html.abr-apple #root .rich-content .h5 p.h5-cta a.h5-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 12px; font-size: 14px; white-space: normal; line-height: 1.2; text-align: center; }
  html.abr-apple #root .rich-content .h5 ul.h5-trust { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px !important; }
  html.abr-apple #root .rich-content .h5 ul.h5-trust > li { flex-direction: column; align-items: center; gap: 6px; }
  html.abr-apple #root .rich-content .h5 ul.h5-trust :is(b, small) { text-align: center !important; }
  html.abr-apple #root .rich-content .h5 ul.h5-trust b { font-size: 12.5px; }
  html.abr-apple #root .rich-content .h5 ul.h5-trust small { font-size: 11px; }
  html.abr-apple #root .rich-content .h5 aside.h5-facts { display: none; }
  html.abr-apple #root .rich-content .h5 .h5-panels { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html.abr-apple #root .rich-content .h5 .h5-head h2, html.abr-apple #root .rich-content .h5 .h5-mi h2 { font-size: 23px !important; }
  html.abr-apple #root .rich-content .h5 .h5-head p { font-size: 14px; }
  html.abr-apple #root .rich-content .h5 ul.h5-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.abr-apple #root .rich-content .h5 ul.h5-cats > li:last-child { grid-column: 1 / -1; }
  html.abr-apple #root .rich-content .h5 a.h5-cat { flex-direction: row; align-items: center; gap: 10px; padding: 12px; text-align: left; }
  html.abr-apple #root .rich-content .h5 a.h5-cat .h5-ic { width: 40px; height: 40px; flex: 0 0 40px; }
  html.abr-apple #root .rich-content .h5 a.h5-cat .h5-ic svg { width: 20px; height: 20px; }
  html.abr-apple #root .rich-content .h5 .h5-cat-t { flex: 1 1 auto; }
  html.abr-apple #root .rich-content .h5 .h5-cat-t :is(b, small) { text-align: left !important; }
  html.abr-apple #root .rich-content .h5 .h5-cat-t b { font-size: 13.5px; }
  html.abr-apple #root .rich-content .h5 a.h5-cat .h5-chev { display: inline-flex; }
  html.abr-apple #root .rich-content .h5 section.h5-method { padding: 24px 18px !important; gap: 20px; }
  html.abr-apple #root .rich-content .h5 ol.h5-steps { padding: 18px 4px !important; }
  html.abr-apple #root .rich-content .h5 ol.h5-steps > li { padding: 0 12px !important; }
  html.abr-apple #root .rich-content .h5 .h5-si { width: 44px; height: 44px; }
  html.abr-apple #root .rich-content .h5 ul.h5-latest { grid-template-columns: minmax(0, 1fr); }
  html.abr-apple #root footer.hf { padding-top: 36px; }
  html.abr-apple #root footer.hf .hf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  html.abr-apple #root footer.hf .hf-bot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  html.abr-apple #root .rich-content section.h5-hero h1 { font-size: 28px !important; }
  html.abr-apple #root .rich-content .h5 ul.h5-trust small { display: none; }
}
@media (max-width: 340px) {
  html.abr-apple #root .rich-content .h5 ol.h5-steps { grid-template-columns: minmax(0, 1fr); }
  html.abr-apple #root .rich-content .h5 ol.h5-steps > li { border-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.abr-apple #root .rich-content .h5 * { transition: none !important; }
}

/* ---------- The owner's key visual in the opening (2026-10-22; toned down the same day, owner: "文字是主角，统计资料是辅助，
   图片只是背景氛围"). Behind the right half only, at about a quarter strength, fading out to the left and towards the bottom
   (where the slot machine and the chips sit), so the words stay on clean cream and the numbers card is plain white.
   Phone and small tablet: the same faint picture behind the top right of the panel. ---------- */
html.abr-apple #root .rich-content section.h5-hero:has(.h5-hero-art)::before, html.abr-apple #root .rich-content section.h5-hero:has(.h5-hero-art)::after { display: none; }
html.abr-apple #root .rich-content section.h5-hero figure.h5-hero-art { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 54%; margin: 0 !important; padding: 0 !important; pointer-events: none; opacity: .26;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%), linear-gradient(to bottom, #000 30%, transparent 78%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 46%), linear-gradient(to bottom, #000 30%, transparent 78%); mask-composite: intersect; }
html.abr-apple #root .rich-content section.h5-hero figure.h5-hero-art img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; object-position: 66% 32%; border-radius: 0 !important; box-shadow: none !important; }
@media (max-width: 960px) {
  html.abr-apple #root .rich-content section.h5-hero figure.h5-hero-art { bottom: auto; width: 66%; height: 190px; opacity: .2;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%), linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 40%), linear-gradient(to bottom, #000 45%, transparent 100%); }
  /* Only the top band of the picture (the gold ribbon and the skyline): the slot machine and the chips stay out */
  html.abr-apple #root .rich-content section.h5-hero figure.h5-hero-art img { object-position: 60% 0%; }
}
@media (max-width: 719px) {
  html.abr-apple #root .rich-content section.h5-hero figure.h5-hero-art { width: 100%; height: 150px; opacity: .18; }
}
/* The numbers card: plain white, no see-through */
html.abr-apple #root .rich-content section.h5-hero:has(.h5-hero-art) aside.h5-facts { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.abr-apple #root .rich-content section.h5-hero:has(.h5-hero-art) aside.h5-facts li { background: #FAFAF8; box-shadow: inset 0 0 0 1px #EEEAE3; }

/* Owner, 2026-10-23: the hero's two buttons take the 21st.dev shimmer button (emerald-ui "ShimmerButton"), done in plain CSS:
   48px tall, 6px corners, a soft band of light sliding across the surface every 2 seconds. "How we review" is the component
   as it is (white, light grey edge, slate text); the main button keeps the site's gold with a lighter gold band. Every word
   starts with a capital ("Explore Casino Rankings", "How We Review"). Readers who ask for less motion get no shimmer.
   Owner, same day: "Read Our Methodology" (How we review section) takes the same button and capitals. */
@keyframes h5Shimmer { 0% { background-position: 0% 0%; } 100% { background-position: -200% 0%; } }
html.abr-apple #root .rich-content .h5 :is(p.h5-cta, .h5-mi) a.h5-btn { min-height: 48px; padding: 0 24px; border-radius: 6px; font-weight: 600; text-transform: capitalize;
  background-size: 200% 100%; animation: h5Shimmer 2s linear infinite; transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; }
html.abr-apple #root .rich-content .h5 :is(p.h5-cta, .h5-mi) a.h5-btn-p { border: 1px solid var(--h5-gold); background-color: var(--h5-gold);
  background-image: linear-gradient(110deg, var(--h5-gold), 45%, #D6B27A, 55%, var(--h5-gold)); color: #fff !important; }
html.abr-apple #root .rich-content .h5 :is(p.h5-cta, .h5-mi) a.h5-btn-p:hover { border-color: var(--h5-gold-d); background-color: var(--h5-gold-d);
  background-image: linear-gradient(110deg, var(--h5-gold-d), 45%, #C89F62, 55%, var(--h5-gold-d)); }
html.abr-apple #root .rich-content .h5 :is(p.h5-cta, .h5-mi) a.h5-btn-s { border: 1px solid #E2E8F0; background-color: #fff;
  background-image: linear-gradient(110deg, #fff, 45%, #F1F1F1, 55%, #fff); color: #475569 !important; }
html.abr-apple #root .rich-content .h5 :is(p.h5-cta, .h5-mi) a.h5-btn-s:hover { border-color: #CBD5E1; color: var(--h5-navy) !important; }
html.abr-apple #root .rich-content .h5 :is(p.h5-cta, .h5-mi) a.h5-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #334155; }
@media (prefers-reduced-motion: reduce) { html.abr-apple #root .rich-content .h5 :is(p.h5-cta, .h5-mi) a.h5-btn { animation: none; } }
@media (max-width: 719px) { html.abr-apple #root .rich-content .h5 p.h5-cta a.h5-btn { min-height: 46px; padding: 0 12px; } }
/* Owner, 2026-10-23: "Read review" on the Latest Reviews cards is a call to action too, so it moves a little: a gold band of
   light runs through the words (the hero buttons' shimmer, on the text) and the arrow nudges right; over the card the arrow
   steps further and turns gold. Every word starts with a capital, like the hero buttons. */
@keyframes h5TextShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes h5Nudge { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(4px); } }
html.abr-apple #root .rich-content .h5 .h5-lf em { text-transform: capitalize; color: transparent;
  background: linear-gradient(110deg, var(--h5-navy) 40%, #C9A063 50%, var(--h5-navy) 60%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; animation: h5TextShimmer 2.6s linear infinite; }
html.abr-apple #root .rich-content .h5 .h5-lf em svg { color: var(--h5-navy); animation: h5Nudge 1.8s ease-in-out infinite; transition: color .15s ease; }
html.abr-apple #root .rich-content .h5 a.h5-late:hover .h5-lf em svg { color: var(--h5-gold); animation: none; transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  html.abr-apple #root .rich-content .h5 .h5-lf em { animation: none; color: var(--h5-navy); background: none; }
  html.abr-apple #root .rich-content .h5 .h5-lf em svg { animation: none; }
}
/* Owner, 2026-10-23: the home page FAQ is one question per row, not two side by side. */
html.abr-apple #root .rich-content .h5 .h5-faq { grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* Owner, 2026-10-23: the four home panels' items as small cards, the 21st.dev "v-card-16" pattern (homev5.php
   home_v5_row): white card, 1px border, 10px corners, light shadow, 10px apart on a faintly warm panel; picture and name
   on the first line with a badge on the right (gold #1-#3 for the casino ranking, RTP, or how many of our casinos carry
   it), one quiet line of facts under it with a coloured dot or icon. Both lines stay on one line, so the cards are one
   height and the four panels still line up. The card lifts a little under the pointer. */
html.abr-apple #root .rich-content .h5 section.h5-panel { background: #FCFBF8; }
html.abr-apple #root .rich-content .h5 .h5-rows.h5-vcs { display: flex !important; flex-direction: column; gap: 10px; margin: 4px 0 10px !important; }
html.abr-apple #root .rich-content .h5 .h5-rows.h5-vcs > li + li { border-top: 0; }
html.abr-apple #root .rich-content .h5 a.h5-row.h5-vc { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--h5-line); border-radius: 10px; background: #fff;
  box-shadow: 0 1px 2px rgba(20, 43, 73, .05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
html.abr-apple #root .rich-content .h5 a.h5-row.h5-vc:hover { background: #fff; border-color: #D4B47F; transform: translateY(-2px); box-shadow: 0 2px 6px rgba(20, 43, 73, .06), 0 10px 22px rgba(20, 43, 73, .09); }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vt { display: flex; align-items: center; gap: 10px; min-width: 0; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-pic { flex: 0 0 34px; width: 34px; border-radius: 8px; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vt > b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--h5-navy); }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vb { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: #F1F2F4; color: #475569; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vb.h5-vtop { background: var(--h5-gold); color: #fff; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vm { display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; font-size: 12.5px; line-height: 1.4; color: var(--h5-mut); white-space: nowrap; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vm > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vm svg { flex: 0 0 auto; width: 13px; height: 13px; color: #94A0B1; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vm .h5-star { margin-right: 0; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vd { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--c, #B9C0CB); }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vm .h5-ok, html.abr-apple #root .rich-content .h5 .h5-vc .h5-vm .h5-warn { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { html.abr-apple #root .rich-content .h5 a.h5-row.h5-vc:hover { transform: none; } }
html.abr-apple[lang^="zh"] #root .rich-content .h5 .h5-vc .h5-vt > b { font-size: 14px; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vm { gap: 12px; }
/* Owner, 2026-10-23: the four panels' "View all" in capitals (VIEW ALL / LIHAT SEMUA). */
html.abr-apple #root .rich-content .h5 .h5-ph a.h5-all { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
/* Owner, 2026-10-23 (evening): the home cards in three parts: the picture about as tall as the card, the name (with one
   quiet line under it where there is one), the key facts stacked on the right. */
html.abr-apple #root .rich-content .h5 a.h5-row.h5-vc { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 0; padding: 12px; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-pic { flex: none; width: 56px; border-radius: 10px; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vt > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; flex: none; max-width: 100%; font-size: 14.5px; line-height: 1.3; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vs { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.4; color: var(--h5-mut); }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vs svg { flex: 0 0 auto; width: 13px; height: 13px; color: #94A0B1; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; text-align: right; white-space: nowrap; font-size: 12.5px; line-height: 1.35; color: var(--h5-mut); }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr small { font-size: 11px; font-weight: 600; color: var(--h5-mut); }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr b.h5-vrtp { font-size: 15px; font-weight: 800; color: var(--h5-navy); font-variant-numeric: tabular-nums; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr b.h5-na { color: #AEB4BD; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr .h5-vsc { display: inline-flex; align-items: center; gap: 3px; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr :is(.h5-ok, .h5-warn) { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr .h5-vb { padding: 1px 8px; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr .h5-vl { display: inline-flex; align-items: flex-start; gap: 5px; line-height: 1.3; text-align: left; }
html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr .h5-vl .h5-vd { margin-top: 4px; }
@media (min-width: 1200px) {
  html.abr-apple #root .rich-content .h5 a.h5-row.h5-vc { grid-template-columns: 50px minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 11px; }
  html.abr-apple #root .rich-content .h5 .h5-vc .h5-pic { width: 50px; }
  html.abr-apple #root .rich-content .h5 .h5-vc .h5-vt > b { font-size: 14px; }
  html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr { font-size: 12px; }
  html.abr-apple #root .rich-content .h5 .h5-vc .h5-vr b.h5-vrtp { font-size: 14px; }
}