/* ================================================
   BASE — Reset, variables CSS, styles globaux
   ================================================ */

/* ── Variables ── */
:root {
  /* Fond */
  --color-bg:            #01010F;

  /* Zones — fond uniforme, pas de blocs de couleur */
  --color-bg-camera:     #01010F;
  --color-bg-game:       #01010F;
  --color-bg-overlay:    #020215;
  --color-bg-tiktok:     #01010F;

  /* Or — accent principal luxury */
  --gold:                #C9A84C;
  --gold-bright:         #F0D080;
  --gold-dim:            rgba(201, 168, 76, 0.15);
  --gold-line:           rgba(201, 168, 76, 0.30);
  --gold-glow:           rgba(201, 168, 76, 0.10);

  /* Séparateurs & bordures */
  --color-border:        rgba(201, 168, 76, 0.18);
  --color-border-cam:    rgba(201, 168, 76, 0.30);
  --color-border-item:   rgba(201, 168, 76, 0.20);

  /* Textes */
  --color-label:         rgba(201, 168, 76, 0.50);
  --color-cam-icon:      rgba(201, 168, 76, 0.18);
  --color-cam-label:     rgba(255, 255, 255, 0.35);
  --color-game-text:     rgba(255, 255, 255, 0.10);
  --color-overlay-bg:    transparent;
  --color-overlay-text:  rgba(255, 255, 255, 0.70);
  --color-tiktok-accent: #FF4D6A;
  --color-msg-text:      rgba(255, 255, 255, 0.78);
  --color-scrollbar:     rgba(201, 168, 76, 0.20);

  /* Bandeaux latéraux */
  --band-color:          #C9A84C;
  --band-opacity-max:    0.40;

  /* Typographie */
  --font-display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-main:    'Inter', 'Segoe UI', system-ui, sans-serif;
}

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

/* ── Global ── */
html,
body {
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  overflow: hidden;
  font-family: var(--font-main);
  color: #ffffff;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* ── Scrollbar commune ── */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar);
  border-radius: 2px;
}

/* ── Performance GPU ── */
.wrapper, .layout, .zone-camera, .zone-game, .zone-overlay, .zone-tiktok {
  will-change: auto;
  contain: layout style;
}

/* ── Safe area (iPhone notch / Dynamic Island) ── */
@supports (padding: env(safe-area-inset-top)) {
  body.has-helios-nav {
    padding-top: calc(52px + env(safe-area-inset-top));
  }
  .band-left  { padding-left: env(safe-area-inset-left); }
  .band-right { padding-right: env(safe-area-inset-right); }
  .zone-tiktok { padding-bottom: env(safe-area-inset-bottom); }
}