/* ============================================================
   Savonnable – Soft Flat Slot v1.0.6
   ============================================================ */

#ssw-overlay {
  position:fixed; inset:0; z-index:999999;
  background:rgba(30,20,50,0.45);
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:12px;
  animation:ssw-fade 0.3s ease both;
}
@keyframes ssw-fade{from{opacity:0}to{opacity:1}}

/* ── Modal ─────────────────────────────────────────────── */
#ssw-modal {
  width:min(860px,100%);
  max-height:calc(100vh - 24px);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-radius:28px;
  background:#fff;
  box-shadow:0 24px 64px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.05);
  animation:ssw-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  position:relative;
}
@keyframes ssw-pop{from{transform:scale(0.88) translateY(20px);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:640px){#ssw-modal{grid-template-columns:1fr;overflow-y:auto;}}

/* ── Close ──────────────────────────────────────────────── */
#ssw-close {
  position:absolute; top:16px; right:18px; z-index:20;
  background:rgba(0,0,0,0.06); border:none; border-radius:50%;
  width:30px; height:30px; cursor:pointer; font-size:15px; color:#666;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s, transform 0.2s;
}
#ssw-close:hover{background:rgba(0,0,0,0.12);transform:rotate(90deg);}

/* ══════════════════════════════════════════
   LEFT – MACHINE (soft background)
   ══════════════════════════════════════════ */
#ssw-machine-col {
  background: #f7f5f0;
  border-radius:28px 0 0 28px;
  padding:28px 22px 28px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
@media(max-width:640px){#ssw-machine-col{border-radius:28px 28px 0 0;}}

/* ── Brand tag ──────────────────────────────────────────── */
#ssw-brand {
  display:flex; align-items:center; justify-content:center;
  opacity:0.75;
  padding:2px 0;
}

/* ── Lights (soft dots) ─────────────────────────────────── */
.ssw-lightrow{display:flex;justify-content:center;gap:5px;width:100%;}
.ssw-light{
  width:8px;height:8px;border-radius:50%;
  background:#e0dbd4;
  transition:background 0.08s,box-shadow 0.08s;
}
.ssw-light.on{background:#f4a261;box-shadow:0 0 6px rgba(244,162,97,0.7);}
.ssw-light.on:nth-child(3n+1){background:#e76f51;box-shadow:0 0 6px rgba(231,111,81,0.6);}
.ssw-light.on:nth-child(3n+2){background:#f4a261;box-shadow:0 0 6px rgba(244,162,97,0.6);}
.ssw-light.on:nth-child(3n)  {background:#e9c46a;box-shadow:0 0 6px rgba(233,196,106,0.6);}

/* ── Reels frame ────────────────────────────────────────── */
#ssw-reels-frame {
  background:#fff;
  border-radius:20px;
  padding:12px;
  box-shadow:0 2px 16px rgba(0,0,0,0.07), 0 0 0 1.5px rgba(0,0,0,0.06);
  position:relative; width:100%; box-sizing:border-box;
}
#ssw-reels-inner{display:flex;gap:8px;justify-content:center;position:relative;}
.ssw-reel-slot{
  border-radius:14px; overflow:hidden;
  background:#faf9f6;
  box-shadow:0 1px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  flex:1;
}
.ssw-reel-canvas{display:block;width:100%;height:auto;}

/* Win line */
#ssw-winline {
  position:absolute; left:12px; right:12px; top:50%;
  transform:translateY(-50%);
  height:2px;
  background:linear-gradient(90deg,transparent,#e76f51 20%,#f4a261 50%,#e76f51 80%,transparent);
  border-radius:2px; pointer-events:none; z-index:5; opacity:0.5;
}
#ssw-winline.winning{
  opacity:1;
  animation:ssw-wl 0.35s infinite alternate;
}
@keyframes ssw-wl{
  from{box-shadow:none;}
  to{box-shadow:0 0 10px rgba(231,111,81,0.6),0 0 22px rgba(244,162,97,0.3);}
}
#ssw-reels-frame.winning{animation:ssw-ff 0.4s infinite alternate;}
@keyframes ssw-ff{
  from{box-shadow:0 2px 16px rgba(0,0,0,0.07),0 0 0 1.5px rgba(0,0,0,0.06);}
  to  {box-shadow:0 4px 24px rgba(231,111,81,0.25),0 0 0 2px #e76f51;}
}

/* ── Gain tag supprimé – affiché dans la colonne résultat ── */

/* ══════════════════════════════════════════
   RIGHT – CONTENT
   ══════════════════════════════════════════ */
#ssw-content-col{
  padding:52px 42px 44px;
  display:flex;flex-direction:column;justify-content:center;
  background:#fdfaf7;
  border-radius:0 28px 28px 0;
}
@media(max-width:640px){#ssw-content-col{padding:28px 24px 32px;border-radius:0 0 28px 28px;}}

#ssw-title{font-family:Georgia,serif;font-size:28px;font-weight:700;color:#2d2926;line-height:1.2;margin:0 0 10px;}
#ssw-subtitle{font-size:15px;color:#7a6a60;margin:0 0 26px;line-height:1.5;}
#ssw-form{display:flex;flex-direction:column;gap:10px;}

#ssw-email{
  width:100%;padding:14px 18px;
  border:1.5px solid #e8ddd5;border-radius:50px;
  font-size:14px;color:#2d2926;background:#fff;outline:none;
  transition:border-color 0.2s,box-shadow 0.2s;box-sizing:border-box;
}
#ssw-email:focus{border-color:#e76f51;box-shadow:0 0 0 3px rgba(231,111,81,0.12);}
#ssw-email::placeholder{color:#c5b8af;}

#ssw-spin-btn{
  width:100%;padding:15px;
  background:#e76f51;color:#fff;border:none;border-radius:50px;
  font-size:14px;font-weight:800;letter-spacing:1px;cursor:pointer;
  box-shadow:0 6px 20px rgba(231,111,81,0.35);
  transition:transform 0.15s,box-shadow 0.2s,background 0.2s;
  font-family:'Helvetica Neue',Arial,sans-serif;
}
#ssw-spin-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 28px rgba(231,111,81,0.45);background:#d4614a;}
#ssw-spin-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}
#ssw-gdpr{font-size:11px;color:#bdb0a8;text-align:center;line-height:1.5;}
#ssw-gdpr a{color:#bdb0a8;text-decoration:underline;}
#ssw-error{font-size:13px;color:#e76f51;display:none;text-align:center;}

#ssw-result{display:none;flex-direction:column;gap:14px;}
#ssw-result-title{font-family:Georgia,serif;font-size:28px;font-weight:700;color:#2d2926;line-height:1.2;margin:0;}
#ssw-result-msg  {font-size:15px;color:#7a6a60;line-height:1.6;margin:0;}
#ssw-result-hint {font-size:13px;color:#bdb0a8;}
#ssw-result-btn{
  display:block;width:100%;padding:15px;box-sizing:border-box;
  background:#e76f51;color:#fff;border:none;border-radius:50px;
  font-size:14px;font-weight:800;letter-spacing:1px;
  cursor:pointer;text-align:center;text-decoration:none;
  box-shadow:0 6px 20px rgba(231,111,81,0.35);
  transition:transform 0.15s;
}
#ssw-result-btn:hover{transform:translateY(-2px);color:#fff;text-decoration:none;}

.ssw-dots span{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#fff;margin:0 2px;
  animation:ssw-bounce 1s infinite ease-in-out both;
}
.ssw-dots span:nth-child(1){animation-delay:-.32s}
.ssw-dots span:nth-child(2){animation-delay:-.16s}
@keyframes ssw-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

/* Confetti */
.ssw-confetti{
  position:fixed;pointer-events:none;z-index:9999999;
  border-radius:2px;
  animation:ssw-conf 0.9s ease-out both;
}
@keyframes ssw-conf{
  from{opacity:1;transform:translate(0,0) rotate(0deg) scale(1);}
  to  {opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--tr)) scale(0.3);}
}