/* Composants visuels étape 6 (cartes, jetons, barre de mise) + socle graphique étape 9 :
   polices auto-hébergées (RGPD — aucun CDN), palette casino, fond de salle. */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --felt: #1d6b45;
  --felt-dark: #145032;
  --ink: #1c2321;
  --paper: #f6f4ef;
  --accent: #d8a12c;
  --accent-bright: #f0c75e;
  --accent-deep: #b07f1a;
  --gold-grad: linear-gradient(180deg, var(--accent-bright), var(--accent) 55%, var(--accent-deep));
  --line-gold: rgba(240, 199, 94, 0.28);
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --card-w: 76px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background:
    radial-gradient(1100px 650px at 50% -12%, #1a5c3c 0%, #113f29 48%, #0b2e1e 100%)
    fixed #0b2e1e;
  color: var(--paper);
  padding: 24px;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--accent-bright);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  margin: 28px 0 10px;
  color: var(--accent-bright);
}
.note { color: #c9d6cd; font-size: 0.85rem; margin: 0 0 16px; }

section {
  background: linear-gradient(165deg, #227a4e 0%, var(--felt) 45%, #17603c 100%);
  border: 1px solid var(--line-gold);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* --- Cartes --- */
.card {
  width: var(--card-w);
  height: auto;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
.card-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Jetons --- */
.chip-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.chip-item { text-align: center; font-size: 0.8rem; }

.chip-stack { position: relative; display: inline-block; }
.chip-stack svg { display: block; }
.chip-stack svg + svg { margin-top: -44px; }
.stack-amount { text-align: center; font-size: 0.85rem; margin-top: 6px; }
.stacks { display: flex; gap: 36px; align-items: flex-end; flex-wrap: wrap; }

/* --- Barre de mise --- */
.bet-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bet-bar button {
  font: inherit;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--gold-grad);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.bet-bar button:hover { filter: brightness(1.08); }
.bet-bar input[type='number'] {
  font: inherit;
  width: 110px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.28);
  color: var(--paper);
}
.bet-context { font-size: 0.9rem; margin: 0 0 10px; color: #e8efe9; }

.preset-editor { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.preset-editor input {
  font: inherit;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.28);
  color: var(--paper);
  width: 240px;
}
.preset-editor button {
  font: inherit;
  padding: 7px 12px;
  border-radius: 8px;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.preset-error { color: #ffb3a7; font-size: 0.85rem; width: 100%; min-height: 1.2em; margin: 0; }