*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #080c14;
  --bg2:    #0d1421;
  --bg3:    #111827;
  --card:   rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.07);
  --blue:   #3b82f6;
  --blue-d: #2563eb;
  --gold:   #f59e0b;
  --green:  #22c55e;
  --red:    #ef4444;
  --kick:   #53fc18;
  --purple: #8b5cf6;
  --text:   #f1f5f9;
  --muted:  #94a3b8;
  --r:      12px;
  --r-lg:   20px;
}

body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; font-size:15px; line-height:1.6; }
main { flex:1; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
code { background:var(--bg3); padding:2px 7px; border-radius:5px; font-size:13px; }

.container    { max-width:1100px; margin:0 auto; padding:0 24px; }
.container-md { max-width:860px;  margin:0 auto; padding:0 24px; }
.container-sm { max-width:680px;  margin:0 auto; padding:0 24px; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--r); font-weight:600; font-size:14px; cursor:pointer; transition:all .18s; border:1px solid transparent; text-decoration:none !important; white-space:nowrap; }
.btn-primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-primary:hover { background:var(--blue-d); transform:translateY(-1px); }
.btn-ghost { background:var(--card); color:var(--text); border-color:var(--border); }
.btn-ghost:hover { background:var(--bg3); }
.btn-danger { background:rgba(239,68,68,.15); color:var(--red); border-color:rgba(239,68,68,.3); }
.btn-success { background:rgba(34,197,94,.15); color:var(--green); border-color:rgba(34,197,94,.3); }
.btn-gold { background:rgba(245,158,11,.15); color:var(--gold); border-color:rgba(245,158,11,.3); }
.btn-kick { background:rgba(83,252,24,.12); color:var(--kick); border-color:rgba(83,252,24,.3); }
.btn-purple { background:rgba(139,92,246,.15); color:var(--purple); border-color:rgba(139,92,246,.3); }
.btn-sm { padding:7px 14px; font-size:13px; }
.btn-lg { padding:14px 28px; font-size:16px; }
button[disabled] { opacity:.4; cursor:not-allowed; }

/* ── Navbar ── */
.navbar { position:sticky; top:0; z-index:200; background:rgba(8,12,20,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:1100px; margin:0 auto; padding:0 24px; height:62px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; color:var(--text) !important; text-decoration:none !important; }
.logo-accent { color:var(--gold); }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-link { color:var(--muted); font-size:14px; font-weight:500; padding:6px 12px; border-radius:8px; transition:.18s; text-decoration:none !important; }
.nav-link:hover { color:var(--text); background:var(--card); }
.nav-live { color:var(--kick) !important; }
.nav-user { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); padding:6px 14px 6px 6px; border-radius:99px; color:var(--text); font-size:14px; font-weight:500; text-decoration:none !important; }
.nav-av { width:28px; height:28px; border-radius:50%; overflow:hidden; background:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.nav-av img { width:100%; height:100%; object-fit:cover; }
.nav-pts { color:var(--gold); font-weight:700; font-size:13px; }
.nav-tickets { color:var(--purple); font-weight:700; font-size:13px; }

/* ── Hero ── */
.hero { padding:90px 0 60px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 50% at 50% -5%,rgba(59,130,246,.14),transparent),radial-gradient(ellipse 40% 40% at 85% 70%,rgba(245,158,11,.07),transparent); pointer-events:none; }
.hero-content { position:relative; max-width:640px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.25); color:#93c5fd; padding:5px 16px; border-radius:99px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; margin-bottom:24px; }
.hero-title { font-size:clamp(32px,5.5vw,58px); font-weight:800; line-height:1.08; letter-spacing:-1.5px; margin-bottom:20px; }
.grad { background:linear-gradient(135deg,var(--blue) 30%,var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { color:var(--muted); font-size:17px; margin-bottom:32px; max-width:520px; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }

/* ── Stats bar ── */
.stats-bar { padding:0 0 56px; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 20px; text-align:center; transition:.2s; }
.stat-card:hover { border-color:rgba(59,130,246,.3); transform:translateY(-2px); }
.stat-card.live { border-color:rgba(239,68,68,.4); animation:livepulse 2s infinite; }
@keyframes livepulse { 0%,100%{border-color:rgba(239,68,68,.4)}50%{border-color:rgba(239,68,68,.1)} }
.stat-ic { font-size:22px; margin-bottom:8px; }
.stat-val { font-size:24px; font-weight:800; margin-bottom:4px; }
.stat-lbl { font-size:11px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.4px; }

/* ── Sections ── */
.section { padding:68px 0; }
.section-alt { padding:68px 0; background:var(--bg2); }
.s-title { font-size:26px; font-weight:800; letter-spacing:-.5px; margin-bottom:6px; }
.s-sub { color:var(--muted); margin-bottom:36px; }
.s-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:10px; }

/* ── Live bar ── */
.live-bar { display:flex; align-items:center; gap:12px; background:rgba(83,252,24,.06); border:1px solid rgba(83,252,24,.2); border-radius:var(--r); padding:12px 18px; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--kick); animation:blink 1s infinite; flex-shrink:0; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }
.live-stat { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.live-stat span { color:var(--muted); font-weight:400; }

/* ── Top chatters ── */
.top-chatters { display:flex; flex-direction:column; gap:6px; }
.chatter-row { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px 14px; }
.chatter-pos { width:24px; color:var(--muted); font-size:13px; font-weight:600; text-align:center; }
.chatter-name { flex:1; font-size:14px; font-weight:500; }
.chatter-count { color:var(--kick); font-size:13px; font-weight:700; }

/* ── Steps ── */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.step { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; position:relative; overflow:hidden; }
.step::before { content:attr(data-n); position:absolute; top:12px; right:16px; font-size:44px; font-weight:800; color:rgba(255,255,255,.04); line-height:1; }
.step-ic { font-size:26px; margin-bottom:12px; }
.step h3 { font-size:15px; font-weight:700; margin-bottom:8px; }
.step p { color:var(--muted); font-size:14px; }

/* ── Leaderboard ── */
.lb { display:flex; flex-direction:column; gap:6px; }
.lb-row { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:11px 16px; transition:.18s; }
.lb-row:hover { border-color:rgba(59,130,246,.25); }
.lb-row.t1 { background:rgba(245,158,11,.06); border-color:rgba(245,158,11,.25); }
.lb-row.t2 { background:rgba(148,163,184,.05); border-color:rgba(148,163,184,.2); }
.lb-row.t3 { background:rgba(180,82,36,.05);   border-color:rgba(180,82,36,.2); }
.lb-row.mine { border-color:var(--blue) !important; background:rgba(59,130,246,.07) !important; }
.lb-pos { width:32px; font-size:16px; text-align:center; flex-shrink:0; }
.lb-av { width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.lb-av img { width:100%; height:100%; object-fit:cover; }
.lb-info { flex:1; min-width:0; }
.lb-name { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.lb-sub { color:var(--muted); font-size:12px; }
.lb-right { text-align:right; flex-shrink:0; }
.lb-pts { font-weight:700; color:var(--gold); font-size:15px; }
.lb-pts span { font-size:11px; color:var(--muted); font-weight:400; }
.lb-tickets { font-size:12px; color:var(--purple); font-weight:600; margin-top:2px; }
.you-badge { background:var(--blue); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px; margin-left:6px; }

/* ── Tabs ── */
.tabs { display:flex; gap:6px; margin-bottom:24px; border-bottom:1px solid var(--border); padding-bottom:0; }
.tab { padding:10px 18px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; transition:.18s; text-decoration:none !important; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--blue); border-bottom-color:var(--blue); }

/* ── Cards ── */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; }
.card+.card { margin-top:16px; }
.card-title { font-size:17px; font-weight:700; margin-bottom:18px; }

/* ── Perfil ── */
.profile-hdr { display:flex; align-items:center; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.profile-av { width:80px; height:80px; border-radius:50%; border:3px solid var(--blue); overflow:hidden; background:var(--blue); display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; flex-shrink:0; }
.profile-av img { width:100%; height:100%; object-fit:cover; }
.profile-name { font-size:22px; font-weight:800; }
.profile-rank { color:var(--muted); font-size:13px; margin-top:3px; }
.pstats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.pstat { background:var(--bg3); border-radius:var(--r); padding:16px; text-align:center; }
.pstat-v { font-size:20px; font-weight:800; color:var(--gold); }
.pstat-v.tickets { color:var(--purple); }
.pstat-l { font-size:11px; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.3px; }

/* ── Referral ── */
.referral-box { background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.25); border-radius:var(--r); padding:16px 20px; }
.referral-link { display:flex; align-items:center; gap:10px; margin-top:10px; }
.referral-input { flex:1; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:9px 14px; color:var(--text); font-size:13px; font-family:monospace; }
.referral-list { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.referral-item { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }

/* ── Achievements ── */
.achievements-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.ach-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:16px; text-align:center; transition:.2s; position:relative; }
.ach-card.unlocked { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.06); }
.ach-card.locked { opacity:.5; }
.ach-icon { font-size:28px; margin-bottom:8px; }
.ach-label { font-size:12px; font-weight:600; margin-bottom:4px; }
.ach-reward { font-size:11px; color:var(--gold); }
.ach-unlock { position:absolute; top:8px; right:8px; font-size:10px; }

/* ── Tienda ── */
.shop-grid { display:flex; flex-direction:column; gap:8px; }
.shop-item { display:flex; align-items:center; gap:14px; background:var(--bg3); border-radius:var(--r); padding:12px 16px; }
.shop-icon { font-size:22px; }
.shop-info { flex:1; }
.shop-name { font-weight:600; font-size:14px; }
.shop-cost { font-size:13px; font-weight:700; }
.shop-cost.points { color:var(--gold); }
.shop-cost.tickets { color:var(--purple); }

/* ── Historial ── */
.tx-list { display:flex; flex-direction:column; gap:6px; }
.tx { display:grid; grid-template-columns:28px 1fr auto 90px; align-items:center; gap:10px; background:var(--bg3); border-radius:8px; padding:10px 14px; font-size:13px; }
.tx-earn { color:var(--green); font-weight:700; }
.tx-spend { color:var(--red); font-weight:700; }
.tx-date { color:var(--muted); font-size:11px; text-align:right; }
.tx-tickets { color:var(--purple) !important; }

/* ── Notifications ── */
.notif-list { display:flex; flex-direction:column; gap:8px; }
.notif { display:flex; align-items:flex-start; gap:14px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:13px 16px; }
.notif-dot { width:7px; height:7px; border-radius:50%; background:var(--blue); flex-shrink:0; margin-top:7px; }
.notif-title { font-weight:600; font-size:14px; }
.notif-text { color:var(--muted); font-size:13px; margin-top:2px; }
.notif-time { color:var(--muted); font-size:11px; flex-shrink:0; }

/* ── Admin ── */
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.admin-full { grid-column:1/-1; }
@media(max-width:780px){ .admin-grid{grid-template-columns:1fr;} }
.form-row { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.form-row label { font-size:12px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.3px; }
.form-row input, .form-row select, .form-row textarea { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:9px 13px; color:var(--text); font-size:14px; font-family:inherit; width:100%; transition:.15s; }
.form-row input:focus, .form-row select:focus { outline:none; border-color:var(--blue); }
.form-inline { display:flex; gap:10px; flex-wrap:wrap; }
.form-inline .form-row { flex:1; min-width:120px; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600; }
.badge-red { background:rgba(239,68,68,.15); color:var(--red); }
.badge-green { background:rgba(34,197,94,.15); color:var(--green); }
.badge-gold { background:rgba(245,158,11,.15); color:var(--gold); }
.badge-purple { background:rgba(139,92,246,.15); color:var(--purple); }
.msg-ok  { background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); color:var(--green); border-radius:var(--r); padding:12px 16px; margin-bottom:18px; font-size:14px; }
.msg-err { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:var(--red);   border-radius:var(--r); padding:12px 16px; margin-bottom:18px; font-size:14px; }

/* ── Overlays (hit modal, ruleta widget) ── */
.hit-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; }
.hit-modal { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; max-width:400px; width:100%; text-align:center; }
.hit-modal h2 { font-size:20px; font-weight:800; margin-bottom:8px; }
.hit-modal p { color:var(--muted); font-size:14px; margin-bottom:20px; }
.hit-input { width:100%; background:var(--bg); border:2px solid var(--border); border-radius:var(--r); padding:14px; font-size:26px; font-weight:700; color:var(--text); text-align:center; letter-spacing:8px; font-family:monospace; margin-bottom:14px; transition:.2s; }
.hit-input:focus { outline:none; border-color:var(--blue); }
.hit-msg { font-size:13px; margin-top:10px; min-height:18px; }
.hit-msg.ok { color:var(--green); }
.hit-msg.err { color:var(--red); }

.ruleta-widget { position:fixed; bottom:24px; left:24px; z-index:400; max-width:320px; width:calc(100% - 48px); background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3); border-radius:var(--r-lg); padding:18px; }
.ruleta-opts { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
.ruleta-opt { padding:7px 14px; border-radius:var(--r); font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--card); transition:.15s; color:var(--text); }
.ruleta-opt:hover, .ruleta-opt.sel { border-color:var(--gold); background:rgba(245,158,11,.15); color:var(--gold); }

/* ── Toast ── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:1000; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:14px 18px; max-width:310px; box-shadow:0 8px 32px rgba(0,0,0,.4); animation:slidein .3s ease; font-size:14px; }
.toast.t-blue { border-color:rgba(59,130,246,.4); }
.toast.t-green { border-color:rgba(34,197,94,.4); }
.toast.t-gold { border-color:rgba(245,158,11,.4); }
.toast.t-red { border-color:rgba(239,68,68,.4); }
.toast.t-kick { border-color:rgba(83,252,24,.4); }
.toast-title { font-weight:700; margin-bottom:3px; }
.toast-body { color:var(--muted); font-size:12px; }
@keyframes slidein { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* ── Live banner (hit activo) ── */
.hit-banner { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); border-radius:var(--r); padding:14px 18px; display:flex; align-items:center; gap:12px; cursor:pointer; animation:livepulse 2s infinite; }
.hit-banner .live-dot { background:var(--red); }

/* ── Footer ── */
.footer { border-top:1px solid var(--border); padding:24px 0; text-align:center; margin-top:auto; }
.footer p { color:var(--muted); font-size:13px; }
.footer a { color:var(--muted); }
.footer a:hover { color:var(--text); }

/* ── Responsive ── */
@media(max-width:700px){
  .hero { padding:56px 0 40px; }
  .pstats { grid-template-columns:1fr 1fr; }
  .tx { grid-template-columns:28px 1fr auto; }
  .tx-date { display:none; }
  .lb-sub { display:none; }
  .nav-link { display:none; }
  .achievements-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
}