/* Casino Fiable — casinofiable-france.com */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #2d2640;
  background: #faf8f5;
}

img { max-width: 100%; height: auto; display: block; }

a { color: #1a1744; }
a:hover { color: #c9a227; }

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  line-height: 1.2;
  margin: 0 0 .75em;
}

/* --- Buttons --- */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.cf-btn:hover { transform: translateY(-1px); }
.cf-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.cf-btn--gold {
  background: linear-gradient(135deg, #d4a853, #c9a227);
  color: #1a1744;
  box-shadow: 0 4px 16px rgba(201, 162, 39, .35);
}
.cf-btn--gold:hover { box-shadow: 0 6px 20px rgba(201, 162, 39, .45); color: #1a1744; }
.cf-btn--ghost {
  background: transparent;
  border-color: #1a1744;
  color: #1a1744;
}
.cf-btn--sm { padding: .5rem 1rem; font-size: .85rem; }

/* --- Age gate --- */
.cf-agegate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(26, 23, 68, .92);
}
.cf-agegate[hidden] { display: none !important; }
.cf-agegate__panel {
  max-width: 28rem;
  padding: 2rem;
  background: #fff;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.cf-agegate__badge {
  display: inline-block;
  padding: .25rem .75rem;
  background: #1a1744;
  color: #d4a853;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 1rem;
}
.cf-agegate__ask { font-weight: 600; }
.cf-agegate__actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.25rem 0;
}
.cf-agegate__denied { color: #b91c1c; font-weight: 600; }
.cf-agegate__legal {
  font-size: .8rem;
  color: #666;
  margin: 0;
}

/* --- Cookie banner --- */
.cf-cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #1a1744;
  color: #f5f0e8;
  font-size: .9rem;
}
.cf-cookie[hidden] { display: none !important; }
.cf-cookie p { margin: 0; flex: 1; min-width: 14rem; }
.cf-cookie__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.cf-cookie a.cf-btn--ghost { color: #f5f0e8; border-color: #f5f0e8; }

/* --- App shell --- */
.cf-app { min-height: 100vh; display: flex; flex-direction: column; }

.cf-legalbar {
  background: #1a1744;
  color: #f5f0e8;
  font-size: .78rem;
  text-align: center;
  padding: .45rem 1rem;
}
.cf-legalbar p { margin: 0; }
.cf-legalbar a { color: #d4a853; }

/* --- Header --- */
.cf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: .75rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid #e8e4dc;
  position: sticky;
  top: 0;
  z-index: 100;
}
.cf-head__brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: #1a1744;
  font-weight: 700;
  font-size: 1.1rem;
}
.cf-head__mark {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1744, #2d2640);
  color: #d4a853;
  border-radius: .5rem;
  font-size: 1rem;
}
.cf-head__balance {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  background: #f5f0e8;
  border: 1px solid #e8dcc8;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  user-select: none;
}
.cf-head__balance:hover { background: #ebe4d4; }
.cf-head__balance-label { color: #666; font-weight: 500; font-size: .8rem; }

.cf-head__toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: .5rem;
  cursor: pointer;
  font: inherit;
}
.cf-head__toggle-icon {
  width: 1.25rem;
  height: 2px;
  background: #1a1744;
  position: relative;
}
.cf-head__toggle-icon::before,
.cf-head__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1a1744;
}
.cf-head__toggle-icon::before { top: -6px; }
.cf-head__toggle-icon::after { top: 6px; }

.cf-head__panel {
  width: 100%;
  order: 10;
}
.cf-head__panel[hidden] { display: none; }
.cf-head__nav,
.cf-head__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: .5rem 0;
}
.cf-head__nav a,
.cf-head__legal a {
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
}
.cf-head__legal { border-top: 1px solid #eee; padding-top: .75rem; }
.cf-head__legal a { color: #666; font-size: .85rem; }

@media (min-width: 56rem) {
  .cf-head__toggle { display: none; }
  .cf-head__panel {
    display: flex !important;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    order: 0;
    width: auto;
  }
  .cf-head__legal { border-top: none; padding-top: 0; }
}

/* --- Main --- */
.cf-main { flex: 1; }

/* --- Hero --- */
.cf-hero {
  display: grid;
  gap: 2rem;
  padding: 3rem 1.25rem;
  background: linear-gradient(160deg, #1a1744 0%, #2d2640 50%, #1a1744 100%);
  color: #f5f0e8;
  min-height: 22rem;
  align-items: center;
}
@media (min-width: 48rem) {
  .cf-hero {
    grid-template-columns: 1fr 1fr;
    padding: 4rem 2rem;
    max-width: 72rem;
    margin: 0 auto;
  }
}
.cf-hero__tag {
  display: inline-block;
  padding: .3rem .85rem;
  background: rgba(212, 168, 83, .2);
  border: 1px solid rgba(212, 168, 83, .4);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: #d4a853;
  margin: 0 0 1rem;
}
.cf-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: #fff;
}
.cf-hero__lede { opacity: .9; max-width: 32rem; margin-bottom: 1.5rem; }
.cf-hero a.cf-btn--gold { color: #1a1744; }

.cf-hero__visual {
  position: relative;
  height: 12rem;
  display: none;
}
@media (min-width: 48rem) { .cf-hero__visual { display: block; } }
.cf-hero__chip {
  position: absolute;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  font-size: 1.75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: cf-float 4s ease-in-out infinite;
}
.cf-hero__chip--1 { top: 10%; left: 20%; color: #1a1744; animation-delay: 0s; }
.cf-hero__chip--2 { top: 40%; right: 10%; color: #b91c1c; animation-delay: .5s; }
.cf-hero__chip--3 { bottom: 20%; left: 35%; color: #1a1744; animation-delay: 1s; }
.cf-hero__chip--4 { top: 25%; left: 55%; color: #b91c1c; animation-delay: 1.5s; }

@keyframes cf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* --- Sections common --- */
.cf-about,
.cf-games,
.cf-leader,
.cf-tokens,
.cf-rg {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}
.cf-about h2,
.cf-games h2,
.cf-leader h2,
.cf-tokens h2,
.cf-rg h2 {
  text-align: center;
  color: #1a1744;
}

/* --- About --- */
.cf-about__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 40rem) {
  .cf-about__grid { grid-template-columns: repeat(3, 1fr); }
}
.cf-about__grid article {
  padding: 1.25rem;
  background: #fff;
  border-radius: .75rem;
  border: 1px solid #e8e4dc;
}
.cf-about__grid h3 { font-size: 1.1rem; color: #1a1744; }

/* --- Games --- */
.cf-games { max-width: 52rem; }
.cf-games__intro { text-align: center; color: #555; margin-bottom: 2rem; }

.cf-game {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #e8e4dc;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(26, 23, 68, .06);
}
.cf-game__head h3 { color: #1a1744; margin-bottom: .35rem; }
.cf-game__head p { color: #666; font-size: .95rem; margin: 0 0 1rem; }
.cf-game__arena {
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .cf-game__arena { grid-template-columns: 1fr auto; align-items: center; }
}
.cf-game__controls { text-align: center; min-width: 10rem; }
.cf-game__cost { margin: 0 0 .5rem; font-size: .9rem; }
.cf-game__status {
  margin: 0 0 .75rem;
  font-size: .85rem;
  color: #666;
  min-height: 2.5em;
}

/* Plinko */
.cf-plinko {
  position: relative;
  height: 10rem;
  background: linear-gradient(180deg, #f5f0e8, #ebe4d4);
  border-radius: .75rem;
  overflow: hidden;
}
.cf-plinko__slots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: .5rem;
  background: #1a1744;
  color: #d4a853;
  font-weight: 700;
  font-size: .85rem;
}
.cf-plinko__ball {
  position: absolute;
  top: 10%;
  width: 1.25rem;
  height: 1.25rem;
  background: radial-gradient(circle at 30% 30%, #ffd700, #c9a227);
  border-radius: 50%;
  transition: top 1s ease-in, left .8s ease-out;
  z-index: 2;
}
.cf-plinko__ball.is-dropping { top: 75%; }

/* Slots */
.cf-slots {
  display: flex;
  justify-content: center;
  gap: .75rem;
  padding: 1.5rem;
  background: #1a1744;
  border-radius: .75rem;
}
.cf-slots__reel {
  width: 4rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: .5rem;
  font-size: 2rem;
  font-weight: 700;
}
.cf-slots__reel.is-spinning {
  animation: cf-spin .3s linear infinite;
}
@keyframes cf-spin {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* Crash */
.cf-crash {
  position: relative;
  height: 10rem;
  background: linear-gradient(180deg, #0f0e24, #1a1744);
  border-radius: .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #d4a853;
}
.cf-crash__mult {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: "Playfair Display", serif;
  margin: 0;
}
.cf-crash__rocket {
  font-size: 2rem;
  transition: transform .1s;
}
.cf-crash__rocket.is-flying {
  animation: cf-rocket 1s ease-in-out infinite alternate;
}
.cf-crash__rocket.is-crashed {
  animation: none;
  transform: scale(1.5);
  filter: grayscale(1);
}
@keyframes cf-rocket {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}
.cf-crash__wager { font-size: .9rem; }
.cf-crash__input {
  width: 5rem;
  padding: .35rem .5rem;
  border: 1px solid #ccc;
  border-radius: .35rem;
  text-align: center;
  margin-bottom: .5rem;
}
.cf-crash__btns { display: flex; flex-direction: column; gap: .5rem; }

/* --- Leaderboard --- */
.cf-leader { background: #f5f0e8; max-width: none; }
.cf-leader__note { text-align: center; color: #666; font-size: .9rem; }
.cf-leader__list {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 0;
  max-width: 28rem;
}
.cf-leader__list li {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .75rem 1rem;
  background: #fff;
  border-radius: .5rem;
  margin-bottom: .5rem;
  border: 1px solid #e8e4dc;
}
.cf-leader__rank {
  font-weight: 700;
  color: #c9a227;
}

/* --- Tokens --- */
.cf-tokens__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (min-width: 40rem) {
  .cf-tokens__grid { grid-template-columns: repeat(3, 1fr); }
}
.cf-tokens__grid article {
  padding: 1.25rem;
  background: #fff;
  border-radius: .75rem;
  border-left: 4px solid #c9a227;
}

/* --- RG --- */
.cf-rg {
  background: linear-gradient(180deg, #faf8f5, #f5f0e8);
  text-align: center;
  border-top: 1px solid #e8e4dc;
}

/* --- Legal pages --- */
.cf-legal {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
.cf-legal__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e8e4dc;
}
.cf-legal__nav a {
  padding: .4rem .85rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  background: #f5f0e8;
  color: #1a1744;
}
.cf-legal__nav a.is-active,
.cf-legal__nav a:hover {
  background: #1a1744;
  color: #d4a853;
}
.cf-legal__body h1 { color: #1a1744; }
.cf-legal__updated { color: #888; font-size: .9rem; }
.cf-legal__body h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
  color: #1a1744;
}
.cf-legal__notice {
  margin-top: 2rem;
  padding: 1rem;
  background: #fef3c7;
  border-radius: .5rem;
  font-size: .9rem;
}

/* --- Footer --- */
.cf-foot {
  background: #1a1744;
  color: #c8c0d8;
  padding: 2.5rem 1.25rem 1.5rem;
  font-size: .9rem;
}
.cf-foot__care {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.cf-foot__care img { opacity: .9; }
.cf-foot__grid {
  display: grid;
  gap: 2rem;
  max-width: 52rem;
  margin: 0 auto 2rem;
}
@media (min-width: 40rem) {
  .cf-foot__grid { grid-template-columns: repeat(3, 1fr); }
}
.cf-foot__col h3 {
  color: #d4a853;
  font-size: 1rem;
  margin-bottom: .75rem;
}
.cf-foot__col nav {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.cf-foot__col a { color: #e8e4dc; text-decoration: none; }
.cf-foot__col a:hover { color: #d4a853; }
.cf-foot__note { font-size: .8rem; opacity: .8; margin-top: .75rem; }
.cf-foot__copy,
.cf-foot__disclaimer {
  text-align: center;
  font-size: .8rem;
  max-width: 40rem;
  margin: 0 auto .5rem;
  opacity: .85;
}
.cf-foot__disclaimer { font-size: .75rem; }