/* ===== Undian WebApp — Themes (Aurora & Brand) + Animated Focus + Confetti ===== */
@font-face{
  font-family:'Segment7';
  src:local('Segment7'), local('SegmentSeven'),
      url('https://fonts.cdnfonts.com/s/17923/Segment7Standard.woff') format('woff');
}

/* DEFAULT THEME VARS (fallback) */
:root{
  --bg:#f5f6fb; --text:#222;
  --primary:#6a36e8; --primary-600:#7d53ec; --accent:#ff5aa5;
  --focus-a:rgba(99,102,241,.18); --focus-b:rgba(236,72,153,.16);
  --focus-l1:#1f2937; --focus-l2:#0b0b12; --focus-l3:#111827;
}

/* Aurora variants */
body.theme-aurora-purple{
  --primary:#6a36e8; --primary-600:#7d53ec; --accent:#ff5aa5;
  --focus-a:rgba(99,102,241,.18); --focus-b:rgba(236,72,153,.16);
  --focus-l1:#1f2937; --focus-l2:#0b0b12; --focus-l3:#111827;
}
body.theme-aurora-blue{
  --primary:#2563eb; --primary-600:#3b82f6; --accent:#06b6d4;
  --focus-a:rgba(59,130,246,.18); --focus-b:rgba(6,182,212,.16);
  --focus-l1:#0e1726; --focus-l2:#0a1120; --focus-l3:#111827;
}
body.theme-aurora-green{
  --primary:#15803d; --primary-600:#22c55e; --accent:#10b981;
  --focus-a:rgba(34,197,94,.18); --focus-b:rgba(16,185,129,.16);
  --focus-l1:#0b2016; --focus-l2:#071710; --focus-l3:#0f241a;
}
body.theme-aurora-lightgreen{
  --primary:#16a34a; --primary-600:#84cc16; --accent:#22d3ee;
  --focus-a:rgba(132,204,22,.18); --focus-b:rgba(34,211,238,.16);
  --focus-l1:#0e1d0b; --focus-l2:#0a1707; --focus-l3:#15240f;
}

/* opsi lain */
body.theme-gold{
  --primary:#caa21a; --primary-600:#e1bb28; --accent:#ff9f1c;
  --focus-a:rgba(234,179,8,.18); --focus-b:rgba(249,115,22,.16);
  --focus-l1:#3a2f12; --focus-l2:#1a1407; --focus-l3:#2a210c;
}
body.theme-red{
  --primary:#dc2626; --primary-600:#ef4444; --accent:#f97316;
  --focus-a:rgba(239,68,68,.18); --focus-b:rgba(249,115,22,.16);
  --focus-l1:#2a0b0b; --focus-l2:#190707; --focus-l3:#22100f;
}
body.theme-neon{
  --primary:#0ea5e9; --primary-600:#38bdf8; --accent:#a855f7;
  --focus-a:rgba(56,189,248,.18); --focus-b:rgba(168,85,247,.16);
  --focus-l1:#0b1021; --focus-l2:#070b1a; --focus-l3:#101436;
}

/* Base */
*{box-sizing:border-box;}
html,body{height:100%;}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:var(--text);}
a{text-decoration:none;color:inherit;}
.container{max-width:1100px;margin:0 auto;padding:15px;}
.btn{border:0;border-radius:22px;padding:11px 18px;cursor:pointer;transition:all .2s;display:inline-block;pointer-events:auto}

/* Header / Topbar */
.topbar{position:relative;background:var(--primary);color:#fff;padding:24px 0 96px;border-bottom-left-radius:60% 44px;border-bottom-right-radius:60% 44px;z-index:1;}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;}
.logo-img{height:56px;background:#fff;border-radius:8px;padding:6px;box-shadow:0 2px 6px rgba(0,0,0,.08);}

/* Banner title */
.banner-title{display:flex;justify-content:center;align-items:center;font-weight:bold;letter-spacing:.5px;margin-top:10px;color:#fff;text-transform:uppercase;}
.banner-title span{background:rgba(255,255,255,.12);padding:6px 14px;border-radius:10px;}

/* Nav pills */
.nav{position:relative;z-index:5;display:flex;justify-content:center;gap:10px;margin-top:-48px;}
.nav a{padding:8px 14px;border-radius:24px;background:var(--primary-600);color:#fff;border:1px solid rgba(255,255,255,.25);font-size:13px;box-shadow:0 6px 14px rgba(0,0,0,.08);}
.nav a.active{background:var(--accent);}

/* Page / Grid */
.page{margin-top:20px;}
.grid{display:grid;grid-template-columns:320px 1fr 320px;gap:16px;align-items:start;}
.card{background:#fff;border-radius:16px;box-shadow:0 4px 18px rgba(0,0,0,.06);padding:14px;}
.card.center{text-align:center;}

/* Form bits */
.label{font-weight:bold;font-size:14px;margin-bottom:6px;display:block;}
.select{width:100%;padding:8px;border:1px solid #ddd;border-radius:10px;}
.input{width:100%;padding:10px;border:1px solid #ddd;border-radius:12px;}
.small{font-size:12px;color:#666;}
.badge{display:inline-block;padding:3px 10px;border-radius:14px;background:#f0f0f7;font-size:12px;margin-left:6px;}
.reward-img{width:100%;border-radius:12px;margin-top:8px;}

/* Display angka */
.display{
  font-family:'Segment7','Courier New',monospace;
  background:#000;color:#ffd000;font-size:46px;letter-spacing:4px;
  border-radius:26px;padding:12px;margin:0 24px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}
@keyframes glowPulse{from{filter:drop-shadow(0 0 18px var(--accent));}to{filter:drop-shadow(0 0 42px var(--accent));}}
body.rolling .display{ animation:glowPulse 1.1s ease-in-out infinite alternate; }

/* Buttons */
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{opacity:.9}
.btn-gray{background:#e9e9ef;color:#333;}
.btn-green{background:#22c55e;color:#fff;}

/* Utils */
.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}
.right{float:right}.flex{display:flex;align-items:center;gap:10px}.center{text-align:center}
.note{padding:10px;background:#fff7cc;border:1px solid #ffe58f;border-radius:10px;color:#8a6d3b;}
.footer{font-size:12px;color:#777;margin-top:20px;text-align:center;}
#pickedList{min-height:280px}

/* Table */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.06);}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;font-size:14px;text-align:left;}
.table th{background:#fafafa;}

/* Responsive */
@media (max-width:992px){
  .grid{grid-template-columns:1fr;}
  .display{font-size:40px;margin:0;}
  .nav{margin-top:-42px;}
}
@media (max-width:520px){
  .display{font-size:34px;}
  .nav a{font-size:12px;padding:7px 12px;}
}

/* ===== Animated Focus Mode (Auto) ===== */
body.focus-mode{ overflow:hidden; background:var(--focus-l2); }
body.focus-mode .topbar, body.focus-mode .nav, body.focus-mode .footer{ display:none !important; }

body.focus-mode::before, body.focus-mode::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; }
body.focus-mode::before{
  background:
    radial-gradient(60% 80% at 10% 90%, var(--focus-a), transparent 60%),
    radial-gradient(55% 70% at 85% 15%, var(--focus-b), transparent 60%),
    linear-gradient(120deg, var(--focus-l1) 0%, var(--focus-l2) 50%, var(--focus-l3) 100%);
  background-size:160% 160%, 160% 160%, 100% 100%;
  animation: auroraMove 22s ease-in-out infinite;
  filter: saturate(1.15);
}
body.focus-mode::after{
  background: conic-gradient(from 0deg, var(--focus-a), var(--focus-b), rgba(255,255,255,.06), var(--focus-a));
  filter: blur(60px);
  animation: hueSpin 30s linear infinite;
  opacity:.9;
}
body.focus-mode .container, body.focus-mode .grid, body.focus-mode .card.center, body.focus-mode .display{ position:relative; z-index:1; }

@keyframes auroraMove{
  0%{background-position:0% 100%, 100% 0%, center;}
  50%{background-position:100% 0%, 0% 100%, center;}
  100%{background-position:0% 100%, 100% 0%, center;}
}
@keyframes hueSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Focus layout */
body.focus-mode .container{ max-width:100vw; padding:0 16px; }
body.focus-mode .page{ margin-top:0; }
body.focus-mode .grid{
  display:grid !important; grid-template-columns:1fr !important; gap:12px !important;
  min-height:100vh !important; align-items:center !important; justify-items:center !important;
}
body.focus-mode .card{ background:transparent !important; box-shadow:none !important; }
body.focus-mode .card.center{ width:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; }
body.focus-mode .display{
  width:min(92vw,1100px) !important;
  font-size:clamp(60px, 20vw, 240px) !important;
  padding:16px 24px !important; border-radius:32px !important; letter-spacing:6px !important; margin:0 !important;
  transition:font-size .35s ease, width .35s ease;
}
body.focus-mode #info-txn, body.focus-mode #info-phone, body.focus-mode #info-addr{ color:#e6e7ee !important; }

/* hide controls in focus */
body.focus-mode .btn, body.focus-mode input, body.focus-mode select, body.focus-mode label,
body.focus-mode .reward-img, body.focus-mode .badge, body.focus-mode .note, body.focus-mode #pickedList{ display:none !important; }

/* Confetti canvas */
#fx-canvas{ position:fixed; inset:0; pointer-events:none; z-index:9999; }