/* gethindi777 — pale-blue product desk with cobalt-command accent
   Visual contract: split-screen hero, masonry rhythm, soft-modular geometry,
   full-bleed imagery, utility-bar nav, condensed-scoreboard type,
   tonal-layering surfaces, progressive-disclosure interaction. */

:root{
  /* pale-blue product-desk surfaces */
  --bg:        #f4f7fb;
  --bg-elev:   #ffffff;
  --bg-deep:   #e3ecf6;
  --ink:       #0d1b2a;
  --ink-mid:   #2e3f55;
  --ink-soft:  #5b6b80;
  --line:      #c9d6e5;

  /* cobalt-command accents */
  --accent:        #1546a4;
  --accent-bright: #2a6cf0;
  --accent-deep:   #0a2a6e;
  --gold:          #d4a017;
  --gold-bright:   #ffd644;

  /* dark-product-lobby for game media + sticky CTA */
  --lobby:        #08163a;
  --lobby-2:      #102457;
  --lobby-ink:    #e8edf8;
  --lobby-line:   #2a3c70;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;

  --shadow-1: 0 1px 2px rgba(13,27,42,.06), 0 2px 6px rgba(13,27,42,.06);
  --shadow-2: 0 4px 14px rgba(13,27,42,.10), 0 10px 30px rgba(13,27,42,.08);
  --shadow-3: 0 12px 40px rgba(13,27,42,.18);

  --container: 1280px;
  --gap: 16px;
  --gap-lg: 24px;
  --header-h: 64px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; overflow-x: clip}
body{
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-bright)}

h1,h2,h3,h4{font-family:'Spectral', Georgia, serif; font-weight:600; line-height:1.18; margin:0 0 .5em; color:var(--ink); letter-spacing:-0.01em}
h1{font-size: clamp(2rem, 4vw, 3rem)}
h2{font-size: clamp(1.5rem, 2.5vw, 2.1rem)}
h3{font-size: 1.25rem}
h4{font-size: 1.05rem}

.container{max-width: var(--container); margin:0 auto; padding: 0 20px}
.section{padding: 56px 0}
.section--tight{padding: 32px 0}

.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 12px;
  background: rgba(21,70,164,.08); color: var(--accent-deep);
  border-radius: 999px; font-size: 11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom: 14px;}

/* ============== HEADER ============== */
.site-header{
  position: sticky; top: 0; z-index: 250;
  background: rgba(244,247,251,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-row{display:flex; align-items:center; gap:20px; min-height: var(--header-h); padding: 0 16px; max-width: var(--container); margin:0 auto; flex-wrap: nowrap}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); text-decoration:none}
.brand img{width:38px; height:38px; border-radius: var(--r-sm)}
.brand-name{font-family:'Spectral',serif; font-size:1.2rem; line-height:1; color:var(--ink)}
.brand-sub{display:block; font-size:10px; color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase; font-weight:600}

.main-nav{display:flex; align-items:center; gap:18px; margin-left:20px; flex:1}
.main-nav a{color: var(--ink-mid); font-size:14px; font-weight:600; padding:8px 6px; border-bottom: 2px solid transparent}
.main-nav a:hover, .main-nav a.active{color: var(--accent); border-color: var(--accent)}

.header-actions{display:flex; align-items:center; gap:10px}
.header-actions .login-link{font-size:13px; font-weight:600; color:var(--ink-mid); padding:8px 14px}
.header-actions .cta-play{
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
  color:#fff; border:none; padding:11px 22px; font-weight:800; font-size:14px;
  border-radius: var(--r-sm); text-decoration:none; letter-spacing:.04em;
  box-shadow: 0 4px 14px rgba(21,70,164,.32);
}
.header-actions .cta-play:hover{transform: translateY(-1px); color:#fff}

.hamburger{display:none; background:none; border:1px solid var(--line); border-radius: var(--r-sm); width:42px; height:42px; cursor:pointer; padding:10px; flex-direction:column; justify-content:space-between}
.hamburger span{display:block; height:3px; background: var(--ink); border-radius:2px; transition:.2s}

.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0; left:auto; width: min(320px, 86vw); max-width: 86vw;
  background: var(--bg-elev); z-index:270; transform: translateX(100%); transition: transform .28s ease;
  box-shadow: -10px 0 40px rgba(0,0,0,.18); padding: 18px; overflow-y: auto;
  visibility:hidden; contain: paint;
}
.mobile-drawer.open{transform: translateX(0); visibility:visible}
.mobile-drawer nav{display:flex; flex-direction:column; gap: 6px; margin-top: 12px}
.mobile-drawer nav a{padding: 14px 12px; font-size: 16px; font-weight:600; color: var(--ink); border-bottom: 1px solid var(--line)}
.drawer-close{position:absolute; top: 12px; right: 12px; background: #fff; border: 1px solid var(--line); border-radius: 50%; font-size: 22px; cursor:pointer; width: 44px; height: 44px; z-index: 40; line-height: 1; padding: 0; color: var(--ink); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-1); pointer-events:auto; touch-action: manipulation; visibility:visible; opacity:1}
body.drawer-open .site-header{visibility:hidden !important; pointer-events:none !important}
.drawer-cta{margin-top: 22px; display:block; text-align:center; background: var(--accent-bright); color:#fff; padding:14px; border-radius: var(--r-sm); font-weight:800}
.drawer-scrim{position:fixed; inset:0; background:rgba(8,22,58,.55); opacity:0; pointer-events:none; transition:.2s; z-index:265}
.drawer-scrim.open{opacity:1; pointer-events:auto}

@media (max-width: 1024px){
  .main-nav, .header-actions .login-link{display:none}
  .hamburger{display:flex}
}

/* ============== HERO — split-screen brand scene ============== */
.editorial-inline{display:block; width:100%; max-width: 920px; height:auto; border-radius: 14px; margin: 18px auto 4px; border: 1px solid rgba(255,255,255,.10); box-shadow: var(--shadow-1)}
.hero{
  background: linear-gradient(135deg, #0a2058 0%, #0a2c70 55%, #1546a4 100%);
  color: var(--lobby-ink);
  position:relative; overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items:center;
  max-width: var(--container); margin:0 auto; padding: 64px 20px 56px;
}
.hero h1{
  color:#fff; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height:1.05; margin-bottom: 18px;
  font-weight: 700;
}
.hero h1 .gold{color: var(--gold-bright); display:block}
.hero-lede{font-size:1.05rem; line-height:1.55; color:#c8d4ec; max-width: 520px; margin-bottom: 22px}
.hero-cta-row{display:flex; gap:14px; flex-wrap:wrap}
.btn-play{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background: linear-gradient(135deg, #ffd644, #d4a017); color:#0a2058;
  font-weight: 900; font-size:17px; padding: 16px 28px; border-radius: var(--r-sm);
  border:none; letter-spacing:.03em; text-decoration:none;
  box-shadow: 0 6px 22px rgba(212,160,23,.45); transition: transform .15s;
}
.btn-play:hover{transform: translateY(-2px); color:#0a2058}
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.22);
  padding: 15px 24px; border-radius: var(--r-sm); font-weight:700; font-size:15px; text-decoration:none;
}
.btn-ghost:hover{background: rgba(255,255,255,.14); color:#fff}

.hero-trust{display:flex; gap: 20px; flex-wrap:wrap; margin-top: 26px; padding-top: 18px; border-top:1px solid rgba(255,255,255,.14)}
.hero-trust div{font-size:13px; color:#b7c6e3}
.hero-trust strong{display:block; color:#fff; font-size:1.05rem; margin-bottom:2px}

.hero-visual{
  position:relative; aspect-ratio: 4/5; max-height: 560px; border-radius: var(--r-lg); overflow:hidden;
  background: rgba(0,0,0,.2); box-shadow: var(--shadow-3);
}
.hero-visual img{width:100%; height:100%; object-fit:cover}
.hero-visual .chip{
  position:absolute; background: rgba(8,22,58,.85); backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); padding: 10px 14px; color:#fff;
}
.hero-visual .chip-1{top:18px; left:18px}
.hero-visual .chip-2{bottom:18px; right:18px}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr; gap: 28px; padding: 48px 20px 40px}
  .hero h1{font-size: 2rem}
  .hero-lede{font-size: 16px}
  .hero-visual{max-height: 380px; aspect-ratio: 16/11}
  .btn-play, .btn-ghost{flex:1 1 100%}
}

/* ============== UTILITY BAR ============== */
.utility-bar{
  background: var(--bg-elev); border-bottom: 1px solid var(--line);
}
.utility-row{display:flex; gap:8px; padding: 14px 16px; align-items:center; flex-wrap: wrap; max-width: var(--container); margin:0 auto}
.utility-row a{font-size: 13px; font-weight:700; color: var(--ink-mid); padding: 8px 14px; border-radius: var(--r-sm); border:1px solid var(--line); background:#fff; white-space: nowrap; max-width: 100%}
.utility-row a:hover{background: var(--accent); color:#fff; border-color: var(--accent)}
.utility-row a.active{background: var(--accent); color:#fff; border-color: var(--accent)}

/* ============== EDITORIAL INDEX ============== */
.index-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px}
.index-card{background: var(--bg-elev); border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-1); border: 1px solid var(--line); transition: transform .15s}
.index-card:hover{transform: translateY(-3px)}
.index-card .num{display:block; font-family:'Spectral',serif; font-size: 1.6rem; font-weight: 700; color: var(--accent); margin-bottom: 6px}
.index-card h3{font-size: 1.05rem; margin: 0 0 6px}
.index-card p{font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin:0}

@media (max-width: 900px){ .index-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 520px){ .index-grid{grid-template-columns: 1fr} }

/* ============== DECISION TABLE ============== */
.decision-table{width:100%; border-collapse: collapse; margin: 16px 0; background: var(--bg-elev); border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-1); table-layout: auto; display: block; overflow-x: auto; max-width: 100%}
.decision-table th, .decision-table td{padding: 12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size: 14px; vertical-align: top; word-break: break-word}
.decision-table th{background: var(--bg-deep); font-weight: 700; color: var(--accent-deep); font-size: 13px; letter-spacing: .04em; text-transform: uppercase}
.decision-table tr:last-child td{border-bottom:0}

/* ============== LOBBY (dark-product-lobby) ============== */
.lobby{background: linear-gradient(180deg, var(--lobby) 0%, var(--lobby-2) 100%); color: var(--lobby-ink); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-2); border:1px solid var(--lobby-line)}
.lobby h2{color:#fff}
.lobby h2 .accent{color: var(--gold-bright)}

.provider-tabs{display:flex; gap:8px; flex-wrap:wrap; margin: 16px 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--lobby-line)}
.provider-tabs button{background: rgba(255,255,255,.06); border:1px solid var(--lobby-line); color: var(--lobby-ink); padding: 9px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 700; cursor: pointer; transition:.15s}
.provider-tabs button:hover{background: rgba(255,255,255,.12); color:#fff}
.provider-tabs button.active{background: var(--accent-bright); border-color: var(--accent-bright); color:#fff}

.lobby-search{display:flex; gap:10px; align-items:center; margin-bottom: 18px}
.lobby-search input{flex:1; background: rgba(255,255,255,.06); border:1px solid var(--lobby-line); color:#fff; padding: 11px 14px; border-radius: var(--r-sm); font-size:14px}
.lobby-search input::placeholder{color: rgba(232,237,248,.5)}

.game-grid{display:grid; grid-template-columns: repeat(5, 1fr); gap: 14px}
@media (max-width: 1100px){ .game-grid{grid-template-columns: repeat(4, 1fr)} }
@media (max-width: 800px){ .game-grid{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 500px){ .game-grid{grid-template-columns: repeat(2, 1fr)} }

.game-card{
  display:flex; flex-direction:column; text-decoration:none; color:#fff;
  background: rgba(0,0,0,.18); border:1px solid var(--lobby-line); border-radius: var(--r-md);
  overflow:hidden; transition: transform .15s, border-color .15s;
}
.game-card:hover{transform: translateY(-2px); border-color: var(--accent-bright); color:#fff}
.game-card .thumb{aspect-ratio: 1/1; overflow:hidden; background: linear-gradient(135deg, #0c1e4a, #1a3270)}
.game-card .thumb img{width:100%; height:100%; object-fit:cover}
.game-card .meta{padding: 10px 12px}
.game-card .meta h4{color:#fff; font-family:'Work Sans', sans-serif; font-size: 13px; font-weight: 700; margin: 0 0 3px; line-height: 1.25; min-height: 32px}
.game-card .meta .prov{font-size: 11px; color: var(--gold-bright); font-weight: 700; text-transform: uppercase; letter-spacing: .05em}

.lobby-meta-row{display:flex; justify-content:space-between; align-items:center; margin: 14px 0 16px; font-size: 13px; color: var(--lobby-ink)}
.lobby-meta-row .count{font-weight: 700; color:#fff}

/* ============== PROMO BAND ============== */
.promo-band{background: linear-gradient(120deg, #0c1f4a 0%, #1546a4 70%, #2a6cf0 100%); color:#fff; padding: 56px 0; position:relative; overflow:hidden}
.promo-band::after{content:""; position:absolute; right: -10%; top: -30%; width:480px; height:480px; background: radial-gradient(circle, rgba(255,214,68,.18), transparent 60%)}
.promo-grid{display:grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items:center; max-width: var(--container); margin:0 auto; padding: 0 20px}
.promo-band h2{color:#fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 14px}
.promo-band p{color:#d2dbf2; font-size: 1.02rem}
.promo-band .btn-play{margin-top: 18px}
.promo-stats{display:grid; grid-template-columns: repeat(2,1fr); gap: 14px}
.promo-stat{background: rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 18px; text-align:center}
.promo-stat strong{display:block; font-size: 1.6rem; color: var(--gold-bright); font-family: 'Spectral', serif; font-weight: 700}
.promo-stat span{font-size: 12px; color:#bdcbe8; letter-spacing: .05em; text-transform: uppercase}

@media (max-width: 900px){.promo-grid{grid-template-columns:1fr} }

/* ============== LATEST ANALYSIS / NEWS ============== */
.news-grid{display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px}
@media (max-width: 900px){.news-grid{grid-template-columns:1fr} }
.news-card{background: var(--bg-elev); border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-1); border:1px solid var(--line); display:flex; flex-direction:column}
.news-card .cover{aspect-ratio: 16/9; overflow:hidden; background: var(--bg-deep)}
.news-card .cover img{width:100%; height:100%; object-fit:cover; transition: transform .35s}
.news-card:hover .cover img{transform: scale(1.04)}
.news-card .body{padding: 14px 16px 18px; flex:1; display:flex; flex-direction:column}
.news-card .tag{display:inline-block; font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px}
.news-card h3{margin: 0 0 8px; font-size: 1.05rem; line-height: 1.3}
.news-card .lead{font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5}
.news-card .meta{display:flex; justify-content:space-between; font-size: 12px; color: var(--ink-soft); margin-top:auto; padding-top: 10px; border-top: 1px solid var(--line)}
.news-card .meta time{font-weight: 600}
.news-card.large h3{font-size: 1.4rem}

.feature-strip{
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  background: linear-gradient(135deg, var(--bg-elev), var(--bg-deep));
  border-radius: var(--r-lg); padding: 32px; border:1px solid var(--line);
}
.feature-strip img{aspect-ratio: 16/10; border-radius: var(--r-md); overflow:hidden; width:100%; object-fit:cover}
@media (max-width: 800px){.feature-strip{grid-template-columns:1fr} }

/* ============== EXPERT NOTE / SAFETY DESK ============== */
.responsible-band{
  background: var(--bg-elev); border:1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--r-md); padding: 28px; display:grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
}
.responsible-band .icon{font-family:'Spectral',serif; font-size: 2.2rem; color: var(--accent)}
.responsible-band h3{margin: 0 0 8px}
.responsible-band p{font-size: 14px; color: var(--ink-mid); margin: 0 0 10px}
.responsible-band ul{margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-soft)}
.responsible-band ul li{margin-bottom: 6px}

@media (max-width: 700px){.responsible-band{grid-template-columns:1fr} }

/* ============== FAQ ============== */
.faq-grid{display:grid; gap: 12px; max-width: 900px; margin: 0 auto}
details.faq{background: var(--bg-elev); border:1px solid var(--line); border-radius: var(--r-md); padding: 0 18px; box-shadow: var(--shadow-1)}
details.faq[open]{border-color: var(--accent)}
details.faq summary{
  cursor:pointer; padding: 16px 0; font-weight:700; font-size: 15.5px; color: var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:16px; list-style:none;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; font-size:22px; color: var(--accent); font-weight: 700; transition: transform .2s; flex-shrink:0}
details.faq[open] summary::after{content:"−"; transform: rotate(0deg)}
details.faq .answer{padding: 0 0 18px; color: var(--ink-mid); font-size: 14.5px; line-height: 1.65}
details.faq .answer p{margin: 0 0 10px}

/* ============== CLOSING ACTION ============== */
.closing-cta{
  background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 100%);
  color:#fff; border-radius: var(--r-xl); padding: 50px 36px; text-align:center;
  position:relative; overflow:hidden;
}
.closing-cta::before{content:""; position:absolute; inset:auto -8% -50% -8%; height: 200px;
  background: radial-gradient(ellipse, rgba(255,214,68,.25), transparent 65%); }
.closing-cta h2{color:#fff; font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 12px}
.closing-cta p{color:#c8d4ec; max-width: 600px; margin: 0 auto 22px}

/* ============== TOPIC RAIL ============== */
.topic-rail{display:grid; grid-template-columns: repeat(6, 1fr); gap: 10px}
@media (max-width: 900px){.topic-rail{grid-template-columns: repeat(3,1fr)} }
@media (max-width: 500px){.topic-rail{grid-template-columns: repeat(2,1fr)} }
.topic-chip{
  background: var(--bg-elev); border:1px solid var(--line); padding: 16px 14px; text-align:center;
  border-radius: var(--r-md); font-size: 13px; font-weight: 700; color: var(--ink); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap: 8px; transition: border-color .15s, transform .15s;
}
.topic-chip:hover{border-color: var(--accent); color: var(--accent); transform: translateY(-2px)}
.topic-chip .ico{font-size: 1.4rem}

/* ============== CHILD PAGE LAYOUTS ============== */
.page-hero{background: linear-gradient(135deg, #0a2058, #1546a4); color:#fff; padding: 60px 0 50px}
.page-hero h1{color:#fff; font-size: clamp(1.9rem, 3.5vw, 2.8rem); margin-bottom: 12px}
.page-hero p{color:#c8d4ec; font-size: 1.05rem; max-width: 700px}
.page-hero .breadcrumb{font-size: 13px; color: #9eb1d3; margin-bottom: 14px}
.page-hero .breadcrumb a{color:#c8d4ec}

.content{max-width: 920px; margin: 0 auto; padding: 40px 20px 60px}
.content h2{margin-top: 36px; color: var(--accent-deep); border-bottom: 2px solid var(--line); padding-bottom: 8px}
.content h3{margin-top: 22px}
.content p{margin-bottom: 16px; font-size: 16.5px; line-height: 1.7; color: var(--ink-mid)}
.content ul, .content ol{margin-bottom: 16px; padding-left: 22px; color: var(--ink-mid)}
.content li{margin-bottom: 8px; font-size: 16px; line-height: 1.6}
.content strong{color: var(--ink)}
.content blockquote{border-left: 4px solid var(--accent); margin: 18px 0; padding: 12px 18px; background: var(--bg-deep); font-style: italic; color: var(--ink-mid); border-radius: 0 var(--r-sm) var(--r-sm) 0}

.info-card{background: var(--bg-elev); border:1px solid var(--line); border-radius: var(--r-md); padding: 22px; margin: 18px 0; box-shadow: var(--shadow-1)}
.info-card h3{margin-top:0; color: var(--accent-deep)}
.callout{background: rgba(21,70,164,.07); border:1px solid rgba(21,70,164,.18); border-left: 4px solid var(--accent);
  padding: 18px 22px; border-radius: var(--r-sm); margin: 18px 0}
.callout strong{color: var(--accent-deep)}

/* ============== FOOTER ============== */
.site-footer{background: linear-gradient(180deg, #061636 0%, #040d24 100%); color:#bdc6da; padding: 56px 0 24px; margin-top: 80px}
.footer-grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; max-width: var(--container); margin: 0 auto; padding: 0 20px}
@media (max-width: 900px){.footer-grid{grid-template-columns: 1fr 1fr} }
@media (max-width: 520px){.footer-grid{grid-template-columns: 1fr} }
.footer-col h4{color:#fff; font-family:'Work Sans',sans-serif; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px}
.footer-col a{display:block; color:#9caacb; font-size: 14px; padding: 6px 0; text-decoration:none}
.footer-col a:hover{color:#fff}
.footer-col ul{list-style:none; padding:0; margin:0}
.footer-brand{display:flex; gap: 12px; align-items:center; margin-bottom: 14px}
.footer-brand img{width:44px; height:44px; border-radius: var(--r-sm)}
.footer-brand strong{display:block; color:#fff; font-size: 1.1rem}
.footer-brand span{display:block; font-size: 11px; color:#7b89a8; letter-spacing: .08em; text-transform: uppercase}
.footer-cta{margin-top: 14px}

.footer-legal{max-width: var(--container); margin: 30px auto 0; padding: 20px; border-top: 1px solid #142457; display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap; font-size: 12px; color:#8593b6}
.footer-legal a{color:#8593b6}

/* ============== STICKY MOBILE AFFILIATE CTA ============== */
.sticky-cta{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 240;
  background: var(--lobby); color:#fff; padding: 10px 12px;
  box-shadow: 0 -8px 28px rgba(0,0,0,.28); display: none;
}
.sticky-cta a{
  display:flex; align-items:center; justify-content:center; gap: 10px;
  background: linear-gradient(135deg, #ffd644, #d4a017); color:#0a2058;
  width:100%; padding: 16px 18px; border-radius: var(--r-sm); font-weight: 900; font-size: 16px;
  text-decoration:none; letter-spacing: .04em;
}
.sticky-cta a:hover{color:#0a2058}
.sticky-cta-close{position:absolute; top: -34px; right: 12px; background:#fff; color: var(--ink); border: none; border-radius: 50%; width:30px; height:30px; font-weight:800; cursor:pointer; box-shadow: var(--shadow-2); display: flex; align-items: center; justify-content: center}

@media (max-width: 768px){
  .sticky-cta{display:block}
  body{padding-bottom: 76px}
  .site-footer{padding-bottom: 90px}
}

/* ============== PROGRESSIVE DISCLOSURE HELPER ============== */
.collapsible-trigger{background:none; border:1px solid var(--line); padding: 12px 18px; border-radius: var(--r-sm); cursor:pointer; font-weight:700; color: var(--accent-deep); display:inline-flex; align-items:center; gap:8px}
.collapsible-trigger:hover{background: var(--bg-deep)}
.collapsible-content{margin-top: 14px; display:none; animation: slideDown .25s ease-out}
.collapsible-content.open{display:block}
@keyframes slideDown{from{opacity:0; transform: translateY(-6px)} to{opacity:1; transform: translateY(0)}}

/* utility */
.text-center{text-align:center}
.mt-2{margin-top:16px} .mt-3{margin-top:24px} .mt-4{margin-top:32px}
.mb-2{margin-bottom:16px} .mb-3{margin-bottom:24px}
.flex{display:flex; gap:12px; flex-wrap:wrap}
.badge{display:inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(21,70,164,.1); color: var(--accent-deep); letter-spacing: .04em; text-transform: uppercase}

/* Image gallery on child pages */
.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0}
@media (max-width: 700px){.gallery{grid-template-columns: repeat(2,1fr)} }
.gallery img{aspect-ratio: 4/3; object-fit:cover; border-radius: var(--r-sm)}

/* Comparison board - used on review page */
.compare-board{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0}
@media (max-width: 800px){.compare-board{grid-template-columns: 1fr} }
.compare-board .card{background: var(--bg-elev); border:1px solid var(--line); border-radius: var(--r-md); padding: 20px}
.compare-board .card .tag{display:inline-block; padding: 4px 10px; background: var(--accent-deep); color:#fff; border-radius: var(--r-sm); font-size:11px; font-weight:700; letter-spacing: .05em; margin-bottom: 10px}

/* VIP table */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling: touch; max-width:100%; border-radius: var(--r-md); border: 1px solid var(--line)}
.vip-table{width:100%; border-collapse:collapse; margin: 0; font-size: 13.5px; min-width: 540px}
.vip-table th, .vip-table td{padding: 10px 8px; border-bottom:1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap}
.vip-table th{background: var(--accent-deep); color:#fff; font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em}
.vip-table tr:nth-child(even) td{background: var(--bg-deep)}
.vip-table .level{font-weight: 700; color: var(--accent-deep)}
@media (max-width: 600px){
  .vip-table{font-size: 12px}
  .vip-table th, .vip-table td{padding: 8px 6px; font-size: 11.5px}
}

/* Process steps */
.process{display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0}
@media (max-width: 800px){.process{grid-template-columns: repeat(2,1fr)} }
.process .step{background: var(--bg-elev); border:1px solid var(--line); border-radius: var(--r-md); padding: 18px; text-align: center; position:relative}
.process .step .num{width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight: 800; margin-bottom: 10px}
.process .step h4{font-size: 14.5px; margin: 0 0 6px; color: var(--accent-deep)}
.process .step p{font-size: 13px; color: var(--ink-soft); margin:0}

/* section-heading row */
.section-heading{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap: 12px; margin-bottom: 20px}
.section-heading h2{margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem)}
.section-heading .sub{color: var(--ink-soft); font-size: 14px; max-width: 540px}
.section-heading a.see-all{font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap}

.bg-tone{background: var(--bg-deep)}
.bg-tone-2{background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%)}

/* chip inline */
.chip-inline{display:inline-block; background: var(--bg-deep); color: var(--accent-deep); padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-right: 6px}

/* Scrollbar / focus */
:focus-visible{outline: 3px solid var(--accent-bright); outline-offset: 2px; border-radius: 4px}
::selection{background: var(--accent-bright); color: #fff}
html{scrollbar-color: var(--accent) var(--bg-deep)}

/* a11y: prose links must not rely on color alone (LH link-in-text-block) */
p a,
li a,
td a,
dd a,
.section p a,
.prose a,
article p a,
.cookie-panel p a,
.cookie-panel a,
.footer-legal a,
.hero-lede a,
.card p a,
.lobby p a,
.container > p a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
/* Keep chrome undecorated */
.main-nav a,
.mobile-drawer a,
.mobile-drawer nav a,
.header-actions a,
.brand,
.cta-play,
.btn-play,
.game-card,
.drawer-cta,
.sticky-cta a,
.utility-bar a,
.utility-row a,
.login-link,
.footer-col a,
.footer-col ul a,
.hero a.cta-play,
a.btn,
a.button,
a.see-all,
.section-heading a.see-all {
  text-decoration: none !important;
}

/* PAGESPEED-MOBILE-001: let inline <code> wrap on small viewports
   so long asset URLs in the game detail template never force a
   horizontal reflow (bodyScrollWidth=535 @ 360 CSS-px). */
code {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  display: inline-block;
}