/* Bingo Popup - v1.2.5 */
:root{
  --bingo-overlay: rgba(15,23,42,.55);
  --bingo-card-bg: #ffffff;
  --bingo-text: #0f172a;
  --bingo-muted: #475569;
  --bingo-btn-bg: #C58782; /* par défaut demandé */
  --bingo-btn-bg-hover: #a9706b;
  --bingo-radius: 18px;
  --bingo-shadow: 0 18px 48px rgba(2,6,23,.22), 0 6px 16px rgba(2,6,23,.10);
}
[hidden]{ display:none !important; }

.bingo-popup-trigger,
.bingo-action{
  appearance:none;border:0;border-radius:999px;padding:.8rem 1.15rem;
  background: var(--bingo-btn-bg);color:#fff;font-weight:700;letter-spacing:.02em;
  font-size:clamp(14px,.95rem,18px);cursor:pointer;
  box-shadow:0 10px 22px rgba(2,6,23,.18);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, opacity .2s ease, background .2s ease;
  line-height:1;display:inline-flex;align-items:center;gap:.5rem;
}
.bingo-popup-trigger:hover,
.bingo-action:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px rgba(2,6,23,.22); background: var(--bingo-btn-bg-hover); }
.bingo-popup-trigger:active,
.bingo-action:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(2,6,23,.14); }
.bingo-popup-trigger:focus,
.bingo-action:focus{ outline:2px solid rgba(197,135,130,.35); outline-offset:3px; }

/* Popup skeleton */
.bingo-modal{ position:fixed; inset:0; display:none; z-index:999999; }
.bingo-modal[aria-hidden="false"]{ display:block; }
.bingo-backdrop{ position:absolute; inset:0; background:var(--bingo-overlay); opacity:0; animation:bingoFadeIn .25s ease forwards; backdrop-filter: blur(2px); }

/* Card shared by popup & inline */
.bingo-modal-card{
  position:relative; margin:auto; background:var(--bingo-card-bg); color:var(--bingo-text);
  border-radius:var(--bingo-radius); box-shadow:var(--bingo-shadow);
  transform: translateY(14px) scale(.985); opacity:0; animation:bingoElevate .26s cubic-bezier(.2,.8,.2,1) forwards;
  display:flex; flex-direction:column; padding:.8rem .9rem .9rem .9rem;
  width:min(92vw, 560px);
  max-height:66vh; overflow:hidden;
}
/* Inline tweaks */
.bingo-inline-card{ transform:none; opacity:1; box-shadow:none; max-height:none; width:min(100%, 760px); }
.bingo-inline{ display:flex; justify-content:center; }

.bingo-logo{ display:block; width: 360px; max-width: 90%; margin: 30px auto 20px auto; height:auto; }

.bingo-close{
  position:absolute; top:.5rem; right:.5rem;
  width:38px; height:38px; border-radius:999px;
  border:none; background: var(--bingo-btn-bg); color:#fff;
  font-size:20px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: transform .15s ease, box-shadow .25s ease;
  box-shadow: 0 6px 16px rgba(2,6,23,.18);
}
.bingo-close:hover{ transform: scale(1.05); }

.bingo-title{ margin: 0 .5rem 20px .5rem; text-align:center; font-size: clamp(24px, 2.4vw, 30px); line-height:1.2; }
.bingo-content{ padding:.2rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.bingo-tertiary{ appearance:none;border:0;cursor:pointer;border-radius:14px;padding:.85rem 1.05rem;font-weight:700; background:#e2e8f0; color:#0f172a; }
.bingo-tertiary:hover{ transform: translateY(-2px); }
.bingo-loading{ display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--bingo-muted); }
.bingo-spinner{ width:42px; height:42px; border-radius:50%; border:4px solid #e2e8f0; border-top-color: var(--bingo-btn-bg); animation: bingoSpin 1s linear infinite; }
.bingo-result{ text-align:center; width:100%; }
.bingo-number{ font-size: clamp(56px, 9vw, 112px); font-weight:900; line-height:1; letter-spacing:-.02em; animation:bingoPop .5s cubic-bezier(.2,.8,.2,1); text-shadow:0 10px 24px rgba(2,6,23,.12); }

@keyframes bingoFadeIn{ to{ opacity:1; } }
@keyframes bingoElevate{ to{ opacity:1; transform: translateY(0) scale(1); } }
@keyframes bingoSpin{ to{ transform: rotate(360deg); } }
@keyframes bingoPop{ 0%{ transform: scale(.8); opacity:.5; filter: blur(2px); } 60%{ transform: scale(1.05); opacity:1; filter: blur(0); } 100%{ transform: scale(1); } }

@media (max-width:480px){
  .bingo-modal-card{ width:94vw; }
  .bingo-title{ font-size:20px; }
}
