/* ============================================
   JETERA — Concours Page
   ============================================ */
/* Floating pseudos background */
.cx-floaters{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cx-float{
  position:absolute;
  font-family:var(--sans);font-size:.7rem;font-weight:500;
  color:rgba(160,120,90,.12);
  white-space:nowrap;
  animation:cxFloatUp linear forwards;
  will-change:transform;
}
.cx-float.twitch{color:rgba(145,70,255,.1)}

@keyframes cxFloatUp{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}
  5%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-110vh) translateX(var(--drift)) rotate(var(--rot));opacity:0}
}

.cx-main{padding-top:70px;position:relative;z-index:1}

/* Hero */
.cx-hero{padding:60px 0 40px;position:relative;overflow:hidden}
.cx-glow{position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(160,120,90,.1),transparent 70%);border-radius:50%;pointer-events:none;animation:glowPulse 6s ease-in-out infinite alternate}
.cx-hero h1{font-size:clamp(2rem,5vw,3.2rem);margin:10px 0 12px}
.cx-sub{font-size:.9rem;color:var(--muted);margin-bottom:36px}

/* Countdown */
.cx-countdown{display:flex;justify-content:center;gap:8px;align-items:center}
.cx-cd-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface);border:1px solid rgba(160,120,90,.12);border-radius:14px;padding:18px 24px;min-width:90px}
.cx-cd-item span{font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);color:var(--copper-light);line-height:1}
.cx-cd-item small{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.cx-cd-sep{font-family:var(--serif);font-size:2rem;color:var(--copper);opacity:.4;padding:0 4px}
@media(max-width:480px){.cx-cd-item{padding:14px 16px;min-width:70px}}

/* Registration */
.cx-register{padding:48px 0}
.cx-reg-box{max-width:500px;margin:0 auto;background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:40px 36px;text-align:center}
.cx-reg-box h2{font-size:1.6rem;margin-bottom:8px}
.cx-reg-sub{font-size:.85rem;color:var(--muted);margin-bottom:28px}

/* Twitch button */
.cx-twitch-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:#9146FF;color:white;font-weight:700;font-size:.88rem;border-radius:var(--r);border:none;cursor:pointer;transition:all .3s var(--ease)}
.cx-twitch-btn:hover{background:#7B2FFF;transform:translateY(-1px);box-shadow:0 8px 24px rgba(145,70,255,.25)}
.cx-twitch-btn svg{flex-shrink:0}

.cx-or{display:flex;align-items:center;gap:16px;margin:20px 0;color:var(--dim);font-size:.75rem}
.cx-or::before,.cx-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.04)}

.cx-manual{display:flex;gap:10px}
.cx-input{flex:1;padding:14px 18px;background:var(--bg);border:1px solid rgba(255,255,255,.06);border-radius:var(--r);color:var(--cream);font-size:.9rem;outline:none;transition:border-color .3s var(--ease)}
.cx-input:focus{border-color:var(--copper)}
.cx-input::placeholder{color:var(--dim)}

.cx-legal{font-size:.65rem;color:var(--dim);margin-top:18px;line-height:1.6}

/* Done state */
.cx-done{max-width:500px;margin:0 auto;text-align:center;padding:40px;animation:fadeUp .5s var(--ease) forwards}
.cx-done-check{width:70px;height:70px;margin:0 auto 20px;border-radius:50%;background:linear-gradient(135deg,var(--copper),var(--copper-light));display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--bg);animation:popIn .5s var(--ease)}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.cx-done h2{font-size:1.6rem;margin-bottom:8px}
.cx-done p{font-size:.9rem;color:var(--cream-soft)}

/* Live participants */
.cx-live{padding:40px 0 60px}
.cx-live-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cx-live-header h3{font-size:1.1rem}
.cx-live-header h3 span{color:var(--copper-light)}
.cx-live-dot{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted)}

.cx-participants{display:flex;flex-wrap:wrap;gap:8px;max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.cx-p{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--surface);border:1px solid rgba(255,255,255,.04);border-radius:var(--r-full);font-size:.78rem;color:var(--cream-soft);animation:fadeUp .4s var(--ease) forwards}
.cx-p-twitch{color:#9146FF;font-size:.65rem;font-weight:700}
.cx-p-new{border-color:rgba(160,120,90,.2);animation:pNew .6s var(--ease) forwards}
@keyframes pNew{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}

/* Draw / Slot machine */
.cx-draw{padding:60px 0;text-align:center}
.cx-draw h2{font-size:1.8rem;margin-bottom:32px}
.cx-slot{margin:0 auto 40px;max-width:400px}
.cx-slot-window{height:80px;overflow:hidden;border:2px solid var(--copper);border-radius:14px;background:var(--surface);position:relative}
.cx-slot-window::before,.cx-slot-window::after{content:'';position:absolute;left:0;right:0;height:20px;z-index:2;pointer-events:none}
.cx-slot-window::before{top:0;background:linear-gradient(to bottom,var(--surface),transparent)}
.cx-slot-window::after{bottom:0;background:linear-gradient(to top,var(--surface),transparent)}
.cx-slot-reel{transition:transform 0.1s linear}
.cx-slot-item{height:80px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.5rem;color:var(--cream)}

/* Winner */
.cx-winner{animation:fadeUp .8s var(--ease) forwards}
.cx-winner-crown{font-size:4rem;margin-bottom:16px;animation:crewFloat 2s ease-in-out infinite}
.cx-winner h2{font-size:1.4rem;color:var(--cream-soft);margin-bottom:12px}
.cx-winner-name{font-family:var(--serif);font-size:clamp(2rem,6vw,3.5rem);color:var(--copper-light);margin-bottom:16px;text-shadow:0 0 40px var(--copper-glow)}
.cx-winner p{font-size:.9rem;color:var(--cream-soft);max-width:400px;margin:0 auto}
@keyframes crewFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}