/* ===================================================
   AFRILAB TOMBOLA — Design System v4 (Surprise Finale)
   =================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold: #F5C518;
  --gold-light: #FFE566;
  --gold-dark: #C9960C;
  --green-finale: #2ecc71;
  --green-dark: #1a7d43;
  --blue-deep: #050d1a;
  --accent: #1E6BFF;
  --accent2: #00C9FF;
  --afrilab-blue: #1A4FA0;
  --glass-bg: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.13);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.68);
  --text-muted: rgba(255,255,255,0.35);
  --radius-xl: 32px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --c-tech: #1E6BFF;
  --c-agent: #F5C518;
}

html, body {
  width: 100%; min-height: 100vh; overflow: hidden;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
  background:
    radial-gradient(ellipse at 15% 10%, rgba(26,79,160,0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(0,201,255,0.15) 0%, transparent 50%),
    linear-gradient(160deg, #030912 0%, #07111f 50%, #0c1c38 100%);
}

/* ── Stars ── */
.stars-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: starTwinkle var(--dur) ease-in-out infinite var(--delay);
}
@keyframes starTwinkle { 0%,100% { opacity: var(--op); } 50% { opacity: calc(var(--op)*0.15); } }

/* ── Particles ── */
.bg-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.particle { position: absolute; border-radius: 50%; opacity: 0; animation: floatUp var(--dur) ease-in-out infinite var(--delay); }
@keyframes floatUp { 0% { opacity:0; transform:translateY(0) scale(0.4); } 15% { opacity:0.9; } 85% { opacity:0.35; } 100% { opacity:0; transform:translateY(-110vh) scale(1.3); } }

/* ── Orbs ── */
.orb { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; animation: orbDrift 20s ease-in-out infinite alternate; }
.orb-1 { width:700px;height:700px; background:radial-gradient(circle,rgba(26,79,160,.2),transparent 70%); top:-200px;left:-150px; }
.orb-2 { width:600px;height:600px; background:radial-gradient(circle,rgba(245,197,24,.12),transparent 70%); bottom:-150px;right:-100px; animation-duration:28s; animation-direction:alternate-reverse; }
.orb-3 { width:400px;height:400px; background:radial-gradient(circle,rgba(0,201,255,.10),transparent 70%); top:40%;left:40%; animation-duration:17s; }
@keyframes orbDrift { from{transform:translateX(0) scale(1);} to{transform:translateX(80px) translateY(50px) scale(1.2);} }

/* ── Grid ── */
.grid-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(30,107,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(30,107,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* ── Screens ── */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
  transform: scale(.94) translateY(40px);
}
.screen.active  { opacity:1; pointer-events:all; transform:scale(1) translateY(0); }
.screen.exit    { opacity:0; transform:scale(1.04) translateY(-40px); }

/* ── Glass Card ── */
.glass-container {
  position: relative; z-index: 2; width: 100%; max-width: 740px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  backdrop-filter: blur(32px) saturate(150%); -webkit-backdrop-filter: blur(32px) saturate(150%);
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl);
  padding: 44px 48px 40px;
  box-shadow: 0 0 100px rgba(30,107,255,.28), 0 40px 100px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  overflow: hidden;
}
.glass-container::before {
  content: ''; position: absolute; top:0;left:0;right:0;height:2px;
  background: linear-gradient(90deg,transparent,rgba(30,107,255,.7),var(--gold),rgba(30,107,255,.7),transparent);
  animation: borderFlow 5s linear infinite; background-size:200% 100%;
}
@keyframes borderFlow { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }

/* ── Logo ── */
.logo-wrap { display:flex; justify-content:center; margin-bottom:24px; }
.logo { height:80px; width:auto; filter:drop-shadow(0 4px 20px rgba(245,197,24,.45)); animation:logoPulse 4s ease-in-out infinite; }
.logo-small { margin-bottom:16px; }
.logo-sm { height:54px; }
@keyframes logoPulse { 0%,100%{filter:drop-shadow(0 4px 20px rgba(245,197,24,.3));} 50%{filter:drop-shadow(0 6px 40px rgba(245,197,24,.7));} }

/* ── Titles ── */
.title-main { display:flex;align-items:baseline;gap:12px;justify-content:center;margin-bottom:8px; font-family:'Montserrat',sans-serif;font-weight:900;font-size:3.2rem;letter-spacing:-1.5px; }
.gradient-text {
  background: linear-gradient(135deg,#fff8c5,var(--gold),#e89b00,var(--gold));
  background-size:200% 200%; -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:textShimmer 5s ease-in-out infinite;
}
@keyframes textShimmer { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.title-sub { font-size:1.3rem;font-weight:600;color:var(--text-secondary);letter-spacing:3px; font-family:'Montserrat',sans-serif; }
.subtitle { text-align:center;color:var(--text-secondary);font-size:.95rem;line-height:1.65;margin-bottom:24px; }

/* ══ HOME SCREEN ══ */
.home-container { max-width: 700px; text-align:center; }

/* Kaaba mini preview */
.kaaba-mini-wrap {
  position:relative; display:inline-block; margin:0 auto 20px;
}
.kaaba-mini {
  height:100px;width:auto;border-radius:12px;
  filter:drop-shadow(0 0 24px rgba(245,197,24,.5));
  animation:kaabaFloat 5s ease-in-out infinite;
}
@keyframes kaabaFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.kaaba-mini-glow {
  position:absolute;inset:-20px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,197,24,.25),transparent 70%);
  pointer-events:none;animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:.7;transform:scale(1);} 50%{opacity:1;transform:scale(1.08);} }

/* omra-badge removed — no Omra mention until finale */

.choose-label {
  font-size:.88rem;font-weight:600;color:var(--text-muted);
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;
}

/* ── Category Cards ── */
.category-cards { display:flex;gap:20px;margin-bottom:24px; }
/* Each col wraps one card + optional redo button below */
.card-col { flex:1;display:flex;flex-direction:column;align-items:stretch;gap:10px; }
.category-card {
  flex:1; flex-grow:1; background:rgba(255,255,255,.05); border-radius:22px;
  padding:28px 20px;cursor:pointer;text-align:center;position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.34,1.3,.64,1), box-shadow .2s;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  border:none;
}
.category-card::before {
  content:'';position:absolute;inset:0;border-radius:22px;
  border:1.5px solid transparent;transition:border-color .2s;
}
.card-tech::before { border-color:rgba(30,107,255,.35); background:linear-gradient(145deg,rgba(30,107,255,.1),rgba(30,107,255,.04)); }
.card-agents::before { border-color:rgba(245,197,24,.35); background:linear-gradient(145deg,rgba(245,197,24,.1),rgba(245,197,24,.04)); }
.category-card:hover { transform:translateY(-6px) scale(1.02); }
.card-tech:hover { box-shadow:0 16px 50px rgba(30,107,255,.4); }
.card-agents:hover { box-shadow:0 16px 50px rgba(245,197,24,.3); }
.card-icon { font-size:2.8rem;line-height:1;margin-bottom:4px; }
.card-title { font-family:'Montserrat',sans-serif;font-weight:800;font-size:1rem;line-height:1.3;color:var(--text-primary); }
.card-sub { font-size:.78rem;font-weight:600;letter-spacing:1px;text-transform:uppercase; }
.card-tech .card-sub { color:rgba(30,107,255,.8); }
.card-agents .card-sub { color:rgba(245,197,24,.8); }
.card-arrow { font-size:1.2rem;margin-top:4px;transition:transform .2s; }
.category-card:hover .card-arrow { transform:translateX(4px); }
.card-winner-badge {
  background:rgba(46,204,113,.15);border:1px solid rgba(46,204,113,.4);
  border-radius:20px;padding:4px 12px;font-size:.75rem;font-weight:700;color:#6effa3;
}
.btn-redo {
  width:100%;background:rgba(255,140,0,.12);border:1px solid rgba(255,140,0,.35);
  border-radius:12px;padding:10px 14px;font-size:.82rem;font-weight:700;color:#ffa94d;
  cursor:pointer;font-family:'Outfit',sans-serif;text-align:center;
  transition:background .2s,transform .15s;
}
.btn-redo:hover { background:rgba(255,140,0,.28);transform:translateY(-2px); }

/* ── Results Summary ── */
.results-summary {
  background:linear-gradient(135deg,rgba(245,197,24,.08),rgba(46,204,113,.06));
  border:1px solid rgba(245,197,24,.2);border-radius:16px;padding:20px 24px;
  text-align:left;
}
.results-title { font-weight:800;font-size:1rem;margin-bottom:14px;color:var(--gold);letter-spacing:.5px; }
.results-row { display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.results-row:last-child { border-bottom:none; }
.results-cat { font-size:.9rem;color:var(--text-secondary);font-weight:600; }
.results-name { font-size:1rem;font-weight:800;color:var(--gold);font-family:'Montserrat',sans-serif; }

/* ══ SETUP SCREEN ══ */
.setup-container { max-width:720px; }
.btn-back {
  position:absolute;top:20px;left:20px;
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;padding:8px 14px;color:var(--text-secondary);
  font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;
  transition:all .2s;
}
.btn-back:hover { background:rgba(255,255,255,.12);color:#fff; }
.category-pill {
  display:inline-block;border-radius:50px;padding:6px 18px;
  font-size:.82rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:14px;
}
.pill-tech  { background:rgba(30,107,255,.2);border:1px solid rgba(30,107,255,.4);color:#80aaff; }
.pill-agent { background:rgba(245,197,24,.15);border:1px solid rgba(245,197,24,.35);color:#ffe080; }
.setup-title { font-family:'Montserrat',sans-serif;font-size:1.7rem;font-weight:900;text-align:center;margin-bottom:6px; }

/* ── Divider ── */
.divider { display:flex;align-items:center;gap:12px;margin-bottom:24px; }
.divider-line { flex:1;height:1px;background:var(--glass-border); }
.divider-dot { width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold); }

/* ── Input ── */
.input-section { margin-bottom:28px; }
.input-row { display:flex;gap:12px;margin-bottom:18px; }
.input-wrapper { flex:1;position:relative; }
.input-icon { position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:1.1rem;pointer-events:none; }
.name-input {
  width:100%;padding:16px 16px 16px 48px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);color:var(--text-primary);
  font-family:'Outfit',sans-serif;font-size:1rem;font-weight:500;outline:none;transition:all .25s;
}
.name-input::placeholder { color:var(--text-muted); }
.name-input:focus { border-color:var(--accent);background:rgba(30,107,255,.1);box-shadow:0 0 0 4px rgba(30,107,255,.14); }
.participants-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; }
.participants-count { font-size:.86rem;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase;transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.btn-clear { background:none;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:5px 14px;color:var(--text-secondary);font-family:'Outfit',sans-serif;font-size:.8rem;cursor:pointer;transition:all .2s; }
.btn-clear:hover { border-color:#ff4d4d;color:#ff4d4d; }
.names-list { display:flex;flex-wrap:wrap;gap:9px;max-height:200px;overflow-y:auto; }
.name-chip {
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,rgba(26,79,160,.4),rgba(30,107,255,.2));
  border:1px solid rgba(30,107,255,.3);border-radius:50px;
  padding:8px 14px 8px 10px;font-size:.9rem;font-weight:500;
  animation:chipIn .35s cubic-bezier(.34,1.56,.64,1) both;transition:transform .15s;
}
.name-chip:hover { transform:scale(1.04); }
@keyframes chipIn { from{opacity:0;transform:scale(.5) rotate(-5deg);} to{opacity:1;transform:scale(1) rotate(0);} }
.chip-avatar { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;color:#fff;flex-shrink:0; }
.chip-remove { background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:1.1rem;transition:color .15s,transform .2s; }
.chip-remove:hover { color:#ff4d4d;transform:scale(1.3) rotate(90deg); }

/* ── Add Button ── */
.btn-add {
  background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:var(--radius-md);
  padding:0;cursor:pointer;box-shadow:0 4px 25px rgba(30,107,255,.45);overflow:hidden;
  transition:transform .15s, box-shadow .15s;
}
.btn-add:hover { transform:translateY(-3px);box-shadow:0 10px 40px rgba(30,107,255,.55); }
.btn-add:active { transform:scale(.97); }
.btn-add .btn-inner { display:flex;align-items:center;gap:8px;padding:16px 22px;font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:700;color:#fff; }
.btn-add svg { width:20px;height:20px; }

/* ── Launch Button ── */
.btn-launch {
  position:relative;width:100%;
  background:linear-gradient(135deg,#9d6e00,var(--gold),#fff0a0,var(--gold),#9d6e00);
  background-size:300% 100%;border:none;border-radius:var(--radius-lg);
  padding:0;cursor:pointer;overflow:hidden;
  box-shadow:0 0 60px rgba(245,197,24,.4);animation:gradShift 5s ease infinite;
  transition:transform .2s cubic-bezier(.34,1.3,.64,1),box-shadow .2s;
}
.btn-launch:not(:disabled):hover { transform:translateY(-4px);box-shadow:0 16px 60px rgba(245,197,24,.55); }
.btn-launch:disabled { opacity:.35;cursor:not-allowed;animation:none;background:rgba(255,255,255,.06);box-shadow:none; }
.btn-launch-inner { display:flex;align-items:center;justify-content:center;gap:12px;padding:20px 32px;font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:900;color:#1a1500;position:relative;z-index:1; }
.btn-launch:disabled .btn-launch-inner { color:rgba(255,255,255,.4); }
.btn-shimmer { position:absolute;top:0;left:-120%;width:70%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-15deg);animation:shimmer 3s ease-in-out infinite; }
.btn-launch:disabled .btn-shimmer { display:none; }
@keyframes shimmer { 0%{left:-120%;} 60%{left:160%;} 100%{left:160%;} }
@keyframes gradShift { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

/* ══ SPIN SCREEN ══ */
.spin-container { max-width:680px; }
.spin-pill { margin:0 auto 16px;display:block;text-align:center; }
.spin-title { text-align:center;font-family:'Montserrat',sans-serif;font-size:1.8rem;font-weight:900;margin-bottom:32px; background:linear-gradient(90deg,var(--text-secondary),#fff,var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 100%;animation:textShimmer 3s linear infinite; }

/* Drum */
.drum-wrapper { position:relative;margin:0 auto 32px;width:390px;height:300px; }
.drum-glow { position:absolute;inset:-50px;border-radius:50%;background:radial-gradient(circle,rgba(30,107,255,.28),rgba(245,197,24,.08),transparent 70%);animation:glowPulse 2s ease-in-out infinite; }
.drum-ring { position:absolute;border-radius:26px;pointer-events:none;animation:ringPulse 2.5s ease-in-out infinite; }
.drum-ring-1 { inset:-8px;border:1px solid rgba(30,107,255,.3); }
.drum-ring-2 { inset:-20px;border:1px solid rgba(245,197,24,.18);animation-delay:.8s; }
.drum-ring-3 { inset:-34px;border:1px solid rgba(0,201,255,.1);animation-delay:1.6s; }
@keyframes ringPulse { 0%,100%{opacity:.6;transform:scale(1);} 50%{opacity:1;transform:scale(1.015);} }
.drum { width:100%;height:100%;border-radius:22px;background:linear-gradient(180deg,rgba(3,9,18,.97),rgba(8,18,40,.97));border:1px solid rgba(255,255,255,.09);overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.6); }
.drum-inner { display:flex;flex-direction:column;align-items:center;transition:transform .05s linear;padding:12px 0;will-change:transform; }
.drum-item { width:88%;text-align:center;padding:16px 12px;font-size:1.15rem;font-weight:600;color:rgba(255,255,255,.3);border-radius:12px;margin:3px 0;transition:all .08s;flex-shrink:0;height:66px;display:flex;align-items:center;justify-content:center;letter-spacing:.3px; }
.drum-item.highlighted { color:var(--gold);font-size:1.4rem;font-weight:900;background:linear-gradient(135deg,rgba(245,197,24,.16),rgba(245,197,24,.05));border:1px solid rgba(245,197,24,.3);text-shadow:0 0 20px rgba(245,197,24,.6);transform:scale(1.05);box-shadow:0 0 20px rgba(245,197,24,.12); }
.drum-overlay { position:absolute;left:0;right:0;height:110px;z-index:3;pointer-events:none; }
.drum-overlay.top { top:0;background:linear-gradient(to bottom,rgba(3,9,18,.98) 30%,transparent); }
.drum-overlay.bottom { bottom:0;background:linear-gradient(to top,rgba(3,9,18,.98) 30%,transparent); }
.drum-pointer { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88%;z-index:4;pointer-events:none; }
.pointer-bar { height:66px;border-radius:12px;border:2px solid rgba(245,197,24,.5);background:rgba(245,197,24,.04);animation:pointerGlow 2s ease-in-out infinite; }
@keyframes pointerGlow { 0%,100%{box-shadow:0 0 20px rgba(245,197,24,.2);border-color:rgba(245,197,24,.4);} 50%{box-shadow:0 0 55px rgba(245,197,24,.45);border-color:rgba(245,197,24,.7);} }
.spin-stats { text-align:center;color:var(--text-muted);font-size:.88rem;margin-bottom:26px;font-weight:500; }

/* Spin button */
.btn-spin { position:relative;width:100%;border:none;border-radius:var(--radius-lg);padding:22px 36px;cursor:pointer;overflow:hidden;font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:900;color:#fff;letter-spacing:1px;background:linear-gradient(135deg,#0a2e6e,var(--accent),var(--accent2),var(--accent),#0a2e6e);background-size:300% 100%;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 40px rgba(30,107,255,.5);animation:gradShift 4s ease infinite; }
.btn-spin:hover { transform:translateY(-4px);box-shadow:0 16px 60px rgba(30,107,255,.65); }
.btn-spin:active { transform:scale(.98); }
.btn-spin:disabled { opacity:.5;cursor:not-allowed;animation:none;transform:none; }
.btn-spin-text { position:relative;z-index:1; }

/* ══ WINNER SCREEN ══ */
#confettiCanvas { position:fixed;inset:0;z-index:1;pointer-events:none;width:100%;height:100%; }
.winner-container { position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%; }
.winner-glass {
  max-width:700px;text-align:center;
  box-shadow:0 0 80px rgba(245,197,24,.25),0 0 160px rgba(245,197,24,.1),0 40px 100px rgba(0,0,0,.5);
  border-color:rgba(245,197,24,.25);
}
.winner-glass::before { background:linear-gradient(90deg,transparent,var(--gold),rgba(255,255,255,.9),var(--gold),transparent); }

.winner-category-pill { display:inline-block;border-radius:50px;padding:6px 18px;font-size:.82rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px; }

/* ── Trophy (shown on winner screen, not finale) ── */
.trophy-wrap { position:relative;display:inline-block;margin-bottom:20px; }
.trophy-aura { position:absolute;inset:-25px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.4),transparent 70%);animation:auraGlow 2.5s ease-in-out infinite;pointer-events:none; }
.trophy-ring  { position:absolute;inset:-42px;border-radius:50%;border:1px solid rgba(245,197,24,.28);animation:trophyRing 2.5s ease-in-out infinite; }
.trophy-ring-2 { position:absolute;inset:-62px;border-radius:50%;border:1px solid rgba(245,197,24,.14);animation:trophyRing 2.5s ease-in-out .5s infinite; }
@keyframes auraGlow { 0%,100%{transform:scale(1);opacity:.7;} 50%{transform:scale(1.1);opacity:1;} }
@keyframes trophyRing { 0%,100%{transform:scale(1);opacity:.7;} 50%{transform:scale(1.05);opacity:1;} }
.trophy { font-size:5.5rem;line-height:1;display:block;position:relative;z-index:1;filter:drop-shadow(0 0 20px rgba(245,197,24,.55));animation:trophyBounce 1s cubic-bezier(.34,1.56,.64,1) both, trophyFloat 3.5s ease-in-out 1s infinite; }
@keyframes trophyBounce { from{transform:scale(0) rotate(-20deg);opacity:0;} to{transform:scale(1) rotate(0);opacity:1;} }
@keyframes trophyFloat   { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

/* Winner text */
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
.winner-label { font-size:1rem;font-weight:700;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin:20px 0 10px;animation:fadeSlideUp .5s ease .4s both; }
.winner-name { font-family:'Montserrat',sans-serif;font-size:2.8rem;font-weight:900;margin-bottom:10px;line-height:1.15;background:linear-gradient(135deg,#fff5b0,var(--gold),#e89b00,var(--gold-light));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeSlideUp .5s ease .55s both,textShimmer 4s ease 1.2s infinite; }
.winner-sublabel { font-size:.95rem;color:var(--text-secondary);margin-bottom:28px;animation:fadeSlideUp .5s ease .7s both; }
.winner-actions { display:flex;gap:14px;justify-content:center;animation:fadeSlideUp .5s ease .85s both; }
.btn-back-home,.btn-share { display:flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--radius-md);font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;border:none; }
.btn-back-home { background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);color:var(--text-primary); }
.btn-back-home:hover { background:rgba(255,255,255,.15);transform:translateY(-3px); }
.btn-share { background:linear-gradient(135deg,#9d6e0c,var(--gold),#ffe566,var(--gold),#9d6e0c);background-size:300% 100%;color:#1a1500;font-weight:900;box-shadow:0 6px 30px rgba(245,197,24,.4);animation:gradShift 4s ease infinite; }
.btn-share:hover { transform:translateY(-3px);box-shadow:0 12px 50px rgba(245,197,24,.55); }

/* ══════════════════════════════════════════════════
   SCREEN 4 — GRANDE SURPRISE (Finale)
══════════════════════════════════════════════════ */
#confettiCanvas2 { position:fixed;inset:0;z-index:1;pointer-events:none;width:100%;height:100%; }
.finale-container { position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%; }
.finale-glass {
  max-width:760px;text-align:center;overflow-y:auto;max-height:96vh;
  box-shadow:0 0 120px rgba(245,197,24,.35),0 0 200px rgba(245,197,24,.12),0 40px 100px rgba(0,0,0,.5);
  border-color:rgba(245,197,24,.35);
}
.finale-glass::before { background:linear-gradient(90deg,transparent,var(--gold),#fff,var(--gold),transparent); }

/* Surprise banner */
.surprise-banner { margin-bottom:20px; }
.surprise-text {
  display:inline-block;font-family:'Montserrat',sans-serif;font-size:1.8rem;font-weight:900;
  background:linear-gradient(135deg,#fff5b0,var(--gold),#e89b00);background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:textShimmer 2.5s ease-in-out infinite, surpriseBounce .8s cubic-bezier(.34,1.56,.64,1) both;
  letter-spacing:1px;
}
@keyframes surpriseBounce { from{transform:scale(0) rotate(-5deg);opacity:0;} to{transform:scale(1) rotate(0);opacity:1;} }

/* Kaaba reveal */
.kaaba-reveal-wrap { position:relative;display:inline-block;margin:0 auto 20px; }
.kaaba-halo {
  position:absolute;inset:-30px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,197,24,.45),transparent 65%);
  animation:auraGlow 2.5s ease-in-out infinite;pointer-events:none;
}
.kaaba-halo-2 { inset:-58px;background:radial-gradient(circle,rgba(245,197,24,.2),transparent 65%);animation-delay:.8s; }
.kaaba-img {
  height:150px;width:auto;border-radius:16px;display:block;position:relative;z-index:1;
  filter:drop-shadow(0 0 28px rgba(245,197,24,.55));
  animation:kaabaFloat 5s ease-in-out infinite, kaabaReveal 1.2s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes kaabaFloat  { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
@keyframes kaabaReveal { from{transform:scale(0) rotate(-12deg);opacity:0;} to{transform:scale(1) rotate(0);opacity:1;} }
.talbiyah-label {
  position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.8);border:1px solid rgba(245,197,24,.45);border-radius:8px;
  padding:5px 18px;white-space:nowrap;z-index:2;
}
.talbiyah-arabic { font-family:'Amiri',serif;font-size:1.05rem;color:var(--gold);direction:rtl;text-shadow:0 0 12px rgba(245,197,24,.4);letter-spacing:1px; }

/* Omra title */
.omra-title {
  font-family:'Montserrat',sans-serif;font-size:1.5rem;font-weight:900;
  color:var(--gold);margin:28px 0 20px;letter-spacing:.5px;
  animation:fadeSlideUp .6s ease .6s both;
  text-shadow:0 0 30px rgba(245,197,24,.35);
}

/* Two winner cards */
.finale-winners { display:flex;gap:16px;margin-bottom:28px;animation:fadeSlideUp .6s ease .8s both; }
.finale-winner-card {
  flex:1;border-radius:18px;padding:22px 16px;text-align:center;
  display:flex;flex-direction:column;gap:8px;
}
.card-tech-finale  { background:linear-gradient(145deg,rgba(30,107,255,.18),rgba(30,107,255,.07));border:1px solid rgba(30,107,255,.35); }
.card-agents-finale{ background:linear-gradient(145deg,rgba(245,197,24,.16),rgba(245,197,24,.06));border:1px solid rgba(245,197,24,.35); }
.finale-winner-role { font-size:.78rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted); }
.finale-winner-name { font-family:'Montserrat',sans-serif;font-size:1.5rem;font-weight:900;color:var(--text-primary);line-height:1.2; }
.card-tech-finale .finale-winner-name   { color:#80aaff; }
.card-agents-finale .finale-winner-name { color:var(--gold); }
.finale-winner-prize { font-size:.82rem;font-weight:700;padding:4px 12px;border-radius:20px;display:inline-block; }
.card-tech-finale  .finale-winner-prize { background:rgba(30,107,255,.2);color:#80aaff;border:1px solid rgba(30,107,255,.3); }
.card-agents-finale .finale-winner-prize{ background:rgba(245,197,24,.15);color:var(--gold);border:1px solid rgba(245,197,24,.3); }

/* Finale actions */
.finale-actions { display:flex;gap:14px;justify-content:center;animation:fadeSlideUp .6s ease 1s both; }
.btn-new-tombola,.btn-share-finale { display:flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--radius-md);font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;border:none; }
.btn-new-tombola { background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);color:var(--text-primary); }
.btn-new-tombola:hover { background:rgba(255,255,255,.15);transform:translateY(-3px); }
.btn-share-finale { background:linear-gradient(135deg,#9d6e0c,var(--gold),#ffe566,var(--gold),#9d6e0c);background-size:300% 100%;color:#1a1500;font-weight:900;box-shadow:0 6px 30px rgba(245,197,24,.4);animation:gradShift 4s ease infinite; }
.btn-share-finale:hover { transform:translateY(-3px);box-shadow:0 12px 50px rgba(245,197,24,.55); }

/* ── Order Draw (mini tombola for who starts) ── */
.order-draw-box {
  background:linear-gradient(135deg,rgba(30,107,255,.08),rgba(245,197,24,.06));
  border:1px solid rgba(255,255,255,.1);border-radius:18px;
  padding:18px 20px;margin-bottom:20px;text-align:center;
}
.order-draw-label { font-size:.8rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px; }
.order-drum-wrap { position:relative;display:inline-block;margin-bottom:14px; }
.order-drum {
  width:280px;height:44px;border-radius:10px;overflow:hidden;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.order-drum-inner {
  font-family:'Montserrat',sans-serif;font-size:1rem;font-weight:800;
  color:var(--gold);white-space:nowrap;transition:all .06s;
  text-shadow:0 0 12px rgba(245,197,24,.5);
}
.order-drum-pointer {
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:8px solid rgba(245,197,24,.8);
}
.btn-order-draw {
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(30,107,255,.25),rgba(0,201,255,.2));
  border:1px solid rgba(30,107,255,.4);border-radius:12px;
  padding:10px 20px;color:#a0c4ff;font-family:'Outfit',sans-serif;
  font-size:.88rem;font-weight:700;cursor:pointer;transition:all .2s;
}
.btn-order-draw:hover { background:linear-gradient(135deg,rgba(30,107,255,.4),rgba(0,201,255,.3));transform:translateY(-2px); }
.btn-order-draw:disabled { opacity:.4;cursor:not-allowed;transform:none; }
.order-result {
  margin-top:12px;padding:10px 18px;border-radius:10px;
  font-family:'Montserrat',sans-serif;font-size:.95rem;font-weight:800;
  animation:fadeSlideUp .4s ease both;
}
.order-result.first-tech  { background:rgba(30,107,255,.15);border:1px solid rgba(30,107,255,.35);color:#80aaff; }
.order-result.first-agent { background:rgba(245,197,24,.12);border:1px solid rgba(245,197,24,.3);color:var(--gold); }

/* ── Participants summary bar ── */
.participants-summary { display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,.04);border-radius:10px;border:1px solid rgba(255,255,255,.08);margin-bottom:0; }
.participants-actions { display:flex;gap:8px;align-items:center; }
.btn-toggle-list { background:none;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:5px 12px;color:var(--text-secondary);font-family:'Outfit',sans-serif;font-size:.8rem;cursor:pointer;transition:all .2s;white-space:nowrap; }
.btn-toggle-list:hover { border-color:var(--accent);color:#fff; }
.names-list-wrap { margin-top:10px;max-height:180px;overflow-y:auto;animation:fadeSlideUp .3s ease both; }

/* Grand Finale button on home */
.btn-finale {
  position:relative;width:100%;margin-top:16px;
  background:linear-gradient(135deg,#1a6b35,#2ecc71,#a8ffcc,#2ecc71,#1a6b35);background-size:300% 100%;
  border:none;border-radius:var(--radius-lg);padding:0;cursor:pointer;overflow:hidden;
  box-shadow:0 0 60px rgba(46,204,113,.45);animation:gradShift 5s ease infinite;
  transition:transform .2s cubic-bezier(.34,1.3,.64,1),box-shadow .2s;
}
.btn-finale:hover { transform:translateY(-4px);box-shadow:0 16px 60px rgba(46,204,113,.6); }
.btn-finale-inner { display:flex;align-items:center;justify-content:center;padding:20px 28px;font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:900;color:#0a1f0d;letter-spacing:.5px;position:relative;z-index:1; }

/* ── Toast ── */
.toast { position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(15,25,45,.95);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:50px;padding:13px 26px;color:#fff;font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:500;z-index:9999;animation:toastIn .4s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes toastIn { to{transform:translateX(-50%) translateY(0);} }

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px;}
.names-list::-webkit-scrollbar{width:4px;} .names-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px;}

/* ── Responsive ── */
@media(max-width:700px){
  .glass-container{padding:32px 24px;}
  .title-main{font-size:2.4rem;}
  .category-cards{gap:12px;}
  .category-card{padding:22px 14px;}
  .card-icon{font-size:2rem;}
  .card-title{font-size:.85rem;}
  .drum-wrapper{width:300px;height:240px;}
  .drum-item{font-size:.95rem;height:54px;}
  .winner-name{font-size:2.1rem;}
  .kaaba-img{height:120px;}
}
@media(max-width:480px){
  .glass-container{padding:24px 16px;}
  .title-main{font-size:1.9rem;flex-wrap:wrap;}
  .category-cards{flex-direction:column;}
  .drum-wrapper{width:260px;height:200px;}
  .winner-actions{flex-direction:column;}
}