/* crickex.ing design system: Crickex brand palette.
   Light grey page, Crickex blue chrome, white cards, green sign-up and blue
   login actions. Swap the tokens below to adjust the brand. */
:root {
  --page: #eef1f5;         /* page background */
  --card: #ffffff;         /* cards, tiles, table heads */
  --card-2: #f6f8fb;       /* hover, zebra, subtle fills */
  --rule: #dfe3e9;         /* borders */
  --ink: #232a33;          /* body text */
  --muted: #5d6673;        /* secondary text */
  --blue: #015cab;         /* header, headings accent: matches the logo background */
  --blue-deep: #083d7d;    /* tab bar, footer, hero */
  --blue-hi: #1d72d8;      /* active tab, login button */
  --link: #0f62c7;
  --green: #4fb52b;        /* sign up, primary action */
  --green-hi: #43a024;
  --red: #e8262c;          /* logo X accent */
  --gold: #f4b31c;         /* highlights */
  --verify-bg: #fff0a0;
  --verify-ink: #3b3100;

  --f-display: "Roboto", "Segoe UI", Arial, sans-serif;
  --f-body: "Roboto", "Hind Siliguri", "Noto Sans Bengali", "Segoe UI", Arial, sans-serif;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --shadow: 0 1px 2px rgba(16,40,80,.06), 0 2px 8px rgba(16,40,80,.06);
  --wrap: 75rem;
  --measure: 72ch;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 1rem/1.65 var(--f-body);
  text-rendering: optimizeLegibility;
}
html[lang^="bn"] body { font-family: "Hind Siliguri", "Noto Sans Bengali", var(--f-body); line-height: 1.75; }
img, svg { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
p { margin: 0 0 var(--s-4); max-width: var(--measure); }
strong { font-weight: 700; }

h1, h2, h3, .sb-title, .tile-title { font-family: var(--f-display); font-weight: 700; line-height: 1.15; color: var(--ink); }
html[lang^="bn"] h1, html[lang^="bn"] h2, html[lang^="bn"] h3,
html[lang^="bn"] .sb-title, html[lang^="bn"] .tile-title { font-family: "Hind Siliguri", var(--f-body); font-weight: 600; line-height: 1.3; }
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0 0 var(--s-4); max-width: 22ch; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0 0 var(--s-4); }
h3 { font-size: 1.15rem; margin: 0 0 var(--s-2); }

.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: var(--s-2) var(--s-4); z-index: 50; }
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* ---------- header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--blue); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.hdr-inner { max-width: var(--wrap); margin: 0 auto; padding: var(--s-3) var(--s-5); display: flex; align-items: center; gap: var(--s-5); }
.brand { display: flex; align-items: center; color: #fff; text-decoration: none; flex: none; }
.brand-logo { height: 32px; width: auto; }
@media (max-width: 560px) { .brand-logo { height: 26px; } }
.brand-text { font: italic 900 1.9rem/1 var(--f-display); letter-spacing: -.02em; color: #fff; }
.brand-text span { color: var(--red); text-shadow: -2px 0 0 #fff; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-4); }
.site-nav ul a { color: #fff; text-decoration: none; font-weight: 500; padding: var(--s-2) 0; border-bottom: 2px solid transparent; }
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { border-bottom-color: #fff; }
.hdr-actions { display: flex; align-items: center; gap: var(--s-3); }
.lang { color: #fff; font-size: .9rem; text-decoration: none; border: 1px solid rgba(255,255,255,.45); padding: .2rem .55rem; border-radius: var(--r-sm); }
.lang:hover { color: #fff; border-color: #fff; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: var(--r-sm); padding: .4rem .7rem; gap: .4rem; align-items: center; font: inherit; cursor: pointer; }
.nav-toggle .ico { width: 20px; height: 20px; }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .6rem 1.35rem; border-radius: var(--r-sm); font-weight: 500; text-decoration: none; border: 1px solid transparent; line-height: 1.2; }
.btn-primary, .btn-signup { background: var(--green); color: #fff; }
.btn-primary:hover, .btn-signup:hover { background: var(--green-hi); color: #fff; }
.btn-login { background: var(--blue-hi); color: #fff; }
.btn-login:hover { background: #1563c2; color: #fff; }
.btn-secondary { border-color: var(--blue); color: var(--blue); background: var(--card); }
.btn-secondary:hover { background: var(--blue); color: #fff; }
.btn-sm { min-height: 36px; padding: .35rem 1.6rem; font-size: .92rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* ---------- layout */
main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-5) var(--s-8); }
.block { padding-top: var(--s-6); }
.block > h2 { border-left: 4px solid var(--blue); padding-left: var(--s-3); line-height: 1.2; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; font-size: .88rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: var(--s-2); color: var(--muted); }
.crumbs a { color: var(--muted); }

/* ---------- hero (home): blue banner */
.hero {
  position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s-6); align-items: center;
  margin: var(--s-4) 0 0; padding: var(--s-7) var(--s-6); border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(circle at 85% 20%, rgba(79,181,43,.28), transparent 40%),
              linear-gradient(120deg, var(--blue-deep), var(--blue) 60%, var(--blue-hi));
  color: #fff;
}
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.lede p { font-size: 1.08rem; }
.hero .lede p { color: #e7efff; }
.hero .btn-secondary { background: transparent; border-color: #fff; color: #fff; }
.hero .btn-secondary:hover { background: #fff; color: var(--blue); }

/* ---------- task board (hero card) */
.scoreboard { background: var(--card); color: var(--ink); border-radius: var(--r-lg); box-shadow: 0 12px 30px rgba(0,0,0,.25); padding: var(--s-4) var(--s-4) var(--s-3); }
.sb-title { font-size: 1.15rem; margin: 0 0 var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); }
.scoreboard ul { list-style: none; margin: 0; padding: 0; }
.scoreboard li + li { border-top: 1px solid var(--rule); }
.scoreboard a { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; padding: .65rem .25rem; color: var(--ink); text-decoration: none; }
.sb-task { font-weight: 500; }
.sb-dest { font-weight: 700; font-size: .85rem; color: #fff; background: var(--blue-hi); border-radius: 999px; padding: .15rem .7rem; }
.scoreboard a:hover { background: var(--card-2); }
.sb-foot { font-size: .82rem; color: var(--muted); margin: var(--s-3) 0 0; }

/* ---------- category chips */
.chips { min-width: 0; max-width: 100%; }
.chips ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: var(--s-2) 0; }
.chips a { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; padding: .5rem .95rem; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 500; box-shadow: var(--shadow); }
.chips a:hover { border-color: var(--blue); color: var(--blue); }
.chips .ico { width: 18px; height: 18px; color: var(--blue); flex: none; }
.ico { flex: none; }
main > .chips { margin-top: var(--s-4); }

/* ---------- tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.tile { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); text-decoration: none; color: var(--ink); border-top: 3px solid var(--blue); box-shadow: var(--shadow); }
.tile .ico { width: 30px; height: 30px; color: var(--blue); }
.tile-title { font-size: 1.15rem; }
.tile-desc { color: var(--muted); font-size: .95rem; }
.tile:hover { border-color: var(--blue); color: var(--ink); }
.tone-pitch { border-top-color: var(--green); } .tone-pitch .ico { color: var(--green); }
.tone-amber { border-top-color: var(--gold); } .tone-amber .ico { color: #d99a00; }
.tone-slate { border-top-color: var(--blue); }
.tiles-compact { grid-template-columns: repeat(4, 1fr); }
.tiles-compact .tile { padding: var(--s-4); }

/* ---------- page head (silo pages) */
.page-head { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-4); padding: var(--s-6); background: var(--card); border-radius: var(--r-lg); border-top: 4px solid var(--blue); box-shadow: var(--shadow); }
.page-head h1 { margin-bottom: var(--s-3); }
.page-head .lede p:first-child { font-size: 1.1rem; }
.page-head .actions { margin-top: var(--s-2); }

/* ---------- silo layout with on-page navigation */
.with-toc { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s-6); align-items: start; }
.toc { position: sticky; top: 5.5rem; margin-top: var(--s-6); padding: var(--s-4); background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); }
.toc-h { font-weight: 700; margin-bottom: var(--s-2); color: var(--ink); font-size: .9rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.toc a { display: block; padding: .3rem 0 .3rem var(--s-3); color: var(--muted); text-decoration: none; font-size: .9rem; line-height: 1.35; margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--blue); border-left-color: var(--blue); }

/* ---------- steps (real sequences only) */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; max-width: 54rem; background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: var(--s-4); padding: var(--s-4); border-bottom: 1px solid var(--rule); }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(s); grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font: 700 1rem var(--f-display); }
.steps strong { display: block; font-size: 1.02rem; }
.steps span { color: var(--muted); }

.checks { list-style: none; margin: 0 0 var(--s-4); padding: 0; max-width: 54rem; }
.checks li { position: relative; padding: .4rem 0 .4rem 1.9rem; }
.checks li::before { content: ""; position: absolute; left: .2rem; top: .9rem; width: .8rem; height: .45rem; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }

/* ---------- tables */
.table-wrap { overflow-x: auto; margin: 0 0 var(--s-4); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: .95rem; }
caption { text-align: left; padding: var(--s-2) var(--s-4); color: var(--muted); font-size: .85rem; caption-side: bottom; }
th, td { text-align: left; vertical-align: top; padding: .7rem var(--s-4); border-bottom: 1px solid var(--rule); }
thead th { background: var(--blue); color: #fff; font-weight: 500; }
tbody tr:nth-child(even) td { background: var(--card-2); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- callouts, verify marks, empty states */
.callout { border-left: 4px solid var(--blue); background: #e8f1fd; padding: var(--s-4) var(--s-5); border-radius: 0 var(--r-md) var(--r-md) 0; margin: var(--s-4) 0; max-width: 54rem; }
.callout-warn { border-left-color: var(--gold); background: #fff6df; }
.callout-title { display: block; margin-bottom: var(--s-1); }
.callout p:last-child, .callout div > :last-child { margin-bottom: 0; }
mark.verify { background: var(--verify-bg); color: var(--verify-ink); padding: 0 .2em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.verify::after { content: " ⚑"; font-size: .8em; }
.empty-state { color: var(--muted); background: var(--card); border: 1px dashed var(--rule); border-radius: var(--r-md); padding: var(--s-5); max-width: 54rem; }

/* ---------- game cards, providers, promos */
.game-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.game-card a { display: flex; flex-direction: column; gap: .2rem; color: var(--ink); text-decoration: none; }
.game-card img, .gc-art { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--r-md); background: var(--card-2); display: grid; place-items: center; }
.gc-art .ico { width: 40px; height: 40px; color: var(--muted); }
.gc-name { font-weight: 600; }
.gc-meta { color: var(--muted); font-size: .85rem; }
.provider-grid { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-2); }
.provider-grid li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: var(--s-3); text-align: center; font-weight: 500; font-size: .9rem; box-shadow: var(--shadow); }
.provider-grid li > img { display: block; width: 56px; height: 56px; object-fit: contain; margin: 0 auto var(--s-2); }
.pay-method { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; }
.pay-method img { width: auto; height: 26px; max-width: 64px; object-fit: contain; flex: none; }
.promo-banner { margin: 0; }
.promo-banner img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.promo-img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); margin-bottom: var(--s-3); }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s-3); }
.promo { min-width: 0; }
.promo { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow); border-top: 3px solid var(--green); }
.promo h3 { color: var(--blue-deep); }
.promo p { color: var(--muted); font-size: .95rem; }
.promo-terms { color: var(--ink); font-size: .9rem; padding-left: 1.1rem; margin: 0 0 var(--s-3); }
.promo > a { margin-top: auto; align-self: flex-start; background: var(--blue-hi); color: #fff; text-decoration: none; padding: .35rem 1rem; border-radius: var(--r-sm); font-size: .9rem; font-weight: 500; }
.promo > a:hover { background: var(--blue); color: #fff; }
.promo-label { display: inline-block; margin-left: var(--s-2); font-size: .75rem; color: var(--blue); background: #e8f1fd; border-radius: 999px; padding: 0 .55rem; }
.example-note { font-size: .85rem; color: var(--muted); }

/* ---------- FAQ */
.faq { max-width: 54rem; background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); }
.faq-item { border-bottom: 1px solid var(--rule); padding: 0 var(--s-4); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { cursor: pointer; list-style: none; padding: var(--s-4) 2.5rem var(--s-4) 0; font-weight: 500; font-size: 1.02rem; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: .3rem; top: .55rem; font: 400 1.6rem var(--f-display); color: var(--blue); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item > div { padding: 0 0 var(--s-3); color: var(--muted); }

/* ---------- related */
.related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.related a { display: flex; flex-direction: column; height: 100%; padding: var(--s-4); background: var(--card); border-radius: var(--r-md); text-decoration: none; color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.related a:hover { border-color: var(--blue); }
.related span { font-weight: 700; color: var(--blue-deep); }
.related small { color: var(--muted); font-size: .88rem; }

.trust { margin-top: var(--s-4); }
.trust > h2 { border-left-color: var(--green); }

/* ---------- game lobby (homepage) */
.lobby-tabs { display: none; }
.lobby.is-tabbed .lobby-tabs { display: flex; overflow-x: auto; background: var(--blue-deep); border-radius: var(--r-md); margin-bottom: var(--s-4); scrollbar-width: thin; }
.lobby-tabs button { flex: 0 0 auto; min-width: 90px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: .8rem 1rem .7rem; border: 0; background: transparent; color: #fff; font: 500 .85rem var(--f-display); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; }
.lobby-tabs button .ico { width: 30px; height: 30px; stroke-width: 1.5; }
.lobby-tabs button:hover { background: rgba(255,255,255,.08); }
.lobby-tabs button[aria-selected="true"] { background: var(--blue-hi); }
.lobby-tabs button:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.lobby-panel { margin-bottom: var(--s-5); }
.lobby-panel h3 { font-size: .95rem; font-weight: 700; text-transform: uppercase; border-left: 3px solid var(--blue); padding-left: var(--s-2); margin-bottom: var(--s-3); }
.lobby-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s-2); }
.lobby-grid a { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-2); background: var(--card); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; text-align: center; height: 100%; box-shadow: var(--shadow); border: 1px solid transparent; }
.lobby-grid a:hover { border-color: var(--blue-hi); }
.lobby-grid img { width: 64px; height: 64px; object-fit: contain; }
.lt-name { font-size: .88rem; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb-ph { display: grid; place-items: center; width: 64px; height: 64px; padding: 4px; border: 1px dashed #b9c3d0; border-radius: var(--r-sm); background: var(--card-2); color: var(--muted); font-size: .5rem; line-height: 1.2; word-break: break-all; text-align: center; }

/* ---------- footer */
.site-footer { background: var(--blue-deep); color: #d7e3f5; }
.ft-inner { max-width: var(--wrap); margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-6); }
.ft-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); }
.ft-h { font-size: 1rem; font-weight: 700; margin: 0 0 var(--s-3); color: #fff; }
.ft-cols ul { list-style: none; margin: 0; padding: 0; }
.ft-cols li { padding: .2rem 0; }
.ft-cols a { color: #c4d4ec; text-decoration: none; font-size: .93rem; }
.ft-cols a:hover { color: #fff; text-decoration: underline; }
.ft-social { margin-top: var(--s-6); }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; }
.social a:hover { background: var(--blue-hi); color: #fff; }
.social .ico { width: 20px; height: 20px; }
.ft-note { display: flex; gap: var(--s-4); align-items: flex-start; margin: var(--s-6) 0 var(--s-3); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.15); color: #c4d4ec; font-size: .88rem; max-width: none; }
.age { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--red); color: #fff; background: var(--red); font: 700 1rem var(--f-display); }
.ft-copy { color: #9fb5d6; font-size: .85rem; margin: 0; }

/* ---------- responsive */
@media (max-width: 1100px) {
  .site-nav ul { gap: var(--s-3); }
  .site-nav ul a { font-size: .95rem; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6) var(--s-5); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .with-toc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .chips ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; padding: var(--s-2) var(--s-1) var(--s-3); margin: 0 calc(var(--s-1) * -1); }
  .chips ul::-webkit-scrollbar { display: none; }
  .chips li { flex: none; scroll-snap-align: start; }
  .toc { display: none; }
  .tiles-compact { grid-template-columns: repeat(2, 1fr); }
  .ft-cols { grid-template-columns: repeat(2, 1fr); }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--blue); border-top: 1px solid rgba(255,255,255,.15); flex-direction: column; align-items: stretch; padding: var(--s-4) var(--s-5) var(--s-5); gap: var(--s-4); box-shadow: 0 6px 12px rgba(0,0,0,.2); }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: var(--s-3) 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .hdr-actions { flex-wrap: wrap; }
  .hdr-inner { position: relative; }
}
@media (max-width: 560px) {
  main, .hdr-inner, .ft-inner { padding-left: var(--s-4); padding-right: var(--s-4); }
  .hero { padding: var(--s-5) var(--s-4); }
  .page-head { padding: var(--s-5) var(--s-4); }
  .tiles, .tiles-compact { grid-template-columns: 1fr; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .btn { width: 100%; }
  .hdr-actions .btn { width: auto; }
  .lobby-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-text { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .site-header, .site-footer, .actions, .chips, .lobby-tabs { display: none; } body { background: #fff; color: #000; } }

/* Back-to-top button (injected by site.js). Primary = header blue, accent = sign-up green, hover icon = deep blue (4:1 on green). */
.scroll-top { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; margin: 0; border: 2px solid #4fb52b; border: 2px solid var(--green, #4fb52b); border-radius: 50%; background: #015cab; background: var(--blue, #015cab); color: #fff; box-shadow: 0 4px 12px rgba(8,61,125,.28), 0 1px 3px rgba(0,0,0,.18); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; }
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .2s ease, transform .2s ease, visibility 0s, background-color .15s ease, color .15s ease; }
.scroll-top svg { width: 22px; height: 22px; display: block; pointer-events: none; }
.scroll-top:hover, .scroll-top:focus-visible { background: #4fb52b; background: var(--green, #4fb52b); color: #083d7d; color: var(--blue-deep, #083d7d); }
.scroll-top:focus { outline: none; }
.scroll-top:focus-visible { outline: 3px solid #083d7d; outline: 3px solid var(--blue-deep, #083d7d); outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(8,61,125,.28); }
@media (max-width: 767px) { .scroll-top { right: 16px; bottom: 16px; width: 46px; height: 46px; min-width: 44px; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .scroll-top, .scroll-top.is-visible { transition: none; transform: none; } }
@media print { .scroll-top { display: none; } }