/* ==========================================================
   HIT THE ROAD 3D — Thème "Toy Road" (voxel, moderne, chunky)
   Feuille unique : remplace style.css + roadsign.css
   ========================================================== */

/* Polices Locales 100% Autonomes & Conformes RGPD */
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lilita-one.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin.woff2') format('woff2');
}

:root {
  --bg-1: #17214a;
  --bg-2: #0c1230;
  --panel: #1b2554;
  --panel-2: #222e64;
  --panel-3: #2b3874;
  --edge: rgba(255, 255, 255, .10);
  --edge-2: rgba(255, 255, 255, .18);
  --ink: #ffffff;
  --muted: #9eabd8;
  --shadow-hard: #070b20;

  --yellow: #ffc93c;  --yellow-2: #f2a91c;  --yellow-3: #b87400;  --yellow-ink: #3b2600;
  --green:  #34d37a;  --green-2:  #1fae5c;  --green-3:  #137a40;  --green-ink: #04301a;
  --blue:   #4bb2ff;  --blue-2:   #2a8be0;  --blue-3:   #1a5fa6;
  --red:    #ff5a6a;  --red-2:    #e23447;  --red-3:    #a3192b;
  --orange: #ff9a3d;  --orange-2: #ef7419;  --orange-3: #b34f07;
  --purple: #a782ff;  --purple-2: #7f57f0;  --purple-3: #5530b8;

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --display: "Lilita One", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}
body.toy {
  font-family: var(--body);
  font-weight: 700;
  color: var(--ink);
  background-color: var(--bg-2);
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(75, 178, 255, .22), transparent 60%),
    radial-gradient(900px 500px at 50% 110%, rgba(167, 130, 255, .18), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
/* motif voxel discret */
body.toy::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
button { font-family: inherit; cursor: pointer; color: inherit; }
input { font-family: inherit; user-select: text; -webkit-user-select: text; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
svg { display: block; }

/* ---------- Conteneur ---------- */
.casino-stage-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  height: 100%;
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

#fxCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1500;
  pointer-events: none;
}

/* ---------- En-tête ---------- */
.top-casino-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.road-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.road-hero-badge {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--yellow);
  border: 3px solid #fff;
  box-shadow: 0 4px 0 var(--shadow-hard), 0 8px 18px rgba(0,0,0,.35);
  transform: rotate(-6deg);
}
.road-hero-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }

.road-title-text { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.road-title-brand {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 6.2vw, 1.9rem);
  letter-spacing: .01em;
  color: #fff;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 #c9d6ff,
    0 4px 0 var(--shadow-hard),
    0 8px 14px rgba(0,0,0,.35);
  white-space: nowrap;
}
.road-title-brand em {
  font-style: normal;
  display: inline-block;
  margin-left: 2px;
  padding: 2px 7px 0;
  font-size: .62em;
  vertical-align: .35em;
  border-radius: 8px;
  color: var(--yellow-ink);
  background: var(--yellow);
  text-shadow: none;
  box-shadow: 0 3px 0 var(--yellow-3);
  transform: rotate(4deg);
}
.road-title-sub {
  margin-top: 5px;
  font-size: .76rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-audio-btn {
  margin-left: auto;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 var(--shadow-hard);
  transition: transform .08s ease, box-shadow .08s ease;
}
.header-audio-btn svg { width: 22px; height: 22px; }
.header-audio-btn .ico-off { display: none; }
.header-audio-btn.is-muted .ico-on { display: none; }
.header-audio-btn.is-muted .ico-off { display: block; }
.header-audio-btn.is-muted { color: var(--muted); }
.header-audio-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--edge), 0 1px 0 var(--shadow-hard); }

/* Compteurs */
.header-metrics-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 8px;
}
.metric-capsule {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 54px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 var(--shadow-hard);
  cursor: pointer;
  transition: transform .1s ease;
}
.metric-capsule:active { transform: translateY(2px); }
.capsule-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-family: var(--display);
  font-size: .78rem;
  line-height: 1;
}
.capsule-icon.coin {
  border-radius: 50%;
  color: var(--yellow-ink);
  background: radial-gradient(circle at 35% 30%, #fff1b8 0 18%, var(--yellow) 40%, var(--yellow-2) 100%);
  box-shadow: inset 0 -3px 0 var(--yellow-3), 0 0 0 2px rgba(255, 201, 60, .25);
  font-size: .62rem;
}
.capsule-icon.chip {
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--purple) 0 38%, transparent 40%),
    repeating-conic-gradient(#fff 0 22.5deg, var(--purple-2) 22.5deg 45deg);
  box-shadow: inset 0 0 0 3px var(--purple-2);
}
.capsule-icon.mult {
  color: var(--green-ink);
  background: var(--green);
  box-shadow: inset 0 -3px 0 var(--green-3);
  font-size: 1.15rem;
}
.capsule-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.capsule-label {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.capsule-value {
  font-family: var(--display);
  font-size: clamp(.98rem, 3.9vw, 1.2rem);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.capsule-balance { padding-right: 42px; }
.capsule-plus-btn {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 9px;
  color: var(--green-ink);
  background: var(--green);
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: inset 0 -3px 0 var(--green-3);
}
.capsule-plus-btn:active { transform: translateY(-45%); box-shadow: inset 0 -1px 0 var(--green-3); }
.capsule-multiplier .capsule-value { color: var(--green); }
.mult-short-text { display: none; }

/* ---------- Plateau 3D ---------- */
.table-perspective-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.road-3d-stage-container {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #9fdcf5;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.14),
    0 6px 0 var(--shadow-hard),
    0 18px 40px rgba(0,0,0,.45);
  isolation: isolate;
}
.webgl-canvas-viewport {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: pointer;
  touch-action: manipulation;
}
/* assombrissement des bords (zone hors-jeu) */
.stage-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(12, 22, 60, .30), transparent 16%, transparent 84%, rgba(12, 22, 60, .30)),
    radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(12, 22, 60, .28) 100%);
}

/* Bandeau d'arrivée */
.highway-finish-line-hud {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}
.finish-banner-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 8px;
  border-radius: 14px;
  background: #fff;
  color: #1d2033;
  box-shadow: 0 4px 0 rgba(12, 22, 60, .35), 0 10px 20px rgba(12, 22, 60, .25);
  white-space: nowrap;
}
.finish-flag-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: conic-gradient(#1d2033 0 25%, #fff 0 50%, #1d2033 0 75%, #fff 0) 0 0 / 11px 11px;
  box-shadow: inset 0 0 0 2px #1d2033;
}
.finish-title {
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.finish-multiplier-tag {
  padding: 4px 9px 2px;
  border-radius: 10px;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--yellow-ink);
  background: var(--yellow);
  box-shadow: inset 0 -3px 0 var(--yellow-2);
}

/* Échelle de multiplicateurs (desktop) */
.road-hud-ladder {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
  pointer-events: none;
}
.ladder-step-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 96px;
  padding: 5px 9px 4px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 900;
  color: #fff;
  background: rgba(16, 24, 58, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14);
  transition: transform .18s ease, background .18s ease;
}
.ladder-step-pill span { opacity: .7; letter-spacing: .04em; }
.ladder-step-pill b { font-family: var(--display); font-weight: 400; font-size: .95rem; }
.ladder-step-pill.step-target {
  color: var(--yellow-ink);
  background: var(--yellow);
  box-shadow: inset 0 -3px 0 var(--yellow-2), 0 0 0 3px rgba(255, 201, 60, .35);
  transform: translateX(-6px) scale(1.06);
}
.ladder-step-pill.step-target span { opacity: .8; }
.ladder-step-pill.step-cleared {
  background: var(--green-2);
  box-shadow: inset 0 -3px 0 var(--green-3);
}
.ladder-step-pill.step-crashed {
  background: var(--red-2);
  box-shadow: inset 0 -3px 0 var(--red-3);
}

/* Indice tactile */
.stage-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translate(-50%, 8px);
  z-index: 4;
  padding: 6px 12px 5px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 900;
  color: #fff;
  background: rgba(16, 24, 58, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
body.is-playing .stage-hint { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Cockpit ---------- */
.bottom-cockpit-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--edge), 0 6px 0 var(--shadow-hard), 0 18px 40px rgba(0,0,0,.35);
}
.cockpit-main-action { display: flex; }

/* Bouton chunky générique */
.btn-cashout-3d,
.btn-hop-forward,
.btn-cashout-active-glow,
.btn-confirm-mines {
  --c1: var(--yellow); --c2: var(--yellow-2); --c3: var(--yellow-3); --ink: var(--yellow-ink);
  position: relative;
  border: 0;
  border-radius: var(--r-md);
  color: var(--ink);
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -4px 0 rgba(0,0,0,.08),
    0 6px 0 var(--c3),
    0 12px 20px rgba(0,0,0,.3);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn-cashout-3d:hover,
.btn-hop-forward:hover,
.btn-cashout-active-glow:hover,
.btn-confirm-mines:hover { filter: brightness(1.05); }
.btn-cashout-3d:active,
.btn-hop-forward:active,
.btn-cashout-active-glow:active,
.btn-confirm-mines:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    0 1px 0 var(--c3),
    0 4px 10px rgba(0,0,0,.3);
}
.btn-cashout-3d:disabled,
.btn-confirm-mines:disabled { filter: grayscale(.6) brightness(.8); cursor: not-allowed; }

.btn-cashout-3d {
  width: 100%;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
/* reflet qui balaie le bouton */
.btn-cashout-3d::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  animation: toy-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes toy-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.cashout-text-title {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: inherit;
}
.cashout-text-amount {
  font-size: .86rem;
  font-weight: 900;
  opacity: .72;
  color: inherit;
}

.cockpit-playing-actions {
  width: 100%;
  gap: 10px;
}
.btn-hop-forward,
.btn-cashout-active-glow {
  flex: 1 1 0;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.btn-hop-forward {
  --c1: var(--blue); --c2: var(--blue-2); --c3: var(--blue-3); --ink: #fff;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 2px;
  align-content: center;
}
.hop-icon svg { width: 22px; height: 22px; }
.hop-text {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.hop-lane-preview {
  flex-basis: 100%;
  text-align: center;
  font-size: .8rem;
  font-weight: 900;
  opacity: .85;
}
.hop-lane-preview::before { content: "Voie suivante · "; opacity: .8; }
.btn-cashout-active-glow {
  --c1: var(--green); --c2: var(--green-2); --c3: var(--green-3); --ink: #fff;
  animation: toy-cash-pulse 1.4s ease-in-out infinite;
}
.cash-title {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.cash-amount { font-size: .95rem; font-weight: 900; }
@keyframes toy-cash-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

/* Rangée d'outils */
.cockpit-tools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bet-stepper-control {
  flex: 1 1 auto;
  max-width: 210px;
  min-width: 130px;
  height: 52px;
  display: flex;
  align-items: stretch;
  padding: 4px;
  gap: 4px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  box-shadow: inset 0 2px 0 rgba(0,0,0,.35), inset 0 0 0 2px var(--edge);
}
.stepper-arrow {
  width: 40px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1;
  background: var(--panel-3);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25);
}
.stepper-arrow:active { transform: translateY(2px); box-shadow: none; }
.stepper-center-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  cursor: pointer;
}
.stepper-caption {
  font-size: .6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.stepper-amount {
  font-family: var(--display);
  font-size: 1.05rem;
  color: #fff;
  white-space: nowrap;
}

.cockpit-actions-group { display: flex; gap: 6px; }
.action-btn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 46px;
}
.btn-round-purple {
  --t1: var(--panel-3); --t3: #141c44; --tint: #fff;
  width: 46px; height: 42px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 13px;
  color: var(--tint);
  background: var(--t1);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 4px 0 var(--t3);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-round-purple svg { width: 22px; height: 22px; }
.btn-round-purple:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 1px 0 var(--t3); }
.btn-round-purple.tone-orange { --t1: var(--orange); --t3: var(--orange-3); }
.btn-round-purple.tone-green  { --t1: var(--green-2); --t3: var(--green-3); }
.btn-round-purple.tone-gold   { --t1: var(--yellow-2); --t3: var(--yellow-3); --tint: var(--yellow-ink); }
.btn-round-purple.tone-slate  { --t1: var(--panel-3); --t3: #10173a; }
.btn-round-purple.tone-red    { --t1: var(--red-2); --t3: var(--red-3); }
.action-label {
  font-size: .64rem;
  font-weight: 900;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: .02em;
}
.action-label.is-admin { color: var(--red); }

/* ---------- Modales ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  background: rgba(6, 10, 30, .66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-backdrop.active { opacity: 1; pointer-events: auto; }
.modal-content {
  position: relative;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 24px;
  color: #e8ecfb;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--edge-2), 0 8px 0 var(--shadow-hard), 0 30px 70px rgba(0,0,0,.55);
  transform: translateY(18px) scale(.96);
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
  scrollbar-width: thin;
  scrollbar-color: var(--panel-3) transparent;
}
.modal-backdrop.active .modal-content { transform: none; }
.modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px 18px;
  background: var(--panel);
  border-radius: 24px 24px 0 0;
}
.modal-header::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 4px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 18px, transparent 18px 30px);
  opacity: .8;
}
.modal-content.is-paypal .modal-header::after { background: repeating-linear-gradient(90deg, var(--blue) 0 18px, transparent 18px 30px); }
.modal-content.is-admin .modal-header::after { background: repeating-linear-gradient(90deg, var(--red) 0 18px, transparent 18px 30px); }
.modal-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: .01em;
  color: #fff;
}
.modal-close {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  background: var(--panel-3);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25);
}
.modal-close:active { transform: translateY(2px); }
.modal-body { padding: 16px 18px 20px; font-size: .92rem; }

.rs-stack { display: flex; flex-direction: column; gap: 14px; }
.rs-note { font-size: .86rem; line-height: 1.5; color: var(--muted); text-align: center; }
.rs-note b { color: #fff; }
.rs-divider { height: 2px; border-radius: 2px; background: var(--edge); }
.rs-section-title { font-family: var(--display); font-weight: 400; font-size: 1.05rem; color: var(--yellow); }
.rs-small { font-size: .76rem; color: var(--muted); }
.rs-small b { color: #fff; }
.rs-row { display: flex; gap: 8px; }
.rs-row > .form-input { flex: 1; }
.rs-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rs-link-btn {
  background: none; border: 0; padding: 0;
  color: var(--red);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: underline;
}
.quick-mines-grid { display: grid; gap: 8px; }
.rs-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Boutons secondaires */
.btn-chip {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-sm);
  color: #fff;
  font-weight: 900;
  font-size: .88rem;
  background: var(--panel-3);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 4px 0 #10173a;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 #10173a; }
.btn-chip.active {
  color: var(--yellow-ink);
  background: var(--yellow);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 var(--yellow-3);
}
.btn-chip.is-danger { background: var(--red-2); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 4px 0 var(--red-3); }
.btn-chip.is-warn { color: var(--yellow-ink); background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-3); }

.btn-confirm-mines {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.btn-confirm-mines .cashout-text-title { font-size: 1.15rem; }

/* Boutique */
.shop-packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 12px; }
.shop-pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 8px 10px;
  border-radius: 18px;
  text-align: center;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 2px var(--edge), 0 5px 0 #10173a;
  cursor: pointer;
  transition: transform .15s ease;
}
.shop-pack-card:hover { transform: translateY(-3px); }
.shop-pack-card.featured {
  background: linear-gradient(180deg, #3a3470, var(--panel-2));
  box-shadow: inset 0 0 0 3px var(--yellow), 0 5px 0 var(--yellow-3), 0 0 28px rgba(255, 201, 60, .25);
}
.pack-badge-popular {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 9px 2px;
  border-radius: 8px;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .05em;
  white-space: nowrap;
  color: #fff;
  background: var(--blue-2);
  box-shadow: 0 3px 0 var(--blue-3);
}
.pack-badge-popular.gold { color: var(--yellow-ink); background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-3); }
.pack-badge-popular.purple { background: var(--purple-2); box-shadow: 0 3px 0 var(--purple-3); }
.pack-icon { font-size: 1.9rem; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.pack-title { font-family: var(--display); font-size: clamp(.86rem, 3.6vw, 1.05rem); color: #fff; white-space: nowrap; }
.pack-bonus { font-size: .7rem; font-weight: 900; color: var(--green); }
.pack-price { font-weight: 900; font-size: 1rem; color: var(--yellow); margin-bottom: 4px; }
.btn-pack-buy {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  font-weight: 900;
  font-size: .84rem;
  background: var(--blue-2);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 4px 0 var(--blue-3);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-pack-buy:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-3); }
.btn-pack-buy.btn-pack-gold { color: var(--yellow-ink); background: var(--yellow); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 var(--yellow-3); }
.btn-pack-buy.is-danger { background: var(--red-2); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 4px 0 var(--red-3); }

.recharge-option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 18px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 2px var(--edge);
}
.recharge-option-info { display: flex; align-items: center; gap: 12px; }
.recharge-icon { font-size: 1.6rem; }
.recharge-title { font-weight: 900; color: #fff; }
.recharge-subtitle { font-size: .76rem; color: var(--muted); }
.btn-recharge-action {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  font-weight: 900;
}
.btn-recharge-green { color: var(--green-ink); background: var(--green); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 var(--green-3); }
.btn-recharge-green:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-3); }

.legal-compliance-notice {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: .74rem;
  line-height: 1.55;
  color: var(--muted);
  background: rgba(0,0,0,.2);
}
.legal-compliance-notice b { color: #dfe5ff; }

.rs-legal-item {
  padding: 12px 14px;
  border-radius: 14px;
  border-left: 4px solid var(--yellow);
  font-size: .84rem;
  line-height: 1.55;
  color: #cfd6f2;
  background: var(--panel-2);
}
.rs-legal-item b:first-child { display: block; margin-bottom: 3px; color: #fff; }

/* PayPal */
.rs-paypal-summary {
  padding: 18px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, rgba(75, 178, 255, .16), rgba(75, 178, 255, .05));
  box-shadow: inset 0 0 0 2px rgba(75, 178, 255, .3);
}
.rs-pack-name { font-weight: 900; font-size: 1.05rem; color: #fff; }
.rs-pack-price { font-family: var(--display); font-size: 2.3rem; color: var(--blue); margin: 4px 0; }
#paypal-button-container { min-height: 50px; display: flex; flex-direction: column; gap: 8px; }

/* Passerelle WikiMasters */
.withdraw-stepper-guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: var(--panel-2);
}
.guide-step { display: flex; align-items: flex-start; gap: 12px; }
.step-num {
  flex: 0 0 28px;
  height: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-family: var(--display);
  font-size: .95rem;
  color: var(--yellow-ink);
  background: var(--yellow);
  box-shadow: inset 0 -3px 0 var(--yellow-2);
}
.step-text { padding-top: 4px; font-size: .86rem; line-height: 1.45; color: #d6dcf5; }
.step-text b { color: #fff; }
.withdraw-form { margin-top: 16px; }
#withdrawStatusBox { padding: 12px; border-radius: 12px; font-size: .85rem; }

/* Formulaires */
.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.form-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  background: var(--bg-2);
  box-shadow: inset 0 2px 0 rgba(0,0,0,.35), inset 0 0 0 2px var(--edge);
  outline: none;
  transition: box-shadow .15s ease;
}
.form-input::placeholder { color: #5f6b9a; }
.form-input:focus { box-shadow: inset 0 2px 0 rgba(0,0,0,.35), inset 0 0 0 2px var(--yellow); }

/* Mise */
.rs-bet-current { text-align: center; }
.rs-bet-big { font-family: var(--display); font-size: 2.8rem; line-height: 1.1; color: var(--yellow); text-shadow: 0 4px 0 var(--shadow-hard); }

/* Difficulté */
.difficulty-options-list { display: flex; flex-direction: column; gap: 10px; }
.difficulty-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 #10173a;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.difficulty-card:hover { transform: translateX(3px); }
.difficulty-card.active { box-shadow: inset 0 0 0 3px var(--yellow), 0 4px 0 var(--yellow-3); }
.diff-badge {
  flex: 0 0 128px;
  padding: 6px 8px 5px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 900;
  text-align: center;
  background: var(--bg-2);
}
.diff-badge.green { color: var(--green); }
.diff-badge.yellow { color: var(--yellow); }
.diff-badge.red { color: var(--red); }
.diff-badge.purple { color: var(--purple); }
.diff-info { text-align: left; }
.diff-title { font-weight: 900; color: #fff; font-size: .92rem; }
.diff-range { font-size: .76rem; color: var(--muted); }

/* Admin */
.rs-admin-lock { text-align: center; padding: 6px 0; }
.rs-lock-icon { font-size: 2.4rem; }
.rs-lock-title { font-family: var(--display); font-size: 1.2rem; color: #ffd0d5; }
.rs-admin-banner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .82rem; font-weight: 900; color: #ffd0d5;
  background: rgba(255, 90, 106, .14);
  box-shadow: inset 0 0 0 2px rgba(255, 90, 106, .4);
}
.rs-admin-form {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.2);
  box-shadow: inset 0 0 0 2px rgba(255, 90, 106, .22);
}

/* ---------- Toast ---------- */
.game-toast {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  z-index: 2000;
  max-width: min(92vw, 520px);
  padding: 12px 18px;
  border-radius: 16px;
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 2px var(--edge-2), 0 5px 0 var(--shadow-hard), 0 16px 30px rgba(0,0,0,.4);
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
  pointer-events: none;
}
.game-toast.active { opacity: 1; transform: translate(-50%, 0); }
.game-toast.cashout { background: var(--green-2); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 5px 0 var(--green-3), 0 16px 30px rgba(0,0,0,.4); }
.game-toast.error,
.game-toast.danger { background: var(--red-2); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 5px 0 var(--red-3), 0 16px 30px rgba(0,0,0,.4); }
.game-toast.warning { color: var(--yellow-ink); background: var(--yellow); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 5px 0 var(--yellow-3), 0 16px 30px rgba(0,0,0,.4); }

/* ---------- Responsive ---------- */
@media (max-width: 699px) {
  .road-hud-ladder { display: none; }   /* les plaques 3D affichent déjà les multiplicateurs */
}
@media (max-width: 420px) {
  .casino-stage-wrapper { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .road-hero-badge { width: 42px; height: 42px; border-radius: 13px; }
  .road-title-sub { font-size: .7rem; }
  .header-audio-btn { width: 40px; height: 40px; }
  .mult-long-text { display: none; }
  .mult-short-text { display: inline; }
  .header-metrics-row { grid-template-columns: 1.6fr 1fr .92fr; gap: 6px; }
  .metric-capsule { min-height: 50px; padding: 6px 7px; gap: 6px; }
  .capsule-value { font-size: .98rem; }
  .capsule-icon { width: 22px; height: 22px; border-radius: 7px; font-size: .7rem; }
  .capsule-icon.coin { font-size: .52rem; }
  .capsule-balance { padding-right: 34px; }
  .capsule-plus-btn { width: 24px; height: 24px; right: 6px; border-radius: 8px; font-size: 1rem; }
  .bottom-cockpit-bar { padding: 12px; gap: 12px; }
  .cockpit-tools-row { gap: 6px; }
  .bet-stepper-control { min-width: 118px; height: 48px; }
  .stepper-arrow { width: 32px; }
  .cockpit-actions-group { gap: 4px; }
  .action-btn-item { min-width: 40px; }
  .btn-round-purple { width: 40px; height: 38px; border-radius: 12px; }
  .btn-round-purple svg { width: 19px; height: 19px; }
  .action-label { font-size: .58rem; }
  .hop-lane-preview::before { content: ""; }
  .shop-packs-grid { gap: 6px; }
  .diff-badge { flex-basis: 112px; font-size: .66rem; }
}
@media (max-width: 360px) {
  .capsule-icon { display: none; }
}
@media (max-height: 700px) {
  .btn-cashout-3d, .btn-hop-forward, .btn-cashout-active-glow { min-height: 58px; }
  .cashout-text-title { font-size: 1.35rem; }
}

/* Desktop : en-tête et cockpit sur une ligne, plateau large */
@media (min-width: 900px) {
  .casino-stage-wrapper { max-width: 1120px; gap: 14px; padding: 18px 22px 22px; }
  .top-casino-header { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .road-header-title { gap: 14px; }
  .road-title-brand { font-size: 2.1rem; }
  .header-audio-btn { margin-left: 10px; }
  .header-metrics-row { flex: 0 1 600px; }
  .bottom-cockpit-bar {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(320px, 420px) minmax(200px, 1fr);
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
  }
  .cockpit-tools-row { display: contents; }
  .cockpit-main-action { grid-column: 2; grid-row: 1; }
  .bet-stepper-control { grid-column: 1; grid-row: 1; justify-self: start; width: 220px; max-width: none; }
  .cockpit-actions-group { grid-column: 3; grid-row: 1; justify-self: end; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-cashout-3d::after, .btn-cashout-active-glow { animation: none; }
  * { transition-duration: 0s !important; }
}

/* ---------- Skins du poulet ---------- */
.btn-round-purple.tone-purple { --t1: var(--purple-2); --t3: var(--purple-3); }
.skin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.skin-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 10px 12px; border: 0; border-radius: 18px; text-align: center; color: #fff;
  background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--edge), 0 5px 0 #10173a;
  transition: transform .12s ease, box-shadow .12s ease;
}
.skin-card:hover { transform: translateY(-2px); }
.skin-card:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--edge), 0 2px 0 #10173a; }
.skin-card.active { box-shadow: inset 0 0 0 3px var(--yellow), 0 5px 0 var(--yellow-3), 0 0 24px rgba(255, 201, 60, .2); }
.skin-thumb {
  width: 100%; aspect-ratio: 1; max-width: 150px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #a6dcf5, #6fb3e0 60%, #4a86c4);
}
.skin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.skin-name { margin-top: 6px; font-family: var(--display); font-size: 1.1rem; }
.skin-desc { font-size: .72rem; font-weight: 800; color: var(--muted); line-height: 1.3; min-height: 2.6em; }
.skin-state {
  margin-top: 6px; padding: 4px 12px 3px; border-radius: 10px; font-size: .74rem; font-weight: 900;
  background: var(--panel-3); color: #fff;
}
.skin-card.active .skin-state { background: var(--yellow); color: var(--yellow-ink); }

/* 5 boutons d'outils sur petit écran */
@media (max-width: 440px) {
  .cockpit-tools-row { gap: 6px; }
  .bet-stepper-control { flex: 1 1 auto; min-width: 0; max-width: 150px; height: 46px; padding: 3px; gap: 3px; }
  .stepper-arrow { width: 28px; font-size: 1.2rem; }
  .stepper-amount { font-size: .92rem; }
  .cockpit-actions-group { gap: 3px; flex: 0 0 auto; }
  .action-btn-item { min-width: 0; width: 42px; }
  .btn-round-purple { width: 38px; height: 36px; border-radius: 11px; }
  .btn-round-purple svg { width: 18px; height: 18px; }
  .action-label { font-size: .54rem; max-width: 46px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 360px) {
  .action-btn-item { width: 38px; }
  .btn-round-purple { width: 34px; height: 34px; }
}

/* ==========================================================
   ÉCONOMIE DU JEU : TABS PASSERELLE & RÉCOMPENSES STREAK
   ========================================================== */
.bridge-tabs {
  display: flex;
  background: var(--panel-2);
  border-radius: var(--r-sm);
  padding: 4px;
  gap: 6px;
  margin-bottom: 14px;
}
.bridge-tab {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.bridge-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.bridge-tab.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(75, 178, 255, 0.35);
}

.bridge-view { display: none; }
.bridge-view.active { display: block; }

/* Grille de cartes de recharge pour dépôt */
.deposit-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.deposit-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  transition: transform 0.12s ease;
}
.deposit-card-item:hover {
  transform: translateY(-1px);
  border-color: var(--edge-2);
}
.deposit-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.deposit-card-icon {
  font-size: 1.5rem;
}
.deposit-card-amount {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--yellow);
}
.deposit-card-sub {
  font-size: 0.75rem;
  color: var(--muted);
}
.btn-deposit-buy {
  padding: 7px 14px;
  background: var(--green);
  color: var(--green-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 3px 0 var(--green-3);
  transition: transform 0.1s ease;
}
.btn-deposit-buy:hover {
  transform: translateY(-1px);
}
.btn-deposit-buy:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--green-3);
}

/* Grille de Streak Quotidien */
.streak-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 10px 0;
}
.streak-day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: 10px;
  font-size: 0.72rem;
  transition: all 0.15s ease;
}
.streak-day-name {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 3px;
}
.streak-day-reward {
  font-family: var(--display);
  font-size: 0.82rem;
  color: #fff;
}
.streak-day-pill.completed {
  border-color: var(--green);
  background: rgba(52, 211, 122, 0.12);
  color: var(--green);
}
.streak-day-pill.completed .streak-day-reward {
  color: var(--green);
}
.streak-day-pill.active {
  border-color: var(--yellow);
  background: rgba(255, 201, 60, 0.18);
  box-shadow: 0 0 12px rgba(255, 201, 60, 0.3);
  transform: scale(1.04);
}
.streak-day-pill.active .streak-day-reward {
  color: var(--yellow);
  font-size: 0.92rem;
}
.streak-day-pill.day-7 {
  border-color: var(--purple-2);
}
.streak-day-pill.day-7.active {
  border-color: var(--purple);
  box-shadow: 0 0 14px rgba(167, 130, 255, 0.4);
}