/* Inner pages — catalogue, information pages, legal documents, contact, auth,
 * account, 404. Same language as the home page: arches, hairlines, roman numerals.
 *
 * Vocabulary (use these, do not invent per page):
 *   .split / .split--flip / .split__media   text + arched photo
 *   .prose                                  long text: p, h3, ul, ol, table
 *   .panel                                  surface card for a text block
 *   .tiles > .tile (.tile__icon, h3, p)     grid of short facts
 *   .doc > .toc + .doc__body > .doc__sec    legal document with sticky contents
 *   .hiw > li (.rn--lg, h3, .prose)         numbered step-by-step
 *   .orgs > .org                            support organisations
 *   .cta-band                               closing call to action
 *   .stats > .stat                          numbers taken from data, never typed
 */

.sec--tight { padding: calc(var(--sec) * .55) 0; }
.sec--alt { background: var(--surface-1); }

/* ---------- prose ---------- */
.prose { color: var(--color-text-2); font-size: 16px; max-width: 72ch; }
.prose > * + * { margin-top: 14px; }
.prose h3 { font: 600 18px/1.35 var(--font-body); letter-spacing: 0; color: var(--color-text); margin-top: 26px; }
.prose strong { color: var(--color-text); }
.prose ul, .prose ol { padding: 0; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--color-gold); }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 30px; counter-increment: n; }
.prose ol li::before { content: counter(n) "."; position: absolute; left: 0; color: var(--color-gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.prose .table-wrap { margin-top: 18px; }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split--flip { grid-template-columns: 5fr 7fr; }
.split--flip > .split__media { order: -1; }
.split > * { min-width: 0; }
.split__media { position: relative; max-width: 440px; width: 100%; justify-self: center; }
.split__media .arch-photo { aspect-ratio: 100/128; }
.split__media .arch-outline { inset: 0; height: 100%; }
.split__cap { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4; white-space: nowrap; }

/* ---------- panel & tiles ---------- */
.panel { padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--hair); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.panel::before { content: ""; position: absolute; right: 0; top: 0; width: 240px; height: 160px; background: var(--lattice) center/36px 54px; opacity: .07; -webkit-mask: linear-gradient(225deg, #000, transparent 70%); mask: linear-gradient(225deg, #000, transparent 70%); pointer-events: none; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tile { padding: 22px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--hair); transition: border-color .25s, transform .3s var(--ease-spring); }
.tile:hover { border-color: var(--hair-gold); transform: translateY(-3px); }
.tile__icon { width: 44px; height: 52px; display: grid; place-items: center; padding-top: 6px; color: var(--color-gold); background: var(--surface-3); -webkit-mask: var(--ogee) center/100% 100%; mask: var(--ogee) center/100% 100%; margin-bottom: 14px; }
.tile__icon .icon { width: 20px; height: 20px; }
.tile h3 { font: 600 16px/1.3 var(--font-body); letter-spacing: 0; }
.tile p { margin-top: 8px; font-size: 14.5px; color: var(--color-text-2); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.stat { padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--hair-gold-2); background: var(--gold-tint); text-align: center; }
.stat b { display: block; font: 500 34px/1 var(--font-head); color: var(--color-gold); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--color-text-2); }

/* ---------- legal document ---------- */
.doc { display: grid; grid-template-columns: 280px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto; padding: 20px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--hair); scrollbar-width: thin; }
.toc h2 { font: 600 11px/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 12px; }
.toc ol { display: grid; gap: 2px; counter-reset: t; }
.toc a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; color: var(--color-text-2); text-decoration: none; counter-increment: t; transition: background-color .2s, color .2s; }
.toc a::before { content: counter(t, decimal-leading-zero); color: var(--color-gold); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 1px; }
.toc a:hover { color: var(--color-text); background: var(--surface-2); }
.toc a.is-active { color: var(--color-text); background: var(--gold-tint); }
.doc__body { min-width: 0; counter-reset: s; }
.updated { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-2); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); margin-bottom: 28px; }
.updated .icon { color: var(--color-gold); width: 16px; height: 16px; }
.doc__sec { padding: 28px 0; border-top: 1px solid var(--hair); scroll-margin-top: 90px; counter-increment: s; }
.doc__sec:first-of-type { border-top: 0; padding-top: 0; }
.doc__sec > h2 { display: flex; align-items: baseline; gap: 14px; font: 500 clamp(22px, 2.2vw, 28px)/1.2 var(--font-head); }
.doc__sec > h2::before { content: counter(s, decimal-leading-zero); font: 500 14px/1 var(--font-head); color: var(--color-gold); letter-spacing: .08em; flex: none; }
.doc__sec .prose { margin-top: 14px; }

/* ---------- step-by-step (How It Works) ---------- */
.hiw { display: grid; gap: 18px; counter-reset: h; position: relative; }
.hiw > li { display: grid; grid-template-columns: 76px 1fr; gap: 24px; padding: 26px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--hair); transition: border-color .3s; scroll-margin-top: 90px; }
.hiw > li:hover { border-color: var(--hair-gold); }
.rn--lg { width: 64px; height: 76px; font-size: 22px; padding-top: 12px; background: var(--surface-3); }
.hiw h3 { font: 500 24px/1.2 var(--font-head); }
.hiw .prose { margin-top: 10px; }
.hiw .step-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }

/* ---------- support organisations ---------- */
.orgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 24px; }
.org { padding: 20px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }
.org b { font-weight: 600; }
.org span { font-size: 13.5px; color: var(--color-text-2); }
.org a { color: var(--color-gold); font-size: 14px; font-weight: 600; margin-top: auto; padding-top: 8px; }

/* ---------- closing band ---------- */
.cta-band { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); border: 1px solid var(--hair-gold-2);
  background: radial-gradient(60% 120% at 100% 0%, var(--wine-tint), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface-1)); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: var(--lattice) center/48px 72px; opacity: .06; pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { font: 500 clamp(24px, 2.6vw, 34px)/1.15 var(--font-head); }
.cta-band p { color: var(--color-text-2); margin-top: 8px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- catalogue (lobby) ---------- */
.lobby { padding-top: 48px; }
.lobby-bar { display: grid; gap: 14px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--hair); position: sticky; top: 72px; z-index: 20; box-shadow: var(--shadow-2); }
.lobby-row { display: grid; grid-template-columns: 1fr 240px; gap: 12px; }
.lobby-search input { width: 100%; padding-right: 44px; }
.lobby-search kbd { position: absolute; right: 12px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--hair-2); color: var(--color-text-2); font: 500 12px var(--font-body); }
.lobby-provider select { min-height: 44px; border-radius: var(--radius-pill); }
.lobby-types, .lobby-tags { flex-wrap: wrap; }
.chip { position: relative; }
.chip--sub { min-height: 34px; font-size: 13px; padding: 0 14px; }
.lobby-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 28px 0 18px; color: var(--color-text-2); }
.lobby-meta b { color: var(--color-gold); font-variant-numeric: tabular-nums; font-size: 18px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 44vw), 1fr)); gap: 24px 18px; }
.game-grid .gcard__img { max-width: none; }   /* grid tracks stay ≤ 230px: covers are 300px */
.empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 56px 16px; border: 1px dashed var(--hair-2); border-radius: var(--radius-lg); color: var(--color-text-2); }
.empty > .icon { width: 32px; height: 32px; color: var(--color-gold); }
.empty b { color: var(--color-text); font-size: 18px; }
.empty .btn { margin-top: 10px; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact__card { padding: clamp(22px, 4vw, 40px); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--hair-gold-2); box-shadow: var(--shadow-2); }
.contact__card > h2 { font: 500 28px/1.2 var(--font-head); }
.contact__card > p { color: var(--color-text-2); margin: 8px 0 22px; }
.contact__aside { display: grid; gap: 16px; }
.contact__mail { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--hair-gold); background: var(--gold-tint); font-weight: 600; word-break: break-all; }
.contact__mail .icon { color: var(--color-gold); flex: none; }

/* ---------- auth ---------- */
.auth { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 6vw, 88px) 0; min-height: 70vh; }
.auth__bg { position: absolute; inset: 0; z-index: -2; }
.auth__bg picture, .auth__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17,19,24,.96) 0%, rgba(17,19,24,.82) 50%, rgba(17,19,24,.6) 100%); }
.auth__grid { display: grid; grid-template-columns: 1fr 480px; gap: clamp(32px, 6vw, 96px); align-items: center; }
.auth__intro h1 { font: 500 clamp(32px, 4vw, 52px)/1.1 var(--font-head); margin-top: 16px; }
.auth__intro h1 .accent { color: var(--color-gold); }
.auth__intro > p { color: var(--color-text-2); margin-top: 14px; font-size: var(--fs-lede); max-width: 46ch; }
.auth__list { display: grid; gap: 14px; margin-top: 26px; }
.auth__list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; font-size: 14.5px; color: var(--color-text-2); }
.auth__list li > .icon { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--gold-tint); color: var(--color-gold); }
.auth__list b { display: block; color: var(--color-text); }
.auth-card { position: relative; padding: 92px 34px 34px; isolation: isolate; }
.auth-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 96%, transparent), var(--surface-1));
  -webkit-mask: var(--ogee-head) top/100% 76px no-repeat, linear-gradient(#000,#000) bottom/100% calc(100% - 75px) no-repeat; mask: var(--ogee-head) top/100% 76px no-repeat, linear-gradient(#000,#000) bottom/100% calc(100% - 75px) no-repeat; }
.auth-card::after { content: ""; position: absolute; inset: 75px 0 0; border: 1px solid var(--hair-gold); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); pointer-events: none; z-index: -1; }
.auth-card .overlay__arch { position: absolute; left: 0; top: 0; width: 100%; height: 76px; }
.auth-card h2 { font: 500 30px/1.15 var(--font-head); text-align: center; }
.auth-card__sub { text-align: center; color: var(--color-text-2); margin: 8px 0 22px; font-size: 14.5px; }
.auth-card__alt { text-align: center; color: var(--color-text-2); margin-top: 18px; font-size: 14px; }

/* ---------- account ---------- */
.acct-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.acct-nav { position: sticky; top: 88px; display: grid; gap: 4px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--hair); }
.acct-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; color: var(--color-text-2); font-size: 14.5px; text-decoration: none; transition: background-color .2s, color .2s; }
.acct-nav a:hover { background: var(--surface-2); color: var(--color-text); }
.acct-nav a .icon { color: var(--color-gold); }
.acct-main { display: grid; gap: 20px; min-width: 0; }
.acc-block { padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--hair); scroll-margin-top: 90px; }
.acc-block > h2 { font: 500 24px/1.2 var(--font-head); display: flex; align-items: center; gap: 12px; }
.acc-block > h2 .icon { color: var(--color-gold); width: 22px; height: 22px; }
.acc-block > p { color: var(--color-text-2); margin-top: 8px; font-size: 14.5px; }
.acc-block .form { margin-top: 18px; }
.welcome { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid var(--hair-gold); background: var(--gold-tint); }
.welcome .icon { color: var(--color-gold); width: 24px; height: 24px; flex: none; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.kv div { padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-0); border: 1px solid var(--hair); }
.kv dt { font: 600 10.5px/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold); }
.kv dd { margin: 6px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.limit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.limit { padding: 16px; border-radius: var(--radius-md); background: var(--surface-0); border: 1px solid var(--hair); display: grid; gap: 10px; align-content: start; }
.limit h3 { font: 600 15px/1.3 var(--font-body); letter-spacing: 0; }
.limit__now { font-size: 13.5px; color: var(--color-text-2); }
.limit__now b { color: var(--color-text); }
.limit__pending { font-size: 12.5px; color: var(--color-gold); }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.radio-card { position: relative; display: grid; place-items: center; min-height: 48px; padding: 8px; border-radius: var(--radius-md); border: 1px solid var(--hair-2); text-align: center; font-size: 14px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card:has(input:checked) { border-color: var(--color-gold); background: var(--gold-tint); }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-0); border: 1px solid var(--hair); }

/* ---------- 404 ---------- */
.nf { text-align: center; padding: clamp(64px, 10vw, 140px) 0; position: relative; }
.nf__arch { width: 140px; height: auto; margin: 0 auto 18px; }
.nf .nf__code { font: 600 11px/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--color-gold); margin: 0 auto 14px; }
.nf h1 { font: 500 clamp(30px, 4vw, 48px)/1.1 var(--font-head); }
.nf p { color: var(--color-text-2); margin: 12px auto 0; max-width: 48ch; }
.nf .cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }

@media (max-width: 1180px) {
  .tiles--4 { grid-template-columns: repeat(2, 1fr); }
  .auth__grid { grid-template-columns: 1fr 440px; }
}
@media (max-width: 980px) {
  .split, .split--flip, .contact, .auth__grid, .acct-grid { grid-template-columns: 1fr; }
  .split--flip > .split__media { order: 0; }
  .doc { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .limit-grid { grid-template-columns: 1fr; }
  .acct-nav { position: static; grid-template-columns: repeat(2, 1fr); }
  .lobby-bar { top: 64px; }
}
@media (max-width: 760px) {
  .tiles, .tiles--2, .tiles--4 { grid-template-columns: 1fr; }
  .split__media { max-width: 320px; }
  .hiw > li { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .cta-band { grid-template-columns: 1fr; }
  .lobby-row { grid-template-columns: 1fr; }
  .lobby-bar { position: static; padding: 14px; }
  .lobby-types, .lobby-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; }
  .lobby-types::-webkit-scrollbar, .lobby-tags::-webkit-scrollbar { display: none; }
  .game-grid { gap: 20px 12px; }
  .auth-card { padding: 84px 20px 24px; }
  .acct-nav { grid-template-columns: 1fr; }
}

/* --- faq / cookie-policy / responsible-gambling --- */
.org a { display: inline-flex; align-items: center; gap: 6px; }
.org a .icon { width: 14px; height: 14px; }
.faq-bar { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 14px 24px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--hair); }
.faq-search input { width: 280px; }
.faq-status { margin-top: 14px; min-height: 1.4em; font-size: 14px; color: var(--color-text-2); }
.faq-group { display: grid; grid-template-columns: 260px 1fr; gap: 16px clamp(24px, 4vw, 56px); padding: 36px 0; border-top: 1px solid var(--hair); scroll-margin-top: 90px; }
.faq-group:first-of-type { border-top: 0; }
.faq-group__head h2 { font: 500 clamp(22px, 2.2vw, 28px)/1.2 var(--font-head); }
.faq-group__head p { margin-top: 6px; font-size: 14px; color: var(--color-text-2); }
.faq-group .acc { min-width: 0; border-top: 0; }
.ck-table thead th { width: auto; }
.ck-table tbody th { width: auto; font: 600 13px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--color-text); }
.ck-table code, .doc__body code { font-size: .92em; color: var(--color-gold); overflow-wrap: anywhere; }
.ck-table tbody th code { white-space: nowrap; overflow-wrap: normal; }
.ck-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 18px 0 22px; padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--hair-gold-2); background: var(--gold-tint); }
.ck-settings span { font-size: 14px; color: var(--color-text-2); }
@media (max-width: 980px) {
  .faq-group { grid-template-columns: 1fr; padding: 28px 0; }
  .faq-bar { grid-template-columns: 1fr; }
  .faq-search, .faq-search input { width: 100%; }
}
@media (max-width: 760px) {
  .ck-table thead { display: none; }
  .ck-table tr { display: grid; border-bottom: 1px solid var(--hair); }
  .ck-table tr:last-child { border-bottom: 0; }
  .ck-table tbody th, .ck-table td { border-bottom: 0; padding: 6px 14px; }
  .ck-table tbody th { padding-top: 14px; background: var(--surface-0); }
  .ck-table td:last-child { padding-bottom: 14px; }
  .ck-table td::before { content: attr(data-label); display: block; font: 600 10.5px/1.4 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 2px; }
}