/* =========================================================
   LE REFUGE VIRTUEL — COIN FLIP MULTIJOUEUR
   ========================================================= */

#coinflip-shell{
  width:min(920px,94vw);
  margin:auto;
  color:#f7f2e8;
}

.coinflip-header70{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  margin-bottom:18px;
  border:1px solid rgba(230,202,133,.35);
  border-radius:22px;
  background:
    radial-gradient(circle at 90% 20%,rgba(230,202,133,.14),transparent 32%),
    linear-gradient(135deg,#0b1c2d,#142d40);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.coinflip-header70 h2{
  margin:4px 0 8px;
  font-size:clamp(1.7rem,4vw,2.5rem);
}

.coinflip-header70 p{
  margin:0;
  max-width:620px;
  color:#cbd5dc;
}

.coinflip-kicker70{
  font-size:.72rem;
  letter-spacing:.18em;
  color:#e6ca85;
  font-weight:800;
}

.coinflip-header-coin70{
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  flex:0 0 88px;
  border-radius:50%;
  font-size:48px;
  background:linear-gradient(145deg,#f7dfa0,#9e6f21);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.18),
    0 12px 30px rgba(0,0,0,.35);
}

/* ===== PIÈCE ===== */

.coinflip-arena70{
  position:relative;
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:18px 0;
  border-radius:24px;
  border:1px solid rgba(230,202,133,.22);
  background:
    radial-gradient(circle at center,rgba(230,202,133,.11),transparent 42%),
    linear-gradient(180deg,#10283a,#091725);
}

.coinflip-glow70{
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(230,202,133,.12);
  filter:blur(35px);
}

.coinflip-coin70{
  position:relative;
  z-index:2;
  width:138px;
  height:138px;
  margin:18px;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.75,.25,1);
}

.coinflip-face70{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  backface-visibility:hidden;
  border:7px solid #b98831;
  background:
    radial-gradient(circle at 35% 30%,#fff1b8,#d8a441 45%,#8c5d18 100%);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.2),
    inset 0 -12px 18px rgba(75,43,5,.22),
    0 18px 35px rgba(0,0,0,.38);
  color:#39250b;
}

.coinflip-face70 span{
  font-size:.72rem;
  letter-spacing:.16em;
  font-weight:900;
}

.coinflip-face70 strong{
  margin-top:5px;
  font-size:48px;
  line-height:1;
}

.coinflip-tails70{
  transform:rotateY(180deg);
}

.coinflip-coin70.show-tails{
  transform:rotateY(180deg);
}

.coinflip-coin70.is-flipping{
  animation:coinflip-spin70 1.8s cubic-bezier(.15,.7,.2,1) forwards;
}

@keyframes coinflip-spin70{
  0%{
    transform:translateY(0) rotateY(0) rotateX(0);
  }

  35%{
    transform:translateY(-75px) rotateY(720deg) rotateX(20deg);
  }

  70%{
    transform:translateY(-20px) rotateY(1440deg) rotateX(-12deg);
  }

  100%{
    transform:translateY(0) rotateY(2160deg) rotateX(0);
  }
}

.coinflip-result70{
  position:relative;
  z-index:2;
  margin:8px 0 0;
  font-size:1.05rem;
}

/* ===== CRÉATION ===== */

.coinflip-create70,
.coinflip-current70,
.coinflip-finished70,
.coinflip-lobby70{
  margin:18px 0;
  padding:22px;
  border-radius:20px;
  border:1px solid rgba(230,202,133,.2);
  background:rgba(12,31,47,.82);
}

.coinflip-create70 h3,
.coinflip-current70 h3,
.coinflip-finished70 h3,
.coinflip-lobby70 h3{
  margin-top:0;
}

.coinflip-create70 form{
  display:grid;
  gap:18px;
}

.coinflip-create70 input[type="number"]{
  width:100%;
  box-sizing:border-box;
}

.coinflip-choice70{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0;
  padding:0;
  border:0;
}

.coinflip-choice70 legend{
  grid-column:1/-1;
  margin-bottom:8px;
  font-weight:800;
}

.coinflip-choice70 label{
  cursor:pointer;
}

.coinflip-choice70 input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.coinflip-choice70 label span{
  display:flex;
  min-height:90px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:2px solid rgba(230,202,133,.18);
  border-radius:18px;
  background:#102638;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.coinflip-choice70 label span b{
  color:#e6ca85;
  font-size:1.05rem;
}

.coinflip-choice70 label span small{
  font-size:1.8rem;
  font-weight:900;
}

.coinflip-choice70 input:checked + span{
  border-color:#e6ca85;
  background:
    linear-gradient(145deg,rgba(230,202,133,.18),rgba(16,38,56,.95));
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.22);
}

/* ===== PARTIE EN ATTENTE / RÉSULTAT ===== */

.coinflip-current-grid70{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:16px 0;
}

.coinflip-current-grid70 p{
  margin:0;
  padding:14px;
  text-align:center;
  border-radius:15px;
  background:#0b1d2c;
  border:1px solid rgba(255,255,255,.07);
}

.coinflip-current-grid70 span{
  display:block;
  margin-bottom:5px;
  color:#9fb0bc;
  font-size:.78rem;
}

.coinflip-current-grid70 strong{
  color:#f0d58f;
}

.coinflip-code70{
  display:inline-block;
  padding:7px 11px;
  border-radius:9px;
  background:#091825;
  color:#b8c6cf;
  font-family:monospace;
}

.coinflip-finished70.win{
  border-color:rgba(114,211,166,.45);
}

.coinflip-finished70.lose{
  border-color:rgba(215,111,111,.38);
}

/* ===== LOBBY ===== */

.coinflip-lobby-title70{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:15px;
}

.coinflip-lobby-title70 h3,
.coinflip-lobby-title70 p{
  margin:0;
}

.coinflip-lobby-title70 p{
  margin-top:5px;
  color:#aab8c1;
}

.coinflip-games70{
  display:grid;
  gap:10px;
}

.coinflip-game70{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:#0b1d2c;
}

.coinflip-mini70{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(230,202,133,.12);
  font-size:28px;
}

.coinflip-game70 strong,
.coinflip-game70 span,
.coinflip-game70 small{
  display:block;
}

.coinflip-game70 strong{
  color:#f0d58f;
}

.coinflip-game70 span{
  margin-top:3px;
}

.coinflip-game70 small{
  margin-top:4px;
  color:#9cabb5;
}

.coinflip-empty70{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:100px;
  text-align:center;
  color:#9eacb6;
}

.coinflip-empty70 span{
  font-size:32px;
}

/* ===== ANIMATION DU RÉSULTAT ===== */

.coinflip-overlay70{
  position:absolute;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(3,10,17,.88);
  backdrop-filter:blur(8px);
}

.coinflip-overlay-card70{
  width:min(500px,90%);
  text-align:center;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(230,202,133,.4);
  background:#0c2030;
  box-shadow:0 25px 70px rgba(0,0,0,.5);
}

.coinflip-overlay-card70 .coinflip-arena70{
  margin-bottom:0;
}

/* ===== ERREURS ===== */

#coinflip-error{
  min-height:20px;
  color:#ffaaaa;
  font-weight:700;
}

/* ===== MOBILE ===== */

@media(max-width:650px){

  #coinflip-shell{
    width:100%;
  }

  .coinflip-header70{
    padding:18px;
  }

  .coinflip-header-coin70{
    width:64px;
    height:64px;
    flex-basis:64px;
    font-size:34px;
  }

  .coinflip-arena70{
    min-height:230px;
  }

  .coinflip-coin70{
    width:115px;
    height:115px;
  }

  .coinflip-face70 strong{
    font-size:40px;
  }

  .coinflip-current-grid70{
    grid-template-columns:1fr;
  }

  .coinflip-game70{
    grid-template-columns:auto 1fr;
  }

  .coinflip-game70 .button{
    grid-column:1/-1;
    width:100%;
  }

  .coinflip-lobby-title70{
    align-items:flex-start;
    flex-direction:column;
  }

  .coinflip-choice70{
    grid-template-columns:1fr 1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .coinflip-coin70{
    transition:none;
  }

  .coinflip-coin70.is-flipping{
    animation:none;
  }
}

/* ===== CORRECTION FENÊTRE COIN FLIP ===== */

#dialog:has(#coinflip-shell){
  width:min(760px,calc(100vw - 40px))!important;
  max-width:760px!important;
  max-height:calc(100vh - 40px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  box-sizing:border-box!important;
}

#dialog:has(#coinflip-shell) > *{
  max-width:100%!important;
  box-sizing:border-box!important;
}

#coinflip-shell{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}

#coinflip-shell *{
  box-sizing:border-box;
  min-width:0;
}

.coinflip-header70{
  width:100%;
  padding:20px;
  gap:16px;
}

.coinflip-header70 > div:first-child{
  flex:1 1 auto;
  min-width:0;
}

.coinflip-header70 h2{
  overflow-wrap:anywhere;
}

.coinflip-header70 p{
  max-width:100%;
  overflow-wrap:anywhere;
}

.coinflip-arena70{
  width:100%;
  min-height:220px;
  margin:14px 0;
}

.coinflip-create70,
.coinflip-current70,
.coinflip-finished70,
.coinflip-lobby70{
  width:100%;
  max-width:100%;
  margin:14px 0;
  padding:18px;
  overflow:hidden;
}

.coinflip-choice70{
  width:100%;
}

.coinflip-choice70 label,
.coinflip-choice70 label span{
  width:100%;
  min-width:0;
}

.coinflip-games70,
.coinflip-game70{
  width:100%;
  max-width:100%;
}

.coinflip-game70{
  overflow:hidden;
}

@media(max-width:650px){

  #dialog:has(#coinflip-shell){
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100vh - 16px)!important;
    margin:auto!important;
  }

  .coinflip-header70{
    padding:16px;
  }

  .coinflip-header70 h2{
    font-size:1.55rem;
  }

  .coinflip-header70 p{
    font-size:.9rem;
  }

  .coinflip-header-coin70{
    display:none;
  }

  .coinflip-create70,
  .coinflip-current70,
  .coinflip-finished70,
  .coinflip-lobby70{
    padding:15px;
  }

  .coinflip-choice70{
    gap:8px;
  }

  .coinflip-choice70 label span{
    min-height:75px;
  }
}