/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ===== VARIABLES ===== */
:root{
  --bg:#f5f7fa;
  --fg:#1a2332;
  --card:#ffffff;
  --card-fg:#1a2332;
  --primary:#2563eb;
  --primary-fg:#ffffff;
  --muted:#eef1f5;
  --muted-fg:#5c6a7a;
  --accent:#e69c00;
  --accent-fg:#1a2332;
  --border:#dce1e8;
  --radius:0.5rem;
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --font-serif:'Merriweather',Georgia,serif;
}

/* ===== BASE ===== */
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--fg);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== UTILITIES ===== */
.container{max-width:1280px;margin:0 auto;padding:0 1rem}
.container-narrow{max-width:900px;margin:0 auto;padding:0 1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.text-balance{text-wrap:balance}

/* ===== HEADER ===== */
.site-header{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--border)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:.75rem 1rem}
.site-header .logo img{height:36px;width:auto}
.dropdown-wrap{position:relative}
.dropdown-btn{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;color:var(--muted-fg);background:none;border:none;cursor:pointer;transition:background .15s,color .15s}
.dropdown-btn:hover{background:var(--muted);color:var(--fg)}
.dropdown-btn svg{width:16px;height:16px;transition:transform .2s}
.dropdown-btn.open svg{transform:rotate(180deg)}
.dropdown-panel{display:none;position:absolute;right:0;top:100%;margin-top:.5rem;width:22rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);box-shadow:0 10px 40px rgba(0,0,0,.12);overflow:hidden;z-index:100}
.dropdown-panel.show{display:block}
.dropdown-panel .dp-header{padding:.625rem 1rem;background:var(--muted);border-bottom:1px solid var(--border);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-fg)}
.dropdown-panel ul{list-style:none;max-height:70vh;overflow-y:auto;padding:.25rem 0}
.dropdown-panel li a{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;transition:background .15s;color:var(--fg);text-decoration:none}
.dropdown-panel li a:hover{background:var(--muted)}
.dropdown-panel .rank{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--fg);color:var(--bg);font-size:.6875rem;font-weight:700;flex-shrink:0}
.dropdown-panel .casino-info{flex:1;min-width:0}
.dropdown-panel .casino-name{display:block;font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown-panel .casino-offer{display:block;font-size:.75rem;color:var(--muted-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown-panel .casino-rating{flex-shrink:0;font-size:.75rem;font-weight:700;display:flex;align-items:center;gap:.25rem}
.dropdown-panel .star-icon{width:12px;height:12px;fill:var(--accent);color:var(--accent)}
.dropdown-panel .dp-footer{padding:.625rem 1rem;border-top:1px solid var(--border);background:var(--muted)}
.dropdown-panel .dp-footer a{font-size:.75rem;font-weight:500;color:var(--fg)}

/* ===== HERO ===== */
.hero{background:var(--primary);padding:3.5rem 1rem;text-align:center;color:var(--primary-fg)}
.hero .date-info{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;font-size:.875rem;opacity:.6}
.hero h1{margin-top:1rem;font-family:var(--font-serif);font-size:clamp(2rem,5vw,3.5rem);font-weight:900;line-height:1.15}
.hero .subtitle{margin-top:.75rem;font-size:1.125rem;font-weight:500;opacity:.8}
.hero .intro{margin-top:1.5rem;max-width:720px;margin-left:auto;margin-right:auto;font-size:1rem;opacity:.7;line-height:1.7}

/* ===== TWO-COLUMN LAYOUT ===== */
.two-col{display:flex;gap:2rem;max-width:1280px;margin:0 auto;padding:2.5rem 1rem}
.sidebar-toc{position:sticky;top:6rem;width:16rem;flex-shrink:0;max-height:calc(100vh - 7rem);overflow-y:auto;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);padding:1rem;align-self:flex-start}
.sidebar-toc .toc-title{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:700;color:var(--fg);padding-bottom:.75rem;border-bottom:1px solid var(--border);margin-bottom:.5rem}
.sidebar-toc ol{list-style:none;display:flex;flex-direction:column;gap:.25rem}
.sidebar-toc ol li a{display:flex;align-items:baseline;gap:.5rem;padding:.375rem .5rem;border-radius:var(--radius);font-size:.75rem;line-height:1.4;color:var(--muted-fg);transition:background .15s,color .15s;text-decoration:none}
.sidebar-toc ol li a:hover{background:var(--muted);color:var(--fg)}
.sidebar-toc ol li a.active{background:rgba(37,99,235,.1);color:var(--primary);font-weight:600}
.sidebar-toc ol li a .num{color:rgba(37,99,235,.5);font-weight:500;flex-shrink:0}
.main-content{flex:1;min-width:0}

@media(max-width:1023px){
  .sidebar-toc{display:none}
  .two-col{flex-direction:column}
}

/* ===== ARTICLE SECTIONS ===== */
.article-section{margin-top:3rem}
.article-section h2{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;color:var(--fg);margin-bottom:1rem}
.article-section p{font-size:1rem;line-height:1.7;color:var(--fg);margin-bottom:1rem}
.article-section p:last-child{margin-bottom:0}
.article-section a{font-weight:500;text-decoration:underline}
.widget-wrap{margin:2rem 0}
.widget-wrap iframe{border-radius:var(--radius);border:1px solid var(--border)}

/* ===== COMPARISON TABLE ===== */
.comparison-table{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
.comparison-table table{width:100%;text-align:left;font-size:.875rem;border-collapse:collapse}
.comparison-table thead tr{background:var(--primary);color:var(--primary-fg)}
.comparison-table th{padding:.75rem 1rem;font-weight:600}
.comparison-table td{padding:.75rem 1rem}
.comparison-table tbody tr{border-bottom:1px solid var(--border)}
.comparison-table tbody tr:nth-child(even){background:var(--muted)}
.comparison-table tbody tr:nth-child(odd){background:var(--card)}
.comparison-table .rating-cell{display:flex;align-items:center;gap:.25rem;font-weight:600}
.comparison-table .star-icon{width:14px;height:14px;fill:var(--accent);color:var(--accent)}

/* ===== COLLAPSIBLE MINI REVIEWS ===== */
.mini-reviews{display:flex;flex-direction:column;gap:1rem}
.review-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--card);overflow:hidden}
.review-card .review-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem;cursor:pointer;transition:background .15s;border:none;width:100%;background:none;text-align:left;font-family:inherit;color:inherit}
.review-card .review-header:hover{background:var(--muted)}
.review-card .review-header .left{display:flex;flex-direction:column;gap:.25rem;flex:1}
@media(min-width:640px){
  .review-card .review-header .left{flex-direction:row;align-items:center;gap:1rem}
}
.review-card .review-header .brand-name{font-size:1.125rem;font-weight:700;color:var(--fg)}
.review-card .review-header .brand-rating{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600;color:var(--fg)}
.review-card .review-header .brand-offer{font-size:.875rem;font-weight:500;color:var(--primary)}
.review-card .review-header .chevron{width:20px;height:20px;flex-shrink:0;color:var(--muted-fg);transition:transform .2s}
.review-card .review-header .chevron.open{transform:rotate(180deg)}
.review-card .review-body{display:none;border-top:1px solid var(--border);padding:1rem 1.25rem 1.25rem}
.review-card .review-body.show{display:block}
.review-card .review-body p{font-size:1rem;line-height:1.7;color:var(--muted-fg);margin-bottom:1rem}
.quick-facts{background:var(--muted);border-radius:var(--radius);padding:1rem;margin-bottom:1.5rem}
.quick-facts h4{font-size:.875rem;font-weight:600;color:var(--fg);margin-bottom:.5rem}
.quick-facts dl{display:grid;grid-template-columns:1fr;gap:.5rem}
@media(min-width:640px){.quick-facts dl{grid-template-columns:1fr 1fr}}
.quick-facts dl div{display:flex;gap:.5rem;font-size:.875rem}
.quick-facts dt{font-weight:500;color:var(--fg)}
.quick-facts dd{color:var(--muted-fg)}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border-radius:var(--radius);background:var(--primary);color:var(--primary-fg);font-size:.875rem;font-weight:600;text-decoration:none;transition:opacity .15s}
.btn-primary:hover{opacity:.9;text-decoration:none}

/* ===== FAQ ACCORDION ===== */
.faq-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-item button{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:1rem 1.25rem;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:1rem;font-weight:500;color:var(--fg);transition:background .15s}
.faq-item button:hover{background:var(--muted)}
.faq-item button svg{width:18px;height:18px;flex-shrink:0;color:var(--muted-fg);transition:transform .2s}
.faq-item button.open svg{transform:rotate(180deg)}
.faq-item .faq-answer{display:none;padding:0 1.25rem 1rem;font-size:1rem;line-height:1.7;color:var(--muted-fg)}
.faq-item .faq-answer.show{display:block}

/* ===== RESPONSIBLE GAMBLING BOX ===== */
.rg-box{margin-top:3rem;border-radius:var(--radius);border:2px solid var(--accent);background:rgba(230,156,0,.08);padding:1.5rem}
.rg-box h2{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;color:var(--fg);margin-bottom:1rem}
.rg-box p{font-size:1rem;line-height:1.7;color:var(--fg);margin-bottom:1rem}
.rg-box p:last-of-type{margin-bottom:0}
.rg-notice{margin-top:1rem;border-radius:var(--radius);background:var(--card);padding:1rem;font-size:.875rem;font-weight:500;color:var(--fg)}

/* ===== AUTHOR BOX ===== */
.author-box{margin-top:3rem;display:flex;flex-direction:column;gap:1.5rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);padding:1.5rem}
@media(min-width:768px){
  .author-box{flex-direction:row}
  .author-box .author-half+.author-half{border-left:1px solid var(--border);padding-left:1.5rem;border-top:none;padding-top:0}
}
.author-half{display:flex;gap:1rem;flex:1}
.author-half+.author-half{border-top:1px solid var(--border);padding-top:1.5rem}
.author-half img{width:80px;height:80px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author-half .label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg)}
.author-half .name{font-size:1rem;font-weight:700;color:var(--fg)}
.author-half .cred{font-size:.75rem;color:var(--muted-fg)}
.author-half .bio{margin-top:.5rem;font-size:.875rem;line-height:1.6;color:var(--muted-fg)}

/* ===== FOOTER ===== */
.site-footer{border-top:1px solid var(--border);background:var(--card)}
.site-footer .inner{max-width:1100px;margin:0 auto;padding:2.5rem 1rem}
.footer-grid{display:flex;flex-direction:column;gap:2rem}
@media(min-width:768px){.footer-grid{flex-direction:row;justify-content:space-between}}
.footer-col{max-width:20rem}
.footer-col .logo img{height:32px;width:auto;margin-bottom:.75rem}
.footer-col p{font-size:.875rem;line-height:1.6;color:var(--muted-fg)}
.footer-col h3{font-size:.875rem;font-weight:600;color:var(--fg);margin-bottom:.5rem}
.footer-col nav{display:flex;flex-direction:column;gap:.5rem}
.footer-col nav a{font-size:.875rem;color:var(--muted-fg);transition:color .15s;text-decoration:none}
.footer-col nav a:hover{color:var(--primary)}
.footer-bottom{margin-top:2rem;border-top:1px solid var(--border);padding-top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;font-size:.75rem;color:var(--muted-fg)}
@media(min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between;text-align:left}}

/* ===== SUBPAGE STYLES ===== */
.page-wrap{max-width:900px;margin:0 auto;padding:2.5rem 1rem}
.page-title{font-family:var(--font-serif);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;color:var(--fg);margin-bottom:1rem;line-height:1.2}
.page-desc{font-size:1.125rem;line-height:1.7;color:var(--muted-fg);margin-bottom:2rem}
.page-section{margin-bottom:2rem}
.page-section h2{font-family:var(--font-serif);font-size:1.25rem;font-weight:700;color:var(--fg);margin-bottom:1rem}
.page-section p{font-size:1rem;line-height:1.7;color:var(--fg);margin-bottom:1rem}
.page-section p:last-child{margin-bottom:0}
.page-section ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}
.page-section ul li{font-size:1rem;line-height:1.7;color:var(--fg);margin-bottom:.5rem}
.page-section ul li strong{font-weight:600}

/* Support cards */
.support-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--card);padding:1rem;margin-bottom:1rem}
.support-card h3{font-size:1rem;font-weight:700;color:var(--fg)}
.support-card .detail{font-size:.875rem;color:var(--muted-fg)}
.support-card .desc{margin-top:.5rem;font-size:.875rem;line-height:1.6;color:var(--fg)}

/* Contact form */
.contact-form{border-radius:var(--radius);border:1px solid var(--border);background:var(--card);padding:1.5rem}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;font-size:.875rem;font-weight:500;color:var(--fg);margin-bottom:.375rem}
.form-group input,.form-group select,.form-group textarea{width:100%;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);padding:.5rem .75rem;font-size:.875rem;color:var(--fg);font-family:var(--font-sans)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.form-group textarea{resize:vertical}
.success-msg{text-align:center;padding:2rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--card)}
.success-msg h2{font-size:1.25rem;font-weight:700;color:var(--fg)}
.success-msg p{margin-top:.5rem;font-size:1rem;color:var(--muted-fg)}

/* Info boxes */
.info-box{margin-top:2rem;border-radius:var(--radius);background:var(--muted);padding:1rem;font-size:.875rem;color:var(--muted-fg)}
.info-box strong{color:var(--fg)}

/* CTA accent box */
.accent-box{margin-top:2rem;border-radius:var(--radius);border:2px solid var(--accent);background:rgba(230,156,0,.08);padding:1.5rem;text-align:center}
.accent-box p{font-size:1.125rem;font-weight:700;color:var(--fg);margin:0}
.accent-box p+p{margin-top:.5rem;font-weight:400;font-size:1rem}

/* ===== REVIEW PAGE ===== */
.review-hero{background:var(--primary);padding:3rem 1rem;color:var(--primary-fg)}
.review-hero .container-narrow{max-width:900px;margin:0 auto}
.review-hero .back-link{display:inline-flex;align-items:center;gap:.25rem;font-size:.875rem;opacity:.6;color:var(--primary-fg);margin-bottom:1rem;text-decoration:none}
.review-hero .back-link:hover{opacity:1;text-decoration:none}
.review-hero h1{font-family:var(--font-serif);font-size:clamp(1.75rem,4vw,3rem);font-weight:900;line-height:1.15}
.review-hero .sub{margin-top:.75rem;font-size:1.125rem;opacity:.8}
.review-hero .badges{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.5rem}
.review-hero .badge{padding:.5rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.review-hero .badge-rating{background:rgba(255,255,255,.2)}
.review-hero .badge-rank{background:rgba(255,255,255,.1);font-weight:500}

.offer-card{margin-bottom:2.5rem;border-radius:var(--radius);border:2px solid var(--accent);background:rgba(230,156,0,.08);padding:1.5rem}
.offer-card .label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg)}
.offer-card .offer-text{margin-top:.25rem;font-size:1.25rem;font-weight:700;color:var(--fg)}
.offer-card .offer-detail{margin-top:.25rem;font-size:.875rem;color:var(--muted-fg)}

.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2.5rem}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--card);padding:1rem;text-align:center}
.stat-card .stat-icon{margin:0 auto .5rem;width:24px;height:24px;color:var(--primary)}
.stat-card .stat-label{font-size:.75rem;font-weight:500;color:var(--muted-fg)}
.stat-card .stat-value{margin-top:.25rem;font-size:.875rem;font-weight:700;color:var(--fg)}

.payment-methods{margin-bottom:2.5rem}
.payment-methods .pm-label{font-size:.875rem;font-weight:600;color:var(--fg);display:flex;align-items:center;gap:.5rem}
.payment-methods .pm-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.payment-methods .pm-tag{padding:.25rem .75rem;border-radius:9999px;background:var(--muted);font-size:.75rem;font-weight:500;color:var(--muted-fg)}

.explore-nav{margin-bottom:2.5rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--muted);padding:1.25rem}
.explore-nav h3{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg);margin-bottom:.75rem}
.explore-nav ul{list-style:none;display:grid;grid-template-columns:1fr;gap:.5rem}
@media(min-width:640px){.explore-nav ul{grid-template-columns:1fr 1fr}}
.explore-nav ul li a{font-size:.875rem;font-weight:500}

.rg-banner{margin-bottom:2.5rem;border-radius:var(--radius);border:1px solid var(--accent);background:rgba(230,156,0,.04);padding:1rem;font-size:.875rem;color:var(--fg)}

.review-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2.5rem;padding:1rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--card)}
.review-nav a{font-size:.875rem;font-weight:500;color:var(--primary)}
.review-nav .all-link{color:var(--muted-fg)}

/* ===== NATIVE DETAILS FAQ ===== */
details.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;background:var(--card);overflow:hidden}
details.faq-item+details.faq-item{margin-top:0}
details.faq-item summary{padding:1rem 1.25rem;cursor:pointer;font-size:1rem;font-weight:500;color:var(--fg);list-style:none;transition:background .15s}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::marker{display:none}
details.faq-item summary:hover{background:var(--muted)}
details.faq-item[open] summary{border-bottom:1px solid var(--border)}
details.faq-item .faq-body{padding:1rem 1.25rem}
details.faq-item .faq-body p{font-size:1rem;line-height:1.7;color:var(--muted-fg);margin:0}

/* ===== RESPONSIBLE SECTION ===== */
.responsible-section{border-radius:var(--radius);border:2px solid var(--accent);background:rgba(230,156,0,.08);padding:1.5rem}

/* ===== RESPONSIVE TABLE ===== */
.table-responsive{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);margin:1rem 0}
.table-responsive table{width:100%;text-align:left;font-size:.875rem;border-collapse:collapse}
.table-responsive thead tr{background:var(--primary);color:var(--primary-fg)}
.table-responsive th{padding:.75rem 1rem;font-weight:600}
.table-responsive td{padding:.75rem 1rem}
.table-responsive tbody tr{border-bottom:1px solid var(--border)}
.table-responsive tbody tr:nth-child(even){background:var(--muted)}
.table-responsive tbody tr:nth-child(odd){background:var(--card)}

/* ===== ARTICLE LISTS ===== */
.article-section ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}
.article-section ul li{font-size:1rem;line-height:1.7;color:var(--fg);margin-bottom:.5rem}
.article-section ul li strong{font-weight:600}

/* ===== BACK TO TOP ===== */
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--fg);color:var(--bg);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:40;transition:opacity .2s}
.back-to-top.visible{display:flex}
.back-to-top:hover{opacity:.85}
.back-to-top svg{width:20px;height:20px}