:root{
	--main-h: 215;  /* bleu */
	--main-s: 80%;  /* saturation */
	--main-l: 28%;  /* luminosité */
	--logo: 130%;

	--bg-main: hsl(var(--main-h) var(--main-s) calc(var(--main-l) * 1.0));
	--bg-box:  hsl(var(--main-h) var(--main-s) calc(var(--main-l) * 0.8));
	--accent:  hsl(var(--main-h) calc(var(--main-s) * 0.7) calc(var(--main-l) * 1.6));
	--ink:#ffffff;
	--gold:linear-gradient(180deg, #ffd36a 0%, #f6b440 55%, #a76710 100%);
	--btn:#ffb449;
	--btn-ink:#0a341c;
	--z-dropdown:20;
	--z-sticky:30;
	--z-tooltip:40;
	--z-spinner:50;
	--z-modal:60;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}

body{
	font-family:'Rajdhani',sans-serif;
	color:var(--ink);
	background:var(--bg-main);
}

/* Headings */
.pot, .cta, .timer, .badge{font-family:'Orbitron',sans-serif}
.wrap{max-width:640px;margin:0 auto;padding: 1% 0;text-align:center}

/* HUD top row */
.hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:14px;
  margin:6px auto;
  max-width:92%;
color:var(--ink);opacity:.9;
}
.left,.center,.right{text-align:left}
.right{text-align:right}
.status{min-height:18px;margin:0;}
.status .dot{
  display:inline-block;width:12px;height:12px;border-radius:50%;
  background:#e74e4e;vertical-align:middle;margin-left:8px;
}

.hero{
  margin:5px auto;
  width:640px;max-width:92%;
  border-radius:24px;
  border:1px solid rgba(0,0,0,.2);
  padding:24px 16px 28px;
  background:var(--bg-box);
  box-shadow:0 8px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
}
.orb{border-radius:28px;padding:0 12px;box-shadow:none}

.logoWrap{
  margin:0 auto 6px;
  width:210px;height:210px;border-radius:9999px;
  background:radial-gradient(circle at 50% 40%,#ffd36a 0%,#f6b440 55%,#a76710 100%);
  box-shadow:0 0 0 6px rgba(0,0,0,.25) inset,0 18px 40px rgba(246,193,75,.35);
  position:relative;
}
.logoWrap img{
  position:absolute;left:50%;top:52%;
  transform:translate(-50%,-50%);
  width:var(--logo);height:auto;
}

/* Jackpot block */
.jackpot{margin-top:12px;line-height:1;}
.jackpot .title{
  font-size:26px;font-weight:700;letter-spacing:.14em;color:var(--ink)
}
.jackpot .amount{
  font-size:86px;
  font-weight:900;
  background:var(--gold);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

.jackpot .symbol{
  font-size:30px;font-weight:700;letter-spacing:.14em;
  background:var(--gold);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  text-transform: uppercase;
}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:5px;padding:7px 14px;
  font-size:18px;font-weight:700;color:var(--ink);opacity:.8;
  background:var(--bg-main);border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  box-shadow:0 2px 0 rgba(0,0,0,.25) inset;
  text-transform: uppercase;
}

#ticketsLeft{
	margin-top:5px;
	font-size:20px;
	color:var(--ink);
	opacity:.5;
}

/* CTA */
.cta{
  display:inline-block;margin:18px 0 18px;padding:18px 28px;
  border-radius:26px;background:var(--btn);color:var(--btn-ink);
  text-decoration:none;font-weight:900;letter-spacing:.04em;cursor:pointer;
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.05) inset;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cta:hover{transform:translateY(-2px);filter:saturate(1.05)}
.cta.small{padding:10px 18px;border-radius:14px;font-weight:800}
.cta[disabled]{opacity:.45;pointer-events:none}

/* Timer */
.timerTitle{margin:12px 0 6px;font-weight:800;letter-spacing:.08em;
	color:var(--ink);
	opacity:.5;}
.timer{
  font-size:54px;line-height:1.1;color:var(--ink);
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}

.disclaimer{
	margin:18px auto 8px auto;
	color:var(--ink);
	opacity:.95;
	text-shadow:none;
	max-width:92%;
	text-align:justify;
}

/* Spinner + modal */
.spinner{
	position:fixed;
	inset:0;background:rgba(0,0,0,.6);
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:var(--z-spinner)}
.hidden{display:none}
.loader{
  width:64px;
  height:64px;
  border-radius:50%;
  border:6px solid var(--ink);
  border-top-color:var(--btn);
  animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
#spinnerText{color:#e3ffee}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);}
.modal.hidden{display:none}
.modalBox{
  background:var(--bg-main);
  border:1px solid var(--bg-box);border-radius:16px;padding:22px;max-width:380px;text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04)
}
.meta{display:flex;gap:12px;justify-content:center;margin:12px 0 0;font-size:14px;}

/* Animations */
@keyframes potPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
#burnt{display:inline-block;will-change:transform;animation:potPulse 3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#burnt{animation:none}}

/* Responsive */
@media(max-width:720px){
  .jackpot .amount{font-size:60px}
  .timer{font-size:40px}
  .brand { display:none; }
  .logoWrap{width:160px;height:160px}
}