/* ===========================================================================
   Content pages — FAQ (/faq/), legal documents (/terms/, /privacy/,
   /refund/) and the 404 page. Layered on app.css + shell.css.
   Prefixes: .c-* shared, .faq-* / .qa-* FAQ, .legal-* / .toc-* legal,
   .nf-* not-found.

   Design rules (docs/FRONTEND.md §0): borderless surfaces (tone + shadow,
   no outlines — only --hairline row dividers inside tables/document
   sections), no idle loops (the mascot never moves after its one fade-in,
   which app.css applies), no shine sweeps, and no scrollbar-width /
   scrollbar-color overrides (the global purple scrollbar applies).
   =========================================================================== */

/* ---------------------------------------------------------------- shared */
.c-page { position: relative; isolation: isolate; }
.c-glow {
  position: absolute; inset: 0 0 auto 0; height: 620px; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(46% 58% at 50% -6%, rgba(139, 92, 246, .16), transparent 72%),
    radial-gradient(26% 36% at 88% 8%, rgba(124, 58, 237, .10), transparent 70%),
    radial-gradient(22% 30% at 8% 22%, rgba(167, 139, 250, .06), transparent 70%);
}
.c-glow::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 50% 0%, #000 0%, transparent 75%);
  opacity: .5;
}
.c-kicker {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #dcd0ff;
  background: rgba(139, 92, 246, .14);
}
.c-kicker svg { width: 14px; height: 14px; color: var(--accent-hover); }
.c-rise { animation: c-rise 560ms var(--ease-out-quart) backwards; animation-delay: var(--rd, 0ms); }
@keyframes c-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes c-pop { 0% { opacity: 0; transform: scale(.94) translateY(12px); } 100% { opacity: 1; transform: none; } }
/* one-shot attention flash for deep links (tinted fill, no outline) */
@keyframes c-flash { 0%, 35% { background-color: rgba(139, 92, 246, .20); } 100% { background-color: var(--surface-1); } }
@keyframes c-glow-pulse {
  0% { box-shadow: var(--shadow-card), 0 0 0 rgba(139, 92, 246, 0); }
  40% { box-shadow: var(--shadow-card), 0 0 42px rgba(139, 92, 246, .55); }
  100% { box-shadow: var(--shadow-card), 0 0 0 rgba(139, 92, 246, 0); }
}

/* words that must not break apart: hyphenated compounds (in-game, BEP-20, US-dollar) and game names get
   wrapped in .nw by keepTogether() in faq.js / legal.js (the page font has no non-breaking hyphen glyph) */
.nw { white-space: nowrap; }

/* ============================================================== FAQ ===== */
/* the FAQ uses the site's standard .container (1280px, same edges as the header and footer) */
.faq-hero { margin-bottom: 22px; }
.faq-hero .page-title { margin-top: 14px; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08; }
.faq-hero .page-sub { max-width: 620px; line-height: 1.6; margin-top: 10px; text-wrap: balance; }

/* "Still stuck? Ask us on Discord." banner under the list (static mascot: think pose) — only with a Discord invite */
.faq-support {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 18px;
  min-height: 92px; margin-top: 32px; padding: 12px 18px 12px 14px; border-radius: 20px;
  background:
    radial-gradient(70% 140% at 0% 50%, rgba(139, 92, 246, .30), transparent 60%),
    linear-gradient(100deg, #1a1430 0%, #141224 40%, var(--surface-1) 82%);
  box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.faq-support[hidden] { display: none; }
.faq-support.ping { animation: c-glow-pulse 1.2s var(--ease-out) 1; }
.faq-support-art { position: relative; flex: none; width: 86px; height: 86px; align-self: flex-end; margin: -6px 0 -12px; }
.faq-support-art::before { content: ''; position: absolute; inset: 18% 10% 0; border-radius: 50%; background: radial-gradient(circle, rgba(167, 139, 250, .45), transparent 70%); filter: blur(10px); }
.faq-support-art img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45)); }
.faq-support-copy { flex: 1; min-width: 0; }
.faq-support-copy h2 { font-size: 17px; font-weight: 700; letter-spacing: -.005em; }
.faq-support-cta { flex: none; display: flex; align-items: center; }
.faq-support-cta .btn svg { width: 18px; height: 18px; }
.faq-support-cta .btn { box-shadow: 0 6px 22px rgba(139, 92, 246, .38); }
.faq-support-cta .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(139, 92, 246, .5); }
.faq-support-cta .btn:active { transform: scale(.97); }

/* layout: sticky topic sidebar | search + questions */
.faq-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); align-items: start; gap: 28px; margin-top: 22px; scroll-margin-top: calc(var(--header-h) + 20px); }
.faq-main { min-width: 0; }
.faq-side { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.faq-side-h { padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.faq-side .cat-chips { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
.faq-side .cat-chip { width: 100%; height: 42px; padding: 0 10px 0 12px; border-radius: 12px; gap: 10px; background: transparent; animation-name: c-fade; }
.faq-side .cat-chip > span:not(.n) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.faq-side .cat-chip:hover { background: var(--surface-1); transform: none; }
.faq-side .cat-chip:active { transform: scale(.98); }
.faq-side .cat-chip.on { color: #fff; background: rgba(139, 92, 246, .18); box-shadow: none; }
.faq-side .cat-chip.on svg { color: var(--accent-hover); }
.faq-side .cat-chip.on .n { background: var(--accent); }
@keyframes c-fade { from { opacity: 0; } }

/* search + category chips */
.faq-tools { display: grid; gap: 12px; }
.faq-search { position: relative; display: flex; align-items: center; }
.faq-search > svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; transition: color 150ms; }
.faq-search input {
  width: 100%; height: 50px; padding: 0 92px 0 46px; border: none; outline: none; border-radius: 16px;
  background: var(--surface-1); color: var(--foreground); font: 500 15px var(--font);
  box-shadow: var(--shadow-card);
  transition: background-color 160ms, box-shadow 200ms var(--ease-out);
}
.faq-search input::placeholder { color: var(--muted); font-weight: 400; }
.faq-search input:hover { background: var(--surface-2); }
.faq-search input:focus { background: var(--surface-2); box-shadow: 0 0 0 2px var(--accent), var(--shadow-card); }
.faq-search:focus-within > svg { color: var(--accent-hover); }
.faq-search input::-webkit-search-cancel-button { display: none; }
.faq-kbd {
  position: absolute; right: 14px; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 8px; font: 700 12px var(--font); color: rgba(255, 255, 255, .55);
  background: var(--surface-3); pointer-events: none;
  transition: opacity 150ms;
}
.faq-search:focus-within .faq-kbd, .faq-search.has-q .faq-kbd { opacity: 0; }
.faq-clear {
  position: absolute; right: 10px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06);
  opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity 160ms, transform 220ms var(--ease-out-quart), background-color 150ms;
}
.faq-clear svg { width: 14px; height: 14px; }
.faq-search.has-q .faq-clear { opacity: 1; transform: none; pointer-events: auto; }
.faq-clear:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.faq-clear:active { transform: scale(.9); }

.cat-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 11px;
  border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; color: rgba(255, 255, 255, .68);
  background: var(--surface-1);
  transition: color 160ms, background-color 160ms, transform 220ms var(--ease-out-quart), box-shadow 200ms;
  animation: c-rise 440ms var(--ease-out-quart) backwards; animation-delay: var(--rd, 0ms);
}
.cat-chip svg { width: 15px; height: 15px; opacity: .75; transition: transform 260ms var(--ease-out-quart), opacity 160ms; }
.cat-chip .n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .7);
  transition: background-color 160ms, color 160ms;
}
.cat-chip:hover { color: #fff; background: var(--surface-2); transform: translateY(-2px); }
.cat-chip:hover svg { transform: rotate(-8deg) scale(1.1); opacity: 1; }
.cat-chip:active { transform: scale(.96); }
.cat-chip.on { color: #fff; background: var(--grad-accent); box-shadow: 0 6px 20px rgba(139, 92, 246, .38); }
.cat-chip.on svg { opacity: 1; }
.cat-chip.on .n { background: rgba(255, 255, 255, .2); color: #fff; }
.cat-chip.zero:not(.on) { opacity: .45; }

.faq-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 2px 0; min-height: 20px; font-size: 13px; color: var(--muted); }
.faq-meta b { color: #fff; font-weight: 600; }
/* "Clear" / "Show all topics": a >= 40 x 40 tap target, the label where it was (the side padding is taken back) */
.faq-meta .link-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0 6px; margin-right: -6px; font-size: 13px; }

/* groups + accordions */
.faq-list { margin-top: 6px; }
.qa-group { margin-top: 26px; scroll-margin-top: calc(var(--header-h) + 20px); }
.qa-group-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px 2px; font-size: 16px; font-weight: 700; animation: c-rise 460ms var(--ease-out-quart) backwards; animation-delay: var(--rd, 0ms); }
.qa-group-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--accent-hover); background: rgba(139, 92, 246, .16); }
.qa-group-ico svg { width: 16px; height: 16px; }
.qa-group-n { font-size: 12px; font-weight: 600; color: var(--muted); }

.qa {
  position: relative; border-radius: 14px; background: var(--surface-1);
  scroll-margin-top: calc(var(--header-h) + 24px);
  transition: background-color 200ms var(--ease-out-quad), box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out-quart);
  animation: c-rise 440ms var(--ease-out-quart) backwards; animation-delay: var(--rd, 0ms);
}
.qa + .qa { margin-top: 8px; }
.qa:not(.open):hover { background: var(--surface-2); }
.qa.open {
  background: radial-gradient(90% 120px at 0% 0%, rgba(139, 92, 246, .10), transparent 70%), var(--surface-1);
  box-shadow: var(--shadow-card), 0 0 30px rgba(139, 92, 246, .06);
}
.qa.flash { animation: c-flash 1.4s var(--ease-out) 1; }
.qa-h { margin: 0; font-size: inherit; font-weight: inherit; }
.qa-q {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  border-radius: 14px; text-align: left; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--foreground);
}
.qa-q:active .qa-t { transform: translateX(2px); }
.qa-t { flex: 1; min-width: 0; transition: color 180ms var(--ease-smooth), transform 200ms var(--ease-out-quart); }
.qa-q:hover .qa-t, .qa.open .qa-t { color: var(--accent-hover); }
.qa-ico {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; color: var(--accent);
  transition: transform 380ms var(--ease-out-quart), background-color 200ms, color 200ms;
}
.qa-ico::before, .qa-ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: currentColor; }
.qa-ico::after { transform: rotate(90deg); }
.qa-q:hover .qa-ico { background: rgba(139, 92, 246, .12); }
.qa.open .qa-ico { transform: rotate(135deg); color: var(--accent-hover); background: rgba(139, 92, 246, .16); }
.qa-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease-out-quart); }
.qa.open .qa-p { grid-template-rows: 1fr; }
.qa-in { min-height: 0; overflow: hidden; }
.qa-a {
  padding: 0 18px 18px; max-width: 780px; font-size: 14px; font-weight: 400; line-height: 1.7; color: #a4a9b3;
  opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--ease-out), transform 360ms var(--ease-out-quart);
}
.qa.open .qa-a { opacity: 1; transform: none; transition-delay: 70ms; }
.qa-a p { margin: 0 0 10px; }
.qa-a p, .qa-a li { text-wrap: pretty; }
.qa-a p:last-child, .qa-body > :last-child { margin-bottom: 0; }
.qa-a b, .qa-a strong { color: rgba(255, 255, 255, .9); font-weight: 600; }
.qa-a a, .qa-a .link-btn { color: var(--accent-hover); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(167, 139, 250, .38); text-underline-offset: 3px; transition: text-decoration-color 150ms, color 150ms; }
.qa-a a:hover, .qa-a .link-btn:hover { color: #c4b5fd; text-decoration-color: currentColor; }
.qa-a ul, .qa-a ol { margin: 6px 0 10px; padding-left: 20px; }
.qa-a li { margin: 4px 0; padding-left: 2px; }
.qa-a li::marker { color: var(--accent); }
.qa-a .vicon { margin: 0 1px 0 2px; }
.qa-a code, .legal-doc code { padding: 2px 7px; border-radius: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; color: #e4dcff; background: rgba(139, 92, 246, .16); white-space: nowrap; }
mark.hl { padding: 0 2px; margin: 0 -1px; border-radius: 4px; color: #fff; background: rgba(139, 92, 246, .5); }
.qa-note { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.55; color: #ffdca3; background: rgba(248, 183, 77, .10); }
.qa-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--warning); }
.qa-note.info { color: #d9ccff; background: rgba(139, 92, 246, .12); }
.qa-note.info svg { color: var(--accent-hover); }
.qa-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.qa-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 9px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .05); transition: color 150ms, background-color 150ms, transform 200ms var(--ease-out-quart); }
.qa-copy svg { width: 13px; height: 13px; }
.qa-copy:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.qa-copy:active { transform: scale(.95); }
.qa-copy.done { color: #3ee48b; background: rgba(5, 202, 98, .14); }
.qa-cat { margin-left: auto; font-size: 11.5px; color: rgba(255, 255, 255, .38); }

/* status list (withdrawal / delivery states) */
.qa-a .qa-states { display: grid; gap: 6px; margin: 10px 0 12px; padding: 0; list-style: none; }
.qa-a .qa-states li { display: flex; gap: 10px; align-items: baseline; margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); }
.qa-states .st { flex: none; min-width: 136px; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.qa-states .st-wait { color: #ffd58f; }
.qa-states .st-busy { color: #c4b5fd; }
.qa-states .st-ok { color: #3ee48b; }
.qa-states .st-back { color: rgba(255, 255, 255, .6); }

/* tables inside answers and legal documents (hairline row dividers only) */
.tbl-wrap { margin: 12px 0; border-radius: 12px; overflow-x: auto; background: var(--surface-2); }
.c-tbl { width: 100%; min-width: 340px; border-collapse: collapse; font-size: 13px; }
.c-tbl th { padding: 9px 12px; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .025); white-space: nowrap; }
.c-tbl td { padding: 9px 12px; border-top: 1px solid var(--hairline); color: rgba(255, 255, 255, .82); vertical-align: middle; }
.c-tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-tbl tr { transition: background-color 150ms; }
.c-tbl tbody tr:hover { background: rgba(139, 92, 246, .06); }
.coin-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.coin-cell img { width: 20px; height: 20px; flex: none; }
.cc-txt { display: flex; flex-direction: column; line-height: 1.25; }
.cc-net { display: none; font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.th-short { display: none; }
.c-tbl .sub { display: block; font-size: 11.5px; color: var(--muted); }
.c-tbl tr.off td { color: rgba(255, 255, 255, .42); }
.c-tbl tr.off .coin-cell img { filter: grayscale(1); opacity: .55; }
.c-tbl tr.off .sub { color: var(--warning); }
.game-row { display: flex; align-items: center; gap: 10px; }
.game-row img { width: 22px; height: 22px; flex: none; opacity: .9; }
/* coin tables: a network name breaks only between its words, never inside "(BEP-20)" (.nw), and only once the
   table really is too narrow; up to 1100px the short headers ("Min.", "Payout fee") keep one line per coin */
@media (max-width: 1100px) {
  .c-tbl .th-long { display: none; }
  .c-tbl .th-short { display: inline; }
}
.c-coins th { white-space: normal; }

/* skeleton + empty */
.qa-skel { height: 56px; border-radius: 14px; background: linear-gradient(100deg, var(--surface-1) 30%, var(--surface-2) 50%, var(--surface-1) 70%); background-size: 300% 100%; animation: skel-sweep 1.4s linear 600ms infinite; }
.qa-skel + .qa-skel { margin-top: 8px; }
/* until the questions render (a first visit waits for /api/config) the placeholder fills the screen, so the
   Policies row below never shows and then jumps away (rule 17) */
.qa-skel-group { min-height: 100vh; }
.faq-empty { margin-top: 18px; border-radius: 20px; background: var(--surface-1); box-shadow: var(--shadow-card); animation: c-pop 420ms var(--ease-out-quart) both; }
.faq-empty .es-mascot { width: 118px; }
.faq-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.faq-empty-actions .btn { min-height: 40px; }

/* policy cards (FAQ foot + legal cross links) */
.policy-head { margin: 44px 2px 12px; font-size: 16px; font-weight: 700; }
.policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* content sits at the top, so every title in a row lines up whatever its description's length */
.policy-card {
  position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 15px 16px; border-radius: 16px;
  background: var(--surface-1); overflow: hidden;
  transition: transform 260ms var(--ease-out-quart), background-color 180ms, box-shadow 260ms;
}
.policy-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 120% at 0% 0%, rgba(139, 92, 246, .16), transparent 70%); opacity: 0; transition: opacity 220ms; pointer-events: none; }
.policy-card:hover { transform: translateY(-3px); background: var(--surface-2); box-shadow: var(--shadow-card); }
.policy-card:hover::after { opacity: 1; }
.policy-card:active { transform: scale(.98); }
.policy-card .pc-ico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--accent-hover); background: rgba(139, 92, 246, .14); transition: transform 300ms var(--ease-out-quart); }
.policy-card:hover .pc-ico { transform: rotate(-6deg) scale(1.06); }
.policy-card .pc-ico svg { width: 18px; height: 18px; }
/* <span><b>Title</b><span>description</span></span>: a white title over a muted description */
.policy-card > span:not(.pc-ico) { flex: 1 1 auto; min-width: 0; display: block; padding-top: 1px; }
.policy-card b { display: block; font-size: 14px; line-height: 1.4; color: #fff; }
.policy-card b + span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); line-height: 1.4; text-wrap: balance; }
.policy-card .pc-go { align-self: center; margin-left: auto; flex: none; width: 16px; height: 16px; color: rgba(255, 255, 255, .35); transition: transform 220ms var(--ease-out-quart), color 150ms; }
.policy-card:hover .pc-go { transform: translateX(3px); color: var(--accent-hover); }

/* edge fades of the swipeable topic row: faq.js sets --fl / --fr (0 or 28px) only on the side that has more chips */
@property --fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fr { syntax: '<length>'; inherits: false; initial-value: 0px; }
@media (max-width: 899px) {
  /* topics become one swipeable row above the search, bleeding to the screen edges (the container gutter:
     20px here, 16px at <= 640px), so a chip cut at the edge reads as "scroll for more" */
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .faq-side { position: static; }
  .faq-side-h { display: none; }
  .faq-side .cat-chips {
    flex-direction: row; overflow-x: auto; margin: -6px -20px -6px; padding: 6px 20px 8px; scrollbar-width: none; scroll-padding-inline: 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    transition: --fl 200ms var(--ease-out), --fr 200ms var(--ease-out);
  }
  .faq-side .cat-chips::-webkit-scrollbar { display: none; }
  .faq-side .cat-chip { flex: none; width: auto; height: 40px; border-radius: 999px; background: var(--surface-1); }
  .faq-side .cat-chip > span:not(.n) { flex: none; }
  /* tap targets >= 40px on phones and tablets */
  .faq-clear { right: 5px; width: 40px; height: 40px; border-radius: 12px; }
  .qa-copy { min-height: 40px; padding: 0 13px; }
  .qa-a .link-btn { display: inline-flex; align-items: center; min-height: 40px; }
}
/* tablets: three policy cards share the row, so the chevron goes (the whole card is the link) */
@media (min-width: 761px) and (max-width: 1000px) {
  .policy-card { padding: 14px; }
  .policy-card .pc-go { display: none; }
}
@media (max-width: 760px) {
  .policy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .faq-hero { margin-bottom: 18px; }
  .faq-support { flex-wrap: wrap; gap: 12px 14px; padding: 14px 14px 16px; min-height: 0; }
  .faq-support-art { width: 70px; height: 70px; margin: -4px 0 -6px; align-self: center; }
  .faq-support-copy { flex: 1 1 180px; }
  .faq-support-cta { flex: 1 1 100%; }
  .faq-support-cta .btn { width: 100%; height: 44px; }
  .faq-side .cat-chips { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .faq-kbd { display: none; }
  .faq-search input { padding-right: 52px; font-size: 16px; }
  .qa-q { padding: 14px 14px 14px 16px; font-size: 14.5px; gap: 12px; }
  .qa-a { padding: 0 16px 16px; font-size: 13.5px; }
  .qa-cat { display: none; }
  .qa-a .qa-states li { flex-direction: column; gap: 2px; }
  .qa-states .st { min-width: 0; }
  .c-tbl { min-width: 0; font-size: 12.5px; }
  .c-tbl th, .c-tbl td { padding: 8px 10px; }
  .c-tbl .col-net { display: none; }
  .c-tbl th, .c-tbl td.num { white-space: normal; }
  .c-tbl .cc-net { white-space: normal; }
  .c-tbl .th-long { display: none; }
  .c-tbl .th-short { display: inline; }
  .c-tbl th:last-child, .c-tbl td:last-child { text-align: right; }
  .cc-net { display: block; }
  /* the five-column coin table (Refund Policy: coin · network · credited after · min. deposit · withdrawal fee)
     would need ~325px: on phones every coin is one row of two lines — coin + network on the left, the
     confirmations over "Min. $5.00 · Fee $2.50" on the right — so nothing scrolls out of the card */
  .c-coins thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .c-coins, .c-coins tbody { display: block; min-width: 0; }
  .c-coins tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; row-gap: 2px; padding: 10px 12px; }
  .c-coins tbody tr + tr { border-top: 1px solid var(--hairline); }
  .c-tbl.c-coins td { padding: 0; border: 0; text-align: right; white-space: nowrap; }
  .c-tbl.c-coins td:first-child { grid-row: 1 / span 2; padding-right: 12px; text-align: left; white-space: normal; }
  .c-coins td.c-conf { grid-column: 2 / span 2; grid-row: 1; }
  .c-coins td.c-min, .c-coins td.c-fee { grid-row: 2; font-size: 11.5px; color: var(--muted); }
  .c-coins td.c-min::before { content: 'Min. '; }
  .c-coins td.c-fee::before { content: '\00a0· Fee '; }
}

/* ============================================================ LEGAL ===== */
.read-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 61; height: 3px; pointer-events: none; }
.read-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #7c3aed, #a78bfa); box-shadow: 0 0 12px rgba(139, 92, 246, .8); }

/* legal pages use the site's standard .container (1280px: the same edges as the header and footer); the article
   card fills its column to the right edge, and only its text is capped (760px reading measure): on wide screens
   the card's side padding grows and centres the text */
.legal-tabs { margin-bottom: 22px; }
.legal-tabs a { display: inline-flex; align-items: center; gap: 7px; height: 40px; }
.legal-tabs a:not(.on):hover { color: #fff; background: rgba(255, 255, 255, .05); }
.legal-tabs a:active { transform: scale(.97); }
.legal-tabs svg { width: 15px; height: 15px; }
/* head: tabs, title, lede and a plain "Last updated" line (no kicker or date pills under the tab row) */
.legal-hero { max-width: 780px; margin-bottom: 30px; }
.legal-hero .page-title { margin-top: 0; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.06; }
.legal-lede { margin: 12px 0 0; max-width: 680px; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .66); font-weight: 400; text-wrap: balance; }
.legal-updated { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.legal-updated svg { flex: none; width: 14px; height: 14px; color: var(--accent-hover); }

.legal-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 36px; align-items: start; }
/* the sticky contents list scrolls inside itself on short screens: legal.js sets --ft / --fb (0 or 28px) so the
   side with more entries fades out */
@property --ft { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fb { syntax: '<length>'; inherits: false; initial-value: 0px; }
.legal-toc {
  position: sticky; top: calc(var(--header-h) + 22px); max-height: calc(100vh - var(--header-h) - 44px); overflow-y: auto; padding: 4px 4px 16px 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent);
  transition: --ft 200ms var(--ease-out), --fb 200ms var(--ease-out);
}
.toc-title { margin: 0 0 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.toc-toggle { display: none; }
.toc-panel { display: block; }
.toc-list { margin: 0; padding: 0; list-style: none; }
.toc-list li { animation: c-rise 420ms var(--ease-out-quart) backwards; animation-delay: var(--rd, 0ms); }
/* the active entry is a tinted fill only (no accent bar: rule 3 / §5 allow no extra lines) */
.toc-list a { display: flex; gap: 8px; padding: 6px 12px 6px 14px; border-radius: 9px; font-size: 13px; line-height: 1.4; font-weight: 500; color: rgba(255, 255, 255, .55); text-wrap: balance; transition: color 160ms, background-color 160ms, padding-left 220ms var(--ease-out-quart); }
.toc-list a .tn { flex: none; min-width: 16px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .48); transition: color 160ms; }
.toc-list a:hover { color: #fff; background: rgba(255, 255, 255, .035); padding-left: 17px; }
.toc-list a.on { color: #fff; background: linear-gradient(90deg, rgba(139, 92, 246, .16), rgba(139, 92, 246, .03)); }
.toc-list a.on .tn { color: var(--accent-hover); }
/* short laptop screens (720-800px tall): tighter entries so the 18-entry list fits */
/* two columns on a small laptop: a little less side padding keeps the coin table's rows on one line */
@media (min-width: 1001px) and (max-width: 1100px) {
  .legal-layout > .legal-doc { padding-inline: 30px; }
}
@media (min-width: 1001px) and (max-height: 820px) {
  .toc-list a { padding-block: 4px; }
  .toc-title { margin-bottom: 6px; }
}
/* a touch screen with the two columns (an iPad held sideways): the contents' links are 40px tap targets, as in the
   phones' list */
@media (min-width: 1001px) and (pointer: coarse) {
  .toc-list a { min-height: 40px; align-items: center; padding-block: 4px; }
}

.legal-doc {
  min-width: 0; padding: 34px max(40px, calc((100% - 760px) / 2)) 38px; border-radius: 24px;
  background: var(--surface-1); box-shadow: var(--shadow-card);
  counter-reset: none;
}
.legal-doc > section { scroll-margin-top: calc(var(--header-h) + 22px); border-radius: 12px; }
.legal-doc > section + section { margin-top: 44px; } /* sections are separated by space; numbered headings carry the structure */
/* two-line headings split evenly (no lone last word beside the number badge) */
.legal-doc h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; text-wrap: balance; }
.legal-doc h2 .num { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-hover); background: rgba(139, 92, 246, .16); }
.legal-doc h3 { margin: 20px 0 8px; font-size: 15.5px; font-weight: 700; color: rgba(255, 255, 255, .92); text-wrap: balance; }
.legal-doc p, .legal-doc li { font-size: 15px; font-weight: 400; line-height: 1.78; color: rgba(255, 255, 255, .72); text-wrap: pretty; }
.legal-doc p { margin: 0 0 12px; }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc ul, .legal-doc ol { margin: 4px 0 14px; padding-left: 22px; }
.legal-doc li { margin: 5px 0; padding-left: 3px; }
.legal-doc li::marker { color: var(--accent); font-weight: 700; }
.legal-doc strong { color: #fff; font-weight: 600; }
.legal-doc a { color: var(--accent-hover); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(167, 139, 250, .38); text-underline-offset: 3px; transition: color 150ms, text-decoration-color 150ms; }
.legal-doc a:hover { color: #c4b5fd; text-decoration-color: currentColor; }
.legal-doc > section.c-in > h2 { animation: c-rise 520ms var(--ease-out-quart) backwards; }
.legal-doc > section.c-in > h2 .num { animation: c-num-flash 1.3s var(--ease-out) 1; }
@keyframes c-num-flash { 0%, 30% { color: #fff; background: var(--accent); } 100% { color: var(--accent-hover); background: rgba(139, 92, 246, .16); } }

.legal-doc .legal-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; }
.legal-doc .legal-keys li {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .78);
  background: linear-gradient(135deg, rgba(139, 92, 246, .13), rgba(139, 92, 246, .04));
  transition: transform 240ms var(--ease-out-quart), box-shadow 240ms;
  animation: c-rise 480ms var(--ease-out-quart) backwards; animation-delay: var(--rd, 0ms);
}
.legal-keys li:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.legal-keys li::marker { content: ''; }
.legal-keys .k-ico { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--grad-accent); box-shadow: 0 4px 14px rgba(139, 92, 246, .4); }
.legal-keys .k-ico svg { width: 15px; height: 15px; }
.legal-keys b { display: block; margin-bottom: 1px; font-size: 14px; color: #fff; text-wrap: balance; }
/* the short card descriptions (2-4 lines) are balanced, not just "pretty": Chromium's pretty still leaves a long
   last word alone ("…your Roblox / password.") */
.legal-keys li > span:last-child { text-wrap: balance; }

.callout { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.65; color: #ffe0ad; background: rgba(248, 183, 77, .10); }
.callout svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--warning); }
.callout.info { color: #ddd2ff; background: rgba(139, 92, 246, .11); }
.callout.info svg { color: var(--accent-hover); }
.callout p { color: inherit; font-size: inherit; margin: 0; }

.legal-doc .c-tbl { min-width: 460px; font-size: 13.5px; }
.legal-doc .c-tbl td { color: rgba(255, 255, 255, .78); }

.legal-foot { margin-top: 34px; }
.legal-foot .policy-head { margin-top: 0; }

/* back to top: legal.js shows it (.show) only where it covers nothing — beside the article's text on wide
   screens; where it would sit on the text (phones, tablets, ~1024px) only while the reader scrolls back up (it
   fades out once the scrolling rests); never over the footer. Keyboard focus always shows it. */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; color: #fff; background: var(--grad-accent); box-shadow: 0 10px 28px rgba(139, 92, 246, .45);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out-quart), filter 150ms;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.show, .to-top:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { filter: brightness(1.12); transform: translateY(-2px); }
.to-top:active { transform: scale(.94); }

@media (max-width: 1000px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .legal-toc { position: relative; top: auto; max-height: none; overflow: visible; padding: 0; border-radius: 16px; background: var(--surface-1); box-shadow: var(--shadow-card); -webkit-mask-image: none; mask-image: none; }
  .toc-title { display: none; }
  .toc-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 16px; border-radius: 16px;
    font-size: 14px; font-weight: 600; text-align: left; color: #fff;
  }
  .toc-toggle > svg:first-child { width: 17px; height: 17px; color: var(--accent-hover); flex: none; }
  .toc-toggle .tt-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; }
  .toc-toggle .tt-cur b { color: #fff; font-weight: 600; margin-right: 6px; }
  .toc-toggle .tt-chev { width: 14px; height: 14px; flex: none; color: rgba(255, 255, 255, .5); transition: transform 260ms var(--ease-out-quart); }
  .legal-toc.open .tt-chev { transform: rotate(180deg); }
  .toc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms var(--ease-out-quart); }
  .legal-toc.open .toc-panel { grid-template-rows: 1fr; }
  .legal-toc.instant .toc-panel, .legal-toc.instant .tt-chev { transition: none; }
  .toc-panel > div { min-height: 0; overflow: hidden; }
  .toc-rail { margin: 0 12px 8px; }
  .toc-list a { min-height: 40px; align-items: center; }
  .legal-doc { max-width: none; }
}
@media (max-width: 900px) {
  .to-top { bottom: calc(76px + env(safe-area-inset-bottom)); right: calc(16px + env(safe-area-inset-right)); }
}
@media (max-width: 640px) {
  .legal-tabs { display: flex; width: 100%; }
  .legal-tabs a { flex: 1; justify-content: center; padding: 0 8px; font-size: 13px; }
  .legal-tabs svg { display: none; }
  .legal-hero { margin-bottom: 20px; }
  .legal-lede { font-size: 14.5px; }
  .legal-doc { padding: 22px 18px 26px; border-radius: 20px; }
  .legal-doc h2 { font-size: 18px; gap: 10px; }
  .legal-doc h2 .num { width: 27px; height: 27px; font-size: 12px; border-radius: 8px; }
  .legal-doc p, .legal-doc li { font-size: 14.5px; line-height: 1.72; }
  .legal-doc > section + section { margin-top: 34px; }
  .legal-doc .legal-keys { grid-template-columns: 1fr; gap: 8px; margin-bottom: 26px; }
  .legal-doc .legal-keys li { padding: 12px 14px; font-size: 13px; }
  .callout { padding: 12px 14px; font-size: 13.5px; }
  .legal-doc .c-tbl { min-width: 0; font-size: 12.5px; }
}

@media print {
  .site-header, .site-footer, .mobile-nav, .legal-toc, .legal-tabs, .to-top, .read-progress, .c-glow, .legal-foot, .announce-bar { display: none !important; }
  body { background: #fff; color: #000; padding: 0; animation: none; }
  .page { padding-top: 0; }
  .legal-layout { display: block; }
  .legal-doc { box-shadow: none; background: none; padding: 0; max-width: none; }
  .legal-doc p, .legal-doc li, .legal-lede, .legal-updated, .legal-keys li, .callout { color: #111 !important; }
  .legal-doc h2, .legal-doc h3, .legal-hero .page-title, .legal-doc strong, .legal-keys b { color: #000 !important; }
  .legal-keys li, .callout, .tbl-wrap { background: #f3f3f3 !important; box-shadow: none !important; }
  .legal-doc > section { break-inside: avoid-page; }
}

/* ============================================================== 404 ===== */
.nf-page {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(560px, calc(100svh - 40px)); display: grid; place-items: center;
  padding: calc(var(--header-h) + 20px) 0 40px;
}
.nf-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse min(560px, 80vw) min(420px, 60vh) at 50% 40%, rgba(139, 92, 246, .15), rgba(139, 92, 246, .05) 55%, transparent 100%),
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(76, 29, 149, .10), transparent 100%);
}
.nf-stage { position: relative; width: min(620px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf-art { position: relative; width: 100%; height: 300px; display: grid; place-items: end center; margin-bottom: 6px; }
.nf-code {
  position: absolute; left: 50%; top: 18px; z-index: 0; display: flex; gap: .02em;
  transform: translateX(-50%);
  font-size: 210px; font-weight: 900; line-height: .9; letter-spacing: -.03em; user-select: none;
}
.nf-code span {
  display: block;
  background: linear-gradient(180deg, rgba(139, 92, 246, .30) 0%, rgba(99, 70, 190, .16) 55%, rgba(60, 40, 120, .04) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nf-drop 720ms var(--ease-out-quart) backwards; animation-delay: var(--rd, 0ms);
}
@keyframes nf-drop { from { opacity: 0; transform: translateY(-40px) scale(.9); filter: blur(6px); } }
.nf-mascot-wrap { position: relative; z-index: 1; width: 238px; }
.nf-mascot-wrap::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: -6px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); filter: blur(4px); }
/* static mascot: app.css gives every mascot image its single fade-in */
.nf-mascot { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .5)) drop-shadow(0 0 30px rgba(139, 92, 246, .18)); }
.nf-title { font-size: clamp(27px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.01em; animation: c-rise 560ms var(--ease-out-quart) 380ms backwards; }
.nf-text { margin: 10px 0 0; max-width: 520px; font-size: 14.5px; line-height: 1.6; color: var(--muted); text-wrap: balance; animation: c-rise 560ms var(--ease-out-quart) 460ms backwards; }
.nf-path { display: inline-block; max-width: 100%; margin: 12px 0 0; padding: 5px 11px; border-radius: 9px; font: 500 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(255, 255, 255, .7); background: var(--surface-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: c-rise 560ms var(--ease-out-quart) 500ms backwards; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; animation: c-rise 560ms var(--ease-out-quart) 540ms backwards; }
.nf-actions .btn { min-width: 150px; transition: transform 260ms var(--ease-out-quart), background-color 120ms, box-shadow 200ms, filter 150ms; }
.nf-actions .btn:hover { transform: translateY(-2px); }
.nf-actions .btn:active { transform: scale(.97); }
.nf-actions .btn-primary { box-shadow: 0 8px 26px rgba(139, 92, 246, .4); }
.nf-actions .btn svg { flex: none; width: 17px; height: 17px; transition: transform 260ms var(--ease-out-quart); }
.nf-actions .btn-primary:hover svg { transform: translateX(-3px); }
.nf-actions .btn:not(.btn-primary):hover svg { transform: rotate(180deg); }
@media (max-width: 640px) {
  .nf-page { min-height: calc(100svh - 70px); padding-top: calc(var(--header-h) + 8px); }
  .nf-art { height: 250px; }
  .nf-code { font-size: 150px; top: 22px; }
  .nf-mascot-wrap { width: 200px; }
  .nf-actions { width: 100%; }
  .nf-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
}
/* under ~400px "Open swap desk" and its icon no longer fit the half-width button: both buttons drop their icons */
@media (max-width: 400px) {
  .nf-actions .btn svg { display: none; }
}
@media (max-width: 360px) {
  .nf-code { font-size: 124px; }
  .nf-actions .btn { font-size: 15px; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-rise, .cat-chip, .qa, .qa-group-h, .toc-list li, .legal-keys li, .legal-doc > section.c-in > h2, .legal-doc > section.c-in > h2 .num,
  .nf-code span, .nf-title, .nf-text, .nf-path, .nf-actions, .faq-support.ping, .qa.flash, .faq-empty { animation: none !important; }
  .qa-p, .toc-panel, .qa-a, .qa-ico, .faq-side .cat-chips, .legal-toc { transition: none !important; }
}