/* Base styles */
:root{
  --bg:#0f1226; --card:#171a34; --text:#eef1ff; --muted:#b9c0ff; --primary:#7b7ff5; --accent:#31d0aa; --warn:#ffb84d; --danger:#ff5e7a; --success:#52e2a7;
  --good:#41f1b6; --bad:#ff6b6b; --gold:#ffd166;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:radial-gradient(120% 80% at 20% 0%,rgba(123,127,245,.35),transparent 50%), radial-gradient(120% 80% at 80% 0%,rgba(49,208,170,.25),transparent 50%), linear-gradient(180deg,#0f1226,#0b0e22 40%,#0f1226); color:var(--text)}
.container{width:min(1100px,92%);margin:0 auto}
.hidden{display:none}

/* Hero */
.hero{position:relative;padding:80px 0 40px;background:radial-gradient(80% 50% at 50% 0%,rgba(123,127,245,.35),rgba(49,208,170,.15) 40%,transparent 70%)}
.hero-content h1{font-size:40px;margin:0 0 8px}
.subtitle{color:var(--muted);margin:0 0 20px}
.team-badge{display:inline-block;background:linear-gradient(90deg,#ff6b6b,#ffd166,#52e2a7,#7b7ff5);background-size:200% 100%;animation:flow 6s linear infinite; -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; margin-bottom:14px}
@keyframes flow{0%{background-position:0 0}100%{background-position:200% 0}}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{background:#293056;border:1px solid #39407a;color:var(--text);padding:10px 16px;border-radius:12px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:all .2s; box-shadow:0 6px 16px rgba(0,0,0,.25)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.btn.primary{background:linear-gradient(135deg,var(--primary),#9f77ff);border:0}
.btn.success{background:linear-gradient(135deg,var(--success),#31d0aa);border:0}
.btn.warn{background:linear-gradient(135deg,var(--warn),#ff9a3d);border:0}
.btn.danger{background:linear-gradient(135deg,var(--danger),#ff3d73);border:0}
.btn.big{font-size:18px;padding:14px 22px}
.scroll-indicator{text-align:center;color:var(--muted);opacity:.6}

/* Cards */
.card{background:var(--card);border:1px solid #232856;border-radius:16px;padding:18px;margin:24px 0;box-shadow:0 10px 30px rgba(0,0,0,.25); position:relative}
.card:before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;background:linear-gradient(135deg,rgba(123,127,245,.6),rgba(49,208,170,.3));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none}
.card.subtle{background:#141738}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pillars .pillar{background:#151942;border:1px dashed #2a2f63;border-radius:14px;padding:14px}
.pillars .pillar h3{background:linear-gradient(90deg,#ffd166,#52e2a7,#7b7ff5); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Payoff grid */
.payoff-grid .cell{background:#12163a;border:1px solid #2a2f63;border-radius:12px;padding:12px;position:relative}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#25306b;margin:4px 6px 0 0;font-size:12px}
.pill.good{background:linear-gradient(135deg,#32d6a3,#1fa77e)}
.pill.bad{background:linear-gradient(135deg,#ff6b6b,#ff3d73)}
.pill.warn{background:linear-gradient(135deg,#ffb84d,#ff9a3d)}
.mini{color:var(--muted);font-size:11px;margin-top:6px}
.examples{color:var(--muted)}

/* Forms */
.form label,.form-row label{display:block;margin:6px 0 6px;color:var(--muted)}
.form input,.form-row input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #2b3166;background:#14183a;color:var(--text)}
.form-row select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #2b3166;background:#14183a;color:var(--text)}
.hint{color:var(--muted);font-size:12px;margin-top:8px}
.code{font-size:28px;font-weight:700;letter-spacing:3px;background:#0f1333;border:1px dashed #2f3570;padding:8px 12px;border-radius:10px;display:inline-block}

/* Lists & tables */
.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.list li{padding:8px 12px;background:#14183a;border:1px solid #2b3166;border-radius:10px;display:flex;justify-content:space-between}
.list li .user{display:flex;align-items:center;gap:8px}
.avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#2a2f63;color:#fff;font-weight:700}
.badge{padding:2px 6px;border-radius:8px;background:#26306a;color:#b9c0ff;font-size:11px;margin-left:6px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #2b3166;text-align:left}
.table th{color:var(--muted);font-weight:500}

/* Status */
.status{display:flex;gap:16px;color:var(--muted)}
.timer{font-size:18px;color:var(--muted)}
.progress{height:10px;background:#202654;border-radius:999px;overflow:hidden}
.progress .bar{height:100%;background:linear-gradient(90deg,#7b7ff5,#31d0aa);width:0%;transition:width .2s}
.progress.crisis .bar{background:linear-gradient(90deg,#ff6b6b,#ffd166)}

/* Animations */
.pop{animation:pop .25s ease}
@keyframes pop{0%{transform:scale(.96)}100%{transform:scale(1)}}

/* Confetti canvas placeholder */
#confetti{position:fixed;inset:0;pointer-events:none}

/* Choice indicator */
.choice-indicator{margin-top:10px;padding:10px 12px;border-radius:10px;background:#14183a;border:1px solid #2b3166;color:#eef1ff}
.choice-indicator.good{background:linear-gradient(135deg,rgba(82,226,167,.15),rgba(49,208,170,.12));border-color:#2a7e68}
.choice-indicator.warn{background:linear-gradient(135deg,rgba(255,184,77,.15),rgba(255,154,61,.12));border-color:#8a5a22}
.choice-indicator .title{font-weight:700;margin-right:6px}
.hidden{display:none}
.btn.selected{outline:2px solid #ffd166; filter:brightness(1.05)}

/* Topbar/footer */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 4%;background:#0d1130;border-bottom:1px solid #23274f}
.brand{color:var(--text);text-decoration:none;font-weight:700}
.brand .badge{margin-left:10px;background:linear-gradient(90deg,#ff6b6b,#ffd166,#52e2a7,#7b7ff5);color:#0f1226}
.footer{padding:30px 0;color:var(--muted)}

@media (max-width:800px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .hero-content h1{font-size:32px}
}

/* Banners */
.banner{margin:8px 0;padding:10px 12px;border-radius:10px;background:#14183a;border:1px solid #2b3166;color:#eef1ff}
.banner.warn{background:linear-gradient(135deg,rgba(255,184,77,.15),rgba(255,154,61,.12));border-color:#8a5a22}

/* Chips */
.chip{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;font-size:11px;background:#26306a;color:#b9c0ff;border:1px solid #2b3166}
.chip.crisis{background:#3a1420;color:#ffd6de;border-color:#ff6b6b}

/* Crisis card aura */
.card.crisis:before{background:linear-gradient(135deg,rgba(255,107,107,.6),rgba(255,209,102,.3));}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0f1333;border:1px solid #2f3570;color:#eef1ff;padding:10px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:1000}
/* Loading overlay */
.overlay{position:fixed;inset:0;background:rgba(15,19,51,.6);display:flex;align-items:center;justify-content:center;z-index:2000}
.overlay.hidden{display:none}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#7b7ff5;animation:spin 1s linear infinite;margin-right:10px}
@keyframes spin{to{transform:rotate(360deg)}}