/* =====================================================================
   Luka — Telegram Mini App theme (black lacquer + burnished gold)
   SKIN ONLY. Nothing in this file sets display, position, width,
   margin, gap, grid/flex or container padding. Apply it on top of the
   existing layout; do not change DOM structure or spacing.
   ===================================================================== */

/* Fonts (add to <head>):
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
*/

:root {
  color-scheme: dark;

  /* ---------- Backgrounds & surfaces ---------- */
  --color-bg: #0A0806;            /* app background */
  --color-bg-elevated: #14100B;   /* sheets, modals, grouped sections */
  --color-surface-0: #120E09;     /* inputs, segmented container */
  --color-surface-1: #1C160E;     /* cards, neutral buttons, chips */
  --color-surface-2: #261D12;     /* pressed surface, stepper buttons */
  --color-surface-3: #2A2216;     /* tracks, disabled fills */
  --color-border: #2A2116;        /* dividers, card borders */
  --color-border-strong: #3A2E1C; /* input borders */
  --color-border-gold: rgba(245, 196, 81, 0.16);
  --color-overlay: rgba(5, 4, 2, 0.72);

  /* ---------- Gold scale ---------- */
  --gold-50:  #FFF6E3;
  --gold-100: #FFF1C9;
  --gold-200: #FFE9A8;
  --gold-300: #F5D27A;
  --gold-400: #F5C451;  /* PRIMARY */
  --gold-500: #D99A2B;
  --gold-600: #AE7216;
  --gold-700: #5E3D0C;
  --color-primary: var(--gold-400);

  /* ---------- Text (contrast vs --color-bg) ---------- */
  --text-primary: #FFF6E3;     /* 18.6:1 */
  --text-secondary: #CDBB98;   /* 10.6:1 */
  --text-muted: #9A8866;       /* 5.8:1  */
  --text-placeholder: var(--text-muted);
  --text-disabled: var(--text-muted);
  --text-accent: #F5C451;      /* links, amounts' currency, active labels */
  --text-heading-gold: #F5D27A;
  --text-on-gold: #1A1206;     /* 11.4:1 on gold-400 */
  --text-on-danger: #FFF4F2;

  /* ---------- Semantic ---------- */
  --success: #3DD68C;
  --success-text: #5BE0A0;
  --success-bg: rgba(61, 214, 140, 0.14);
  --danger: #D2342B;
  --danger-text: #FF7A7E;
  --danger-border: #FF5A5F;
  --danger-bg: rgba(255, 90, 95, 0.14);
  --warning: #FFB224;
  --info: #8AB4F8;

  /* ---------- Gradients ---------- */
  --gradient-gold: linear-gradient(180deg, #FFE9A8 0%, #F5C451 42%, #D99A2B 100%);
  --gradient-gold-pressed: linear-gradient(180deg, #E8C46A 0%, #D99A2B 55%, #AE7216 100%);
  --gradient-gold-h: linear-gradient(90deg, #D99A2B, #F5C451);
  --gradient-danger: linear-gradient(180deg, #C93A33 0%, #A1221B 100%);
  --gradient-danger-pressed: linear-gradient(180deg, #B8342D 0%, #8E1D17 100%);
  --gradient-surface: linear-gradient(180deg, #1F180F 0%, #14100A 100%);
  --gradient-ambient: radial-gradient(ellipse 80% 40% at 50% -8%, rgba(245,196,81,0.12), rgba(10,8,6,0) 60%);
  --gradient-text-gold: linear-gradient(180deg, #FFF1C9 0%, #F5C451 48%, #B97A16 100%);

  /* ---------- Shadows & glow ---------- */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
  --bevel-gold: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(122,74,10,0.45);
  --shadow-gold-btn: var(--bevel-gold), 0 6px 20px rgba(245,196,81,0.28);
  --shadow-gold-pressed: inset 0 2px 5px rgba(90,52,6,0.55), 0 2px 8px rgba(245,196,81,0.18);
  --glow-gold: 0 0 0 1px rgba(245,196,81,0.12), 0 0 24px rgba(245,196,81,0.28);
  --focus-ring: 0 0 0 3px rgba(245,196,81,0.22);
  --focus-ring-danger: 0 0 0 3px rgba(255,90,95,0.16);

  /* ---------- Radius ---------- */
  --radius-xs: 6px;    /* badges, checkbox */
  --radius-sm: 10px;   /* small buttons, inner segments */
  --radius-md: 14px;   /* buttons, inputs */
  --radius-lg: 20px;   /* cards, sheets */
  --radius-pill: 999px;
  --radius-round: 50%;
  --radius-sparkle: 1px;
  --color-transparent: transparent;
  --color-current: currentColor;
  --shadow-none: none;
  --shadow-sparkles: -75px -8px currentColor, -48px -20px currentColor,
    -22px -12px currentColor, 22px -22px currentColor,
    48px -10px currentColor, 75px -18px currentColor;
  --background-featured: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(245,196,81,0.18), rgba(245,196,81,0) 70%), #17120B;
  --background-tabbar: rgba(10,8,6,0.94);
  --background-active: rgba(245,196,81,0.12);
  --background-secondary: rgba(245,196,81,0.06);
  --border-secondary: rgba(245,196,81,0.6);
  --background-input-error: #160C0B;
  --background-input-focus: #16110A;

  /* ---------- Spacing (reference only — do NOT re-space layout) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  /* ---------- Typography ---------- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-display:  700 34px/38px var(--font-display);  /* +0.04em */
  --text-title:    600 22px/28px var(--font-display);  /* +0.03em */
  --text-headline: 700 17px/22px var(--font-body);
  --text-body:     500 15px/22px var(--font-body);
  --text-label:    600 13px/18px var(--font-body);     /* +0.02em */
  --text-caption:  600 12px/16px var(--font-body);     /* +0.02em */
  --text-overline: 700 11px/14px var(--font-body);     /* +0.14em, uppercase */
  --text-amount:   800 28px/32px var(--font-body);     /* tabular-nums */
  --text-button-lg: 800 16px/1 var(--font-body);
  --text-button-md: 800 15px/1 var(--font-body);
  --text-button-sm: 800 13px/1 var(--font-body);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ---------- Recommended control sizes (keep existing ones if different) ---------- */
  --control-h-lg: 52px;
  --control-h-md: 44px;
  --control-h-sm: 36px;
}

/* ---------------- Base ---------------- */
html, body {
  background: var(--gradient-ambient), var(--color-bg);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(245,196,81,0.35); color: var(--text-primary); }
input, textarea { caret-color: var(--gold-400); }
a { color: var(--text-accent); }
h1, h2, .title { font-family: var(--font-display); letter-spacing: 0.03em; color: var(--text-heading-gold); }
.amount, [data-amount] { font-variant-numeric: tabular-nums; }
.text-gold-gradient {
  background: var(--gradient-text-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------- Buttons ---------------- */
.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: var(--text-button-lg);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: translateY(1px); } /* transform = no layout shift */
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; box-shadow: none; transform: none; }
.btn[aria-busy="true"] { opacity: 0.92; pointer-events: none; }
.btn--md { border-radius: 12px; font: var(--text-button-md); }
.btn--sm { border-radius: var(--radius-sm); font: var(--text-button-sm); }

.btn--primary { background: var(--gradient-gold); color: var(--text-on-gold); box-shadow: var(--shadow-gold-btn); }
.btn--primary:active:not(:disabled) { background: var(--gradient-gold-pressed); box-shadow: var(--shadow-gold-pressed); }
.btn--primary:disabled { background: var(--color-surface-3); color: #6B5D45; }

.btn--secondary { background: rgba(245,196,81,0.06); border-color: rgba(245,196,81,0.6); color: var(--gold-400); font-weight: 700; }
.btn--secondary:active:not(:disabled) { background: rgba(245,196,81,0.16); border-color: var(--gold-400); color: var(--gold-200); }
.btn--secondary:disabled { background: transparent; border-color: #2E2518; color: var(--text-disabled); }

.btn--ghost { background: transparent; color: var(--gold-300); font-weight: 700; }
.btn--ghost:active:not(:disabled) { background: rgba(245,196,81,0.10); color: var(--gold-200); }
.btn--ghost:disabled { color: var(--text-disabled); }

.btn--neutral { background: var(--color-surface-1); border-color: #33281A; color: var(--text-primary); font-weight: 700; }
.btn--neutral:active:not(:disabled) { background: var(--color-surface-2); border-color: #45361F; }
.btn--neutral:disabled { background: var(--color-surface-0); border-color: #221A10; color: var(--text-disabled); }

.btn--danger { background: var(--gradient-danger); color: var(--text-on-danger); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 18px rgba(210,52,43,0.28); }
.btn--danger:active:not(:disabled) { background: var(--gradient-danger-pressed); box-shadow: inset 0 2px 5px rgba(60,8,4,0.5); }
.btn--danger:disabled { background: #2A1714; color: #6E4A44; }

.btn-icon { border-radius: 12px; background: var(--color-surface-1); border: 1px solid #33281A; color: var(--gold-400); }
.btn-icon--primary { background: var(--gradient-gold); border-color: transparent; color: var(--text-on-gold); box-shadow: var(--bevel-gold); }
.btn-icon--round { border-radius: 50%; }
.btn-icon--subtle { background: rgba(255,246,227,0.06); border-color: transparent; color: var(--text-secondary); }
.btn svg, .btn-icon svg { stroke: currentColor; }

/* Spinner inside loading buttons */
.spinner { border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Inputs ---------------- */
.label { font: var(--text-label); letter-spacing: 0.02em; color: var(--text-secondary); }
.helper { font: 500 12px/16px var(--font-body); color: var(--text-muted); }
.helper--error { color: var(--danger-text); font-weight: 600; }

.input, .input-group {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font: 500 16px/1.2 var(--font-body); /* 16px avoids iOS zoom */
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
.input-group input { background: transparent; border: 0; outline: none; color: inherit; font: inherit; }
.input::placeholder, .input-group input::placeholder { color: var(--text-placeholder); }
.input:focus, .input-group:focus-within { border-color: var(--gold-400); background: #16110A; box-shadow: var(--focus-ring); }
.input[aria-invalid="true"], .input-group.is-error { border-color: var(--danger-border); background: #160C0B; box-shadow: var(--focus-ring-danger); }
.input:disabled, .input-group.is-disabled { background: #0F0C08; border-color: #251D12; color: var(--text-disabled); }

.input--amount, .input-group--amount input { font: 800 22px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.input-group--amount { border-radius: 16px; }
.input-suffix { font-weight: 700; color: var(--gold-400); }
.input-chip { /* MAX / ½ / x2 */
  border: 1px solid rgba(245,196,81,0.5); border-radius: var(--radius-sm);
  background: rgba(245,196,81,0.08); color: var(--gold-400);
  font: 800 12px/1 var(--font-body); letter-spacing: 0.08em;
}
.input--search, .input-group--search { background: var(--color-surface-1); border-color: #2C2316; border-radius: var(--radius-pill); }
.input-group--search svg { stroke: var(--text-muted); }

.stepper { background: var(--color-surface-0); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.stepper__btn { background: var(--color-surface-2); border: 0; border-radius: var(--radius-sm); color: var(--gold-400); }
.stepper__btn:active { background: var(--color-surface-3); }
.stepper__value { font: 800 18px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* ---------------- Selection controls ---------------- */
/* Switch (track + thumb) */
.switch { border-radius: var(--radius-pill); background: var(--color-surface-3); border: 1px solid var(--color-border-strong); transition: background var(--duration-base); }
.switch__thumb { border-radius: 50%; background: #8E7D5E; box-shadow: 0 2px 4px rgba(0,0,0,0.4); transition: transform var(--duration-base) var(--ease-out), background var(--duration-base); }
.switch[aria-checked="true"], .switch.is-on, input:checked + .switch { background: var(--gradient-gold); border-color: transparent; box-shadow: 0 0 14px rgba(245,196,81,0.3); }
.switch[aria-checked="true"] .switch__thumb, .switch.is-on .switch__thumb, input:checked + .switch .switch__thumb { background: var(--text-on-gold); }

/* Checkbox / radio (custom box) */
.checkbox, .radio { background: var(--color-surface-0); border: 1.5px solid #5A4A2E; }
.checkbox { border-radius: var(--radius-xs); }
.radio { border-radius: 50%; }
.checkbox.is-checked, input:checked + .checkbox { background: var(--gradient-gold); border-color: transparent; color: var(--text-on-gold); }
.radio.is-checked, input:checked + .radio { border-color: var(--gold-400); }
.radio__dot { border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 8px rgba(245,196,81,0.6); }
/* Native fallback if the app uses plain inputs */
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--gold-400); }

/* Segmented control */
.segmented { background: var(--color-surface-0); border: 1px solid #2C2316; border-radius: var(--radius-md); }
.segmented__item { border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: 700 13px/1 var(--font-body); }
.segmented__item[aria-selected="true"], .segmented__item.is-active { background: var(--gradient-gold); color: var(--text-on-gold); font-weight: 800; }

/* Tabs / chips / filters */
.chip { border: 1px solid #33281A; border-radius: var(--radius-pill); background: var(--color-surface-1); color: var(--text-secondary); font: 600 13px/1 var(--font-body); }
.chip[aria-selected="true"], .chip.is-active { border-color: var(--gold-400); background: rgba(245,196,81,0.12); color: var(--gold-400); font-weight: 700; }

/* Slider */
.slider__track { border-radius: 3px; background: var(--color-surface-3); }
.slider__fill { border-radius: 3px; background: var(--gradient-gold-h); }
.slider__thumb { border-radius: 50%; background: var(--gold-200); border: 3px solid var(--gold-400);
  box-shadow: 0 0 0 6px rgba(245,196,81,0.14), 0 2px 6px rgba(0,0,0,0.5); }

/* Badges */
.badge { border-radius: var(--radius-xs); font: 800 11px/1 var(--font-body); letter-spacing: 0.06em; }
.badge--gold { background: var(--gradient-gold); color: var(--text-on-gold); }
.badge--outline { border: 1px solid rgba(245,196,81,0.45); color: var(--gold-400); }
.badge--live, .badge--danger { background: var(--danger-bg); color: var(--danger-text); }
.badge--success { background: var(--success-bg); color: var(--success-text); }
.badge--count { border-radius: var(--radius-pill); background: var(--danger-border); color: #fff; }

/* ---------------- Surfaces that wrap controls ---------------- */
.card { background: var(--gradient-surface); border: 1px solid var(--color-border-gold); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.card--featured { background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(245,196,81,0.18), rgba(245,196,81,0) 70%), #17120B;
  border-color: rgba(245,196,81,0.55); box-shadow: var(--glow-gold); }
.sheet, .modal { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.backdrop { background: var(--color-overlay); }
.list-row { border-bottom: 1px solid var(--color-border); color: var(--text-primary); }
.list-row:active { background: rgba(245,196,81,0.05); }
.list-row__icon { border-radius: var(--radius-sm); background: rgba(245,196,81,0.10); color: var(--gold-400); }
.amount--win { color: var(--success-text); }
.amount--loss { color: var(--danger-text); }
.tabbar { background: rgba(10,8,6,0.94); border-top: 1px solid var(--color-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tabbar__item { color: #8E7D5E; font: 600 11px/1 var(--font-body); }
.tabbar__item.is-active, .tabbar__item[aria-current="page"] { color: var(--gold-400); font-weight: 700; }
.skeleton { background: linear-gradient(90deg, #1C160E 0%, #261D12 50%, #1C160E 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------- Telegram theme override ----------------
   telegram-web-app.js writes --tg-theme-* inline on <html> (beats :root),
   so if the app styles with --tg-theme-* vars, remap them in JS after
   Telegram.WebApp.ready():

   const T = {
     'bg-color': '#0A0806', 'secondary-bg-color': '#14100B',
     'section-bg-color': '#1C160E', 'header-bg-color': '#0A0806',
     'bottom-bar-bg-color': '#0A0806',
     'text-color': '#FFF6E3', 'hint-color': '#9A8866',
     'subtitle-text-color': '#CDBB98', 'section-header-text-color': '#D99A2B',
     'link-color': '#F5C451', 'accent-text-color': '#F5C451',
     'button-color': '#F5C451', 'button-text-color': '#1A1206',
     'destructive-text-color': '#FF7A7E', 'section-separator-color': '#2A2116'
   };
   for (const [k, v] of Object.entries(T))
     document.documentElement.style.setProperty(`--tg-theme-${k}`, v);

   const tg = Telegram.WebApp;
   tg.setHeaderColor('#0A0806');
   tg.setBackgroundColor('#0A0806');
   tg.setBottomBarColor?.('#0A0806');
   tg.MainButton.setParams({ color: '#F5C451', text_color: '#1A1206' });
   tg.SecondaryButton?.setParams({ color: '#1C160E', text_color: '#F5C451' });
   // Re-apply in tg.onEvent('themeChanged', …) so light-mode users keep this look.
*/