/* Shared sign-in page, two looks. Switch with <html data-theme="casino|betnet">.
 * One screen, never scrolls: every size is a clamp() of the viewport height.
 * Tokens come from the casino auth.css (betnet-casino/frontend/src/auth/auth.css:34-86)
 * and the BetNet quiet-cards page (login.donor.module.css:1-8, 374-460). */

:root {
  --vh: 1vh;
  --gap: clamp(6px, calc(var(--vh) * 1.5), 16px);
  --ctl: clamp(44px, calc(var(--vh) * 6), 52px); /* never below 44 px touch target */
  --fs-s: clamp(12px, calc(var(--vh) * 1.8), 13px);
  --fs-m: clamp(14px, calc(var(--vh) * 2.1), 15px);
  --fs-h: clamp(20px, calc(var(--vh) * 3.4), 28px);
  --radius: 12px;
}
@supports (height: 1dvh) { :root { --vh: 1dvh; } }

/* casino: auth.css :34-60 (palette), :37 fonts via index.css */
:root[data-theme='casino'] {
  --bg: linear-gradient(180deg, #050b16 0%, #02060e 34%, #02060e 68%, #050b16 100%);
  --glow: radial-gradient(58% 30% at 12% -4%, rgba(238, 18, 56, 0.16), transparent 62%),
          radial-gradient(46% 26% at 90% 8%, rgba(241, 187, 78, 0.08), transparent 60%);
  --surface: #071221;
  --border: rgba(117, 146, 193, 0.27);
  --field-line: rgba(147, 164, 195, 0.6);
  --field-bg: rgba(2, 6, 14, 0.62);
  --text: #f7f9fd;
  --muted: #9caac0;
  --accent-text: #ffd978;
  --primary: linear-gradient(135deg, #c2102e, #a80624 52%, #8b031d);
  --primary-border: rgba(255, 72, 98, 0.75);
  --focus: #ffd978;
  --danger: #ff6b77;
  --edge: rgba(241, 187, 78, 0.34);
  --font: system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
}
/* betnet: login.donor.module.css :1-8 (page), :374-460 (field, primary) */
:root[data-theme='betnet'] {
  --bg: linear-gradient(135deg, #020812 0%, #051323 54%, #030816 100%);
  --glow: radial-gradient(circle at 26% 19%, rgba(46, 111, 255, 0.18), transparent 32%),
          radial-gradient(circle at 92% 8%, rgba(126, 64, 255, 0.16), transparent 34%);
  --surface: #0a1a30;
  --border: rgba(124, 169, 238, 0.24);
  --field-line: rgba(124, 169, 238, 0.5);
  --field-bg: rgba(4, 14, 30, 0.7);
  --text: #f8fbff;
  --muted: #a9b5c8;
  --accent-text: #8fb8ff;
  /* the source gradient #1979ff..#245fff carries white at ~3.9:1; darkened for AA */
  --primary: linear-gradient(100deg, #1a56db, #2447d4 56%, #7a35c8);
  --primary-border: rgba(124, 169, 238, 0.5);
  --focus: #7cb0ff;
  --danger: #ff7b86;
  --edge: rgba(124, 169, 238, 0.24);
  --font: var(--font-sans, 'DM Sans'), ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: var(--font);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--gap) 16px;
  font: 400 var(--fs-m)/1.35 var(--font);
  color: var(--text);
  background: var(--glow), var(--bg);
  background-color: #02060e;
}
[data-theme='casino'] .only-betnet, [data-theme='betnet'] .only-casino { display: none !important; }

.brand { display: flex; align-items: center; justify-content: center; min-height: 36px; margin: 0 0 var(--gap); }
.brand img { height: clamp(26px, calc(var(--vh) * 4.6), 38px); width: auto; display: block; }
.brand-casino { display: inline-flex; align-items: center; font-size: clamp(20px, calc(var(--vh) * 3.4), 25px); font-weight: 850; letter-spacing: -0.045em; color: #f8faff; white-space: nowrap; }
.brand-casino strong { margin-left: 0.3rem; color: #ffd978; font-weight: 820; }
.brand-pulse { width: 1.52em; height: 0.96em; margin-right: 0.38rem; overflow: visible; }
.brand-pulse path { fill: none; stroke: #ff3151; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.card {
  width: 100%; max-width: 440px;
  padding: clamp(14px, calc(var(--vh) * 2.6), 28px) clamp(16px, 5vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top-color: var(--edge);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}
.card--wide { max-width: 640px; }

h1 { margin: 0 0 4px; font: 700 var(--fs-h)/1.15 var(--font-display); letter-spacing: -0.02em; }
h2 { margin: 0 0 6px; font-size: var(--fs-s); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sub { margin: 0 0 var(--gap); color: var(--muted); font-size: var(--fs-m); }
.sub strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

label { display: block; margin: 0 0 6px; font-size: var(--fs-s); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field { display: flex; align-items: center; gap: 10px; min-height: var(--ctl); padding: 0 14px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--field-bg); color: var(--muted); }
.field:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; }
.field.is-error { border-color: var(--danger); }
.field svg { flex: none; width: 18px; height: 18px; }
.field input { flex: 1; min-width: 0; min-height: 44px; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 16px; /* 16px stops iOS zoom */ }
.field input::placeholder { color: #8a9bb8; }
.code input { font-size: clamp(20px, calc(var(--vh) * 3.4), 26px); letter-spacing: 0.5em; font-variant-numeric: tabular-nums; text-align: center; padding-left: 0.5em; }

.msg { min-height: 1.35em; margin: 6px 0 0; font-size: var(--fs-s); color: var(--danger); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: var(--ctl); padding: 0 16px;
  border: 1px solid var(--field-line); border-radius: var(--radius);
  background: transparent; color: var(--text);
  font: 700 var(--fs-m)/1 var(--font); text-decoration: none; cursor: pointer;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { border-color: var(--focus); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn--primary { background: var(--primary); border-color: var(--primary-border); color: #fff; }
.btn--quiet { gap: 0; border-color: transparent; color: var(--accent-text); min-height: 44px; width: auto; }
.btn[aria-disabled='true'], .btn:disabled { color: var(--muted); cursor: not-allowed; }
.btn--primary[aria-disabled='true'] { background: transparent; border-color: var(--border); }
.stack { display: grid; gap: var(--gap); }
.stack--tight { gap: 8px; }
.or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font-size: var(--fs-s); font-weight: 800; letter-spacing: 0.12em; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.note { margin: var(--gap) 0 0; color: var(--muted); font-size: var(--fs-s); }
a { color: var(--accent-text); }

/* locked state */
.lock { width: 48px; height: 48px; margin: 0 auto 8px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--danger); color: var(--danger); }
.lock svg { width: 24px; height: 24px; }
.center { text-align: center; }

/* account page */
.who { margin: 0 0 var(--gap); }
.cols { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .cols { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-s); }
.chips .on::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; }
.chips .off { color: var(--muted); }
.chips .off::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--muted); }
.sessions { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); }
.sessions li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px; font-size: var(--fs-s); }
.sessions li + li { border-top: 1px solid var(--border); }
.sessions .meta { color: var(--muted); white-space: nowrap; }
.sessions .here { color: var(--accent-text); font-weight: 700; }
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.danger { border-color: var(--danger); color: var(--danger); }
.fine { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
@media (max-height: 700px) { .fine { display: none; } }

/* first sign-up: the two confirmations, on the code screen */
.consent { margin: 0; padding: 0; border: 0; display: grid; gap: 4px; }
.consent legend { padding: 0; margin: 0 0 2px; font-size: var(--fs-s); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-size: var(--fs-m); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--focus); }