/* =========================================================
   CYBERHORSE — Design System / Theme
   Palette néon cyan + or, glassmorphism, glow cyber
   ========================================================= */

:root {
  /* --- Fonds --- */
  --bg-0: #04060c;
  --bg-1: #070c17;
  --bg-2: #0b1122;
  --bg-3: #101a30;

  /* --- Surfaces verre --- */
  --glass: rgba(15, 26, 48, 0.55);
  --glass-2: rgba(20, 34, 60, 0.72);
  --glass-brd: rgba(0, 229, 208, 0.16);
  --glass-brd-2: rgba(120, 180, 255, 0.10);
  --glass-hi: rgba(255, 255, 255, 0.06);

  /* --- Néon / accents --- */
  --neon: #00e9d0;         /* cyan principal */
  --neon-2: #24b4ff;       /* bleu électrique */
  --neon-soft: #7ff6e8;
  --neon-deep: #0891a0;
  --violet: #a06bff;
  --pink: #ff5cc8;

  /* --- Or (monnaie) --- */
  --gold: #ffd24a;
  --gold-2: #ffb020;
  --gold-deep: #b9791a;

  /* --- Sémantique --- */
  --ok: #35e39a;
  --warn: #ffc046;
  --danger: #ff5a6a;

  /* --- Texte --- */
  --tx: #eaf4ff;
  --tx-dim: #8ea6c8;
  --tx-mut: #5a708f;

  /* --- Rayons / ombres --- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --glow-neon: 0 0 12px rgba(0, 233, 208, 0.55), 0 0 34px rgba(0, 233, 208, 0.22);
  --glow-neon-lg: 0 0 22px rgba(0, 233, 208, 0.65), 0 0 60px rgba(0, 233, 208, 0.30);
  --glow-gold: 0 0 12px rgba(255, 200, 74, 0.55), 0 0 34px rgba(255, 176, 32, 0.25);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--glass-hi);

  /* --- Typo --- */
  --f-display: "Orbitron", "Rajdhani", system-ui, sans-serif;
  --f-num: "Rajdhani", "Orbitron", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;

  /* --- Safe areas Telegram / iOS (--tg-top = contrôles Telegram en plein écran) --- */
  --tg-top: 0px;
  --sat: max(env(safe-area-inset-top, 0px), var(--tg-top, 0px));
  --sab: env(safe-area-inset-bottom, 0px);

  --nav-h: 76px;
}

/* ========================= Reset ========================= */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

body {
  font-family: var(--f-body);
  color: var(--tx);
  background: var(--bg-0);
  font-size: 15px;
  line-height: 1.4;
  position: fixed;
  inset: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img, svg { display: block; }
.hidden { display: none !important; }

/* Numériques tabulaires pour les compteurs */
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: .5px; }

/* ==================== Fond animé cyber ==================== */
.bg-grid,
.bg-glow,
.bg-scan,
.bg-particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.bg-grid {
  background-image:
    linear-gradient(rgba(0, 233, 208, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 233, 208, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 90% at 50% 8%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 8%, #000 20%, transparent 78%);
  transform: perspective(600px) rotateX(0deg);
  animation: gridDrift 22s linear infinite;
}
@keyframes gridDrift { to { background-position: 0 44px, 44px 0; } }

.bg-glow {
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(0, 233, 208, 0.16), transparent 70%),
    radial-gradient(50% 40% at 12% 22%, rgba(36, 180, 255, 0.12), transparent 70%),
    radial-gradient(55% 45% at 88% 30%, rgba(160, 107, 255, 0.10), transparent 72%),
    radial-gradient(90% 60% at 50% 108%, rgba(255, 176, 32, 0.08), transparent 70%);
  animation: glowPulse 8s ease-in-out infinite alternate;
}
@keyframes glowPulse { from { opacity: .75; } to { opacity: 1; } }

.bg-scan {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: .5;
}

.bg-particles i {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--neon);
  box-shadow: var(--glow-neon);
  opacity: .5;
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  from { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .5; }
  to   { transform: translateY(-102vh) scale(.4); opacity: 0; }
}

/* ==================== Verre / cartes ==================== */
.glass {
  background: linear-gradient(160deg, var(--glass), var(--glass-2));
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  position: relative;
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(0, 233, 208, 0.35), transparent 40%, transparent 70%, rgba(36, 180, 255, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .7;
}

/* ==================== Boutons ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: var(--r-md);
  font-family: var(--f-display); font-weight: 700; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--bg-0);
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
  box-shadow: var(--glow-neon), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:active { transform: scale(.96); filter: brightness(1.1); }
.btn:disabled { opacity: .45; filter: grayscale(.4); box-shadow: none; }
.btn--ghost {
  color: var(--neon); background: rgba(0, 233, 208, 0.06);
  border: 1px solid var(--glass-brd); box-shadow: none;
}
.btn--gold { background: linear-gradient(135deg, var(--gold), var(--gold-2)); box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn--block { display: flex; width: 100%; }

/* ==================== Splash ==================== */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(80% 60% at 50% 40%, var(--bg-2), var(--bg-0) 80%);
  transition: opacity .6s ease, visibility .6s;
}
.splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-ring {
  width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid rgba(0, 233, 208, 0.15);
  border-top-color: var(--neon); border-right-color: var(--neon-2);
  box-shadow: var(--glow-neon-lg), inset 0 0 30px rgba(0, 233, 208, 0.15);
  animation: spin 1.1s cubic-bezier(.6,.2,.4,.8) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.splash-logo {
  font-family: var(--f-display); font-weight: 900; font-size: 34px; letter-spacing: 4px;
  color: var(--tx); text-shadow: var(--glow-neon);
}
.splash-logo span { color: var(--neon); }
.splash-sub { font-family: var(--f-num); font-size: 12px; letter-spacing: 4px; color: var(--tx-dim); text-transform: uppercase; }
.splash-bar { width: 180px; height: 4px; border-radius: 4px; background: rgba(0, 233, 208, 0.12); overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow: var(--glow-neon); animation: load 1.4s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }

/* ==================== App root ==================== */
.app { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; }
.view { flex: 1; position: relative; overflow: hidden; z-index: 2; }

/* Layers flottants */
.fx-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.toast-layer { position: fixed; left: 0; right: 0; top: calc(var(--sat) + 12px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.sheet-layer { position: fixed; inset: 0; z-index: 55; pointer-events: none; }

/* ==================== Transitions écrans ==================== */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--sat) + 10px) 14px 8px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.screen::-webkit-scrollbar { width: 0; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
.screen.enter { animation: screenIn .32s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}