/* e-million.fr — nuit étoilée / or */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --night-900:#06102e; --night-800:#0a1a45; --night-700:#102459; --night-600:#1a3576;
  --blue-glow:#2b6de0; --blue-soft:#4a8dff;
  --gold-400:#ffd24d; --gold-500:#f5b81f; --gold-600:#d99400;
  --star-100:#f5f9ff; --star-300:#b9c9ef; --star-500:#7286b8;
  --line:rgba(255,255,255,0.10); --line-strong:rgba(255,255,255,0.20);
  --hot:#ff6b57; --cold:#4a8dff;
  --radius:14px; --font-display:'Sora',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font-body); color:var(--star-100);
  background:radial-gradient(ellipse at 50% -10%, var(--night-700) 0%, var(--night-900) 55%, #030a1f 100%);
  min-height:100vh; overflow-x:hidden; position:relative; line-height:1.6; }
.starfield { position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 60% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 80% 20%,var(--gold-400),transparent),radial-gradient(1px 1px at 35% 80%,#fff,transparent),radial-gradient(1px 1px at 90% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 50%,var(--blue-soft),transparent),radial-gradient(1px 1px at 50% 15%,#fff,transparent),radial-gradient(1px 1px at 75% 90%,#fff,transparent);
  opacity:0.7; animation:twinkle 8s ease-in-out infinite alternate; }
@keyframes twinkle { from{opacity:.45} to{opacity:.85} }
.wrap { position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 20px; }

header { text-align:center; padding:48px 0 24px; }
.logo { width:100%; max-width:300px; height:auto; margin-bottom:14px; filter:drop-shadow(0 4px 20px rgba(245,184,31,0.15));
  animation:logo-in .9s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes logo-in { from{opacity:0; transform:translateY(-12px) scale(.96)} to{opacity:1; transform:none} }
.subtitle { color:var(--star-300); font-size:1.02rem; max-width:520px; margin:0 auto 16px; }
.header-row { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.history-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-size:12px;
  background:rgba(43,109,224,0.15); border:1px solid var(--line-strong); color:var(--star-300); }
.history-badge b { color:var(--gold-400); font-weight:600; }
.account-badge { font-size:12px; color:var(--star-300); }
.account-badge .chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line-strong); cursor:pointer; }
.account-badge .chip:hover { border-color:var(--blue-soft); color:#fff; }

.status-banner { margin-bottom:18px; padding:12px 16px; border-radius:12px; font-size:14px; text-align:center; display:none; }
.status-banner.show { display:block; }
.status-banner.free { background:rgba(74,141,255,0.12); border:1px solid rgba(74,141,255,0.3); color:#9cc3ff; }
.status-banner.active { background:rgba(93,202,165,0.14); border:1px solid rgba(93,202,165,0.3); color:#7fe3c0; }
.status-banner.warn { background:rgba(245,184,31,0.14); border:1px solid rgba(245,184,31,0.35); color:var(--gold-400); }
.status-banner b { font-weight:600; }

.card { background:linear-gradient(180deg,rgba(16,36,89,0.55),rgba(10,26,69,0.35));
  border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:20px; backdrop-filter:blur(6px); }
.card-title { font-family:var(--font-display); font-weight:600; font-size:1.12rem; margin-bottom:5px; display:flex; align-items:center; gap:9px; }
.card-title i { color:var(--gold-400); }
.card-sub { color:var(--star-500); font-size:.9rem; margin-bottom:18px; }

.modes { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:9px; margin-bottom:18px; }
.mode-btn { padding:11px 10px; border:1px solid var(--line-strong); border-radius:12px; background:rgba(6,16,46,0.4); color:var(--star-100); cursor:pointer; text-align:left; transition:all .18s; font-family:var(--font-body); }
.mode-btn:hover { border-color:var(--blue-soft); background:rgba(43,109,224,0.15); }
.mode-btn.active { border-color:var(--gold-500); background:rgba(245,184,31,0.12); box-shadow:0 0 0 1px var(--gold-500); }
.mode-btn .m-name { font-family:var(--font-display); font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px; }
.mode-btn .m-name i { color:var(--gold-400); font-size:15px; }
.mode-btn .m-desc { font-size:11px; color:var(--star-500); margin-top:3px; line-height:1.35; }

.cage-card canvas { width:100%; display:block; border-radius:12px; margin-bottom:14px; background:rgba(6,16,46,0.25); }
.result-slots { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:9px; min-height:52px; margin-bottom:16px; }

.btn-gold { width:100%; padding:15px; border:none; border-radius:12px; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--night-900);
  background:linear-gradient(180deg,var(--gold-400),var(--gold-600)); box-shadow:0 6px 20px rgba(245,184,31,0.35); transition:transform .12s, box-shadow .2s; letter-spacing:.02em; }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(245,184,31,0.5); }
.btn-gold:active { transform:translateY(0); }
.btn-gold:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-ghost { padding:10px 18px; border:1px solid var(--line-strong); border-radius:10px; cursor:pointer; background:transparent; color:var(--star-300); font-family:var(--font-body); font-size:13px; transition:all .18s; }
.btn-ghost:hover { color:#fff; border-color:var(--blue-soft); }

.ticket-meta { display:flex; justify-content:center; gap:18px; margin-top:14px; font-size:13px; color:var(--star-500); flex-wrap:wrap; }
.ticket-meta b { color:var(--star-100); font-weight:600; }
.score-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-weight:600; }
.score-hi { background:rgba(93,202,165,0.2); color:#7fe3c0; }
.score-mid { background:rgba(245,184,31,0.18); color:var(--gold-400); }
.score-lo { background:rgba(255,107,87,0.18); color:#ff9784; }
.ticket-actions { display:flex; gap:10px; justify-content:center; margin-top:14px; }

.auth-tabs { display:flex; gap:6px; margin-bottom:18px; background:rgba(6,16,46,0.5); padding:5px; border-radius:10px; }
.auth-tab { flex:1; padding:10px; border:none; background:transparent; color:var(--star-300); font-family:var(--font-display); font-weight:500; font-size:14px; cursor:pointer; border-radius:7px; transition:all .2s; }
.auth-tab.active { background:linear-gradient(180deg,var(--blue-glow),var(--night-600)); color:#fff; }
#auth-card input, .don-row input { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line-strong); background:rgba(6,16,46,0.5); color:#fff; font-size:15px; margin-bottom:12px; font-family:var(--font-body); }
#auth-card input:focus, .don-row input:focus { outline:none; border-color:var(--blue-soft); }
.don-row { display:flex; gap:10px; align-items:center; margin-bottom:14px; }
.don-row input { margin-bottom:0; max-width:120px; }
.don-row span { color:var(--star-300); font-size:14px; }

.msg { padding:11px 14px; border-radius:10px; font-size:14px; margin-bottom:14px; }
.msg.err { background:rgba(255,107,87,0.15); color:#ff9784; }
.msg.ok { background:rgba(93,202,165,0.15); color:#7fe3c0; }
.msg.info { background:rgba(74,141,255,0.15); color:#9cc3ff; }

.saved-list { display:flex; flex-direction:column; gap:10px; }
.saved-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-radius:12px; background:rgba(6,16,46,0.4); border:1px solid var(--line); flex-wrap:wrap; }
.saved-nums { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.mini-ball { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:12px; color:var(--night-900); background:radial-gradient(circle at 35% 30%,#fff,#cdd9f5); }
.mini-star { width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:11px; color:var(--night-900); background:radial-gradient(circle at 35% 30%,var(--gold-400),var(--gold-500)); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.result-slots .mini-ball.result-ball { width:46px; height:46px; font-size:17px; }
.result-slots .mini-star.result-ball { width:46px; height:46px; font-size:16px; }
.saved-meta { font-size:12px; color:var(--star-500); }
.del-btn { background:none; border:none; color:var(--star-500); cursor:pointer; font-size:16px; padding:4px; transition:color .15s; }
.del-btn:hover { color:var(--hot); }
.empty-state { text-align:center; color:var(--star-500); padding:24px 0; font-size:14px; }
.plus-sep { color:var(--gold-500); font-size:20px; margin:0 3px; }

.stat-toggle { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.stat-toggle button { padding:8px 15px; border-radius:9px; border:1px solid var(--line-strong); background:transparent; color:var(--star-300); cursor:pointer; font-size:13px; font-family:var(--font-body); transition:all .15s; }
.stat-toggle button.active { background:var(--blue-glow); color:#fff; border-color:var(--blue-glow); }
.bar-chart { display:flex; flex-direction:column; gap:5px; }
.bar-row { display:flex; align-items:center; gap:10px; }
.bar-num { width:28px; text-align:right; font-family:var(--font-display); font-weight:600; font-size:12px; color:var(--star-300); flex-shrink:0; }
.bar-track { flex:1; height:18px; background:rgba(6,16,46,0.6); border-radius:5px; overflow:hidden; }
.bar-fill { height:100%; border-radius:5px; transition:width .6s cubic-bezier(.2,.8,.3,1); }
.bar-val { width:34px; font-size:11px; color:var(--star-500); flex-shrink:0; }
.legend { display:flex; gap:18px; margin-bottom:14px; font-size:12px; color:var(--star-500); flex-wrap:wrap; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.dot { width:10px; height:10px; border-radius:50%; }

.disclaimer { text-align:center; color:var(--star-500); font-size:12.5px; padding:20px; max-width:640px; margin:0 auto 30px; line-height:1.6; }
.disclaimer i { color:var(--gold-500); }
footer { text-align:center; padding:20px 0 50px; color:var(--star-500); font-size:12px; }
.hidden { display:none !important; }

@media (max-width:600px) {
  .wrap { padding:0 14px; }
  header { padding:32px 0 18px; }
  .card { padding:18px 16px; }
  .modes { grid-template-columns:repeat(2,1fr); }
  .result-slots .mini-ball, .result-slots .mini-star { width:38px !important; height:38px !important; font-size:14px !important; }
  .ticket-meta { gap:12px; font-size:12px; }
  .header-row { flex-direction:column; gap:8px; }
  .btn-gold { font-size:14px; padding:14px; }
  .stat-toggle button { flex:1; text-align:center; }
}
@media (max-width:380px) {
  .modes { grid-template-columns:1fr 1fr; }
  .result-slots { gap:6px; }
}
@media (prefers-reduced-motion:reduce) {
  .starfield, .logo { animation:none; }
  .bar-fill { transition:none; }
}