/* ============================================================
   L2REX — Design System (F2)
   Tokens + componentes. Dark fantasy premium (preto/bronze/dourado).
   Usado por: site público, player panel, admin. Motion compartilhado.
   ============================================================ */
:root{
  /* superfícies */
  --bg:#09090b; --bg-2:#0d0a0b; --graphite:#15110f; --brown:#1a110c;
  --surface:rgba(22,15,13,.72); --surface-2:rgba(30,20,16,.8); --surface-hover:rgba(40,27,20,.85);
  --border:rgba(217,184,121,.16); --border-hl:rgba(217,184,121,.4);
  /* marca */
  --gold:#d9b879; --gold-light:#f0d9a6; --gold-dark:#9c7b43; --bronze:#b5844b; --amber:#ffb347; --ember:#f06b32; --fire:#f0501a;
  /* texto */
  --text:#f3e8df; --text-primary:#f4ece3; --text-secondary:#b8a596; --text-dim:#8a7a6d;
  /* semânticas */
  --success:#5fbf6a; --warning:#f0c04a; --danger:#e0513f; --info:#5aa6f0; --special:#a877f0;
  /* raios/sombra */
  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px;
  --shadow:0 20px 60px rgba(0,0,0,.5); --shadow-lg:0 30px 80px rgba(0,0,0,.6);
  /* fontes */
  --font-ui:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Trajan Pro","Cinzel","Georgia",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text-primary);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
h1,h2,h3,.display{font-family:var(--font-display);letter-spacing:.02em}
::selection{background:rgba(240,107,50,.35)}

/* ---------- Fundo animado compartilhado ---------- */
.bg-scene{position:fixed;inset:0;z-index:0;overflow:hidden;will-change:transform}
.bg-scene .img{position:absolute;inset:-10%;background:45% 60%/cover no-repeat;background-image:url(/assets/battle.jpg);animation:ds-ambient 26s ease-in-out infinite alternate;will-change:transform,background-position}
/* banner rotativo (crossfade entre varias imagens) */
.bg-scene .img{opacity:0;transition:opacity 1.6s ease}
.bg-scene .img.active{opacity:1}
.bg-scene .img:only-child{opacity:1}
@keyframes ds-ambient{0%{transform:scale(1.08) translate(0,0)}50%{transform:scale(1.13) translate(-1.2%,-.8%)}100%{transform:scale(1.1) translate(1%,-1.4%)}}
.bg-fx{position:fixed;border-radius:50%;pointer-events:none;mix-blend-mode:screen;filter:blur(10px);z-index:0}
.bg-fx.dragon{width:30vw;height:34vh;left:60%;top:16%;background:radial-gradient(circle,rgba(255,185,80,.75),rgba(240,80,25,.22) 55%,transparent 72%);animation:ds-fx 2.1s ease-in-out infinite}
.bg-fx.impact{width:22vw;height:26vh;left:44%;top:30%;background:radial-gradient(circle,rgba(190,215,255,.8),rgba(80,120,255,.26) 50%,transparent 72%);animation:ds-fx 1.5s ease-in-out infinite}
.bg-fx.mage{width:14vw;height:18vh;left:22%;top:50%;background:radial-gradient(circle,rgba(150,210,255,.7),transparent 68%);animation:ds-fx 1.7s ease-in-out infinite .5s}
@keyframes ds-fx{0%,100%{opacity:.18;transform:scale(.85)}50%{opacity:.8;transform:scale(1.12)}}
.bg-scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(9,9,11,.5) 0%,rgba(9,9,11,.46) 35%,rgba(9,9,11,.8) 100%)}
#ds-embers{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ---------- Layout ---------- */
.container{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 20px}

/* ---------- Header sticky ---------- */
.ds-header{position:sticky;top:0;z-index:30;transition:.3s}
.ds-header .inner{display:flex;align-items:center;gap:18px;max-width:1120px;margin:0 auto;padding:14px 20px;transition:.3s}
.ds-header.shrink{backdrop-filter:blur(12px);background:rgba(9,9,11,.82);border-bottom:1px solid var(--border)}
.ds-header.shrink .inner{padding:8px 20px}
.ds-brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.16em}
.ds-brand img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(217,184,121,.5));transition:.3s}
.ds-header.shrink .ds-brand img{width:34px;height:34px}
.ds-brand b{color:var(--gold);font-size:18px}
.ds-nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.ds-nav a{padding:8px 13px;border-radius:var(--r-sm);color:var(--text-secondary);font-size:14px;transition:.15s}
.ds-nav a:hover,.ds-nav a.active{color:#fff;background:rgba(240,107,50,.14)}
@media(max-width:760px){.ds-nav{display:none}}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:13px 20px;border:0;border-radius:var(--r-sm);
  font-weight:800;font-size:15px;letter-spacing:.03em;cursor:pointer;color:#1a0b06;position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--gold),var(--ember));box-shadow:0 10px 28px rgba(240,107,50,.4);transition:.15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(240,107,50,.55)}
.btn.lg{padding:16px 30px;font-size:17px}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--border-hl);box-shadow:none}
.btn.ghost:hover{background:rgba(217,184,121,.1);color:#fff}
.btn .shine{position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);animation:ds-shine 3.5s ease-in-out infinite}
@keyframes ds-shine{0%,60%{left:-120%}80%,100%{left:160%}}

/* ---------- Cards / superfícies ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;backdrop-filter:blur(8px);box-shadow:var(--shadow);transition:.2s}
.card:hover{border-color:var(--border-hl);transform:translateY(-3px)}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;backdrop-filter:blur(6px)}
.stat .n{font-size:30px;font-weight:800;color:#fff;line-height:1}
.stat .l{color:var(--text-secondary);font-size:13px;margin-top:6px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#ffe9d6;border:1px solid var(--border);padding:8px 13px;border-radius:999px;background:var(--surface);backdrop-filter:blur(4px)}

/* ---------- Badges de status ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.14em;padding:6px 12px;border-radius:999px;border:1px solid var(--border)}
.badge .dot{width:8px;height:8px;border-radius:50%}
.badge.online{color:#bdf5c0;border-color:rgba(95,191,106,.4);background:rgba(95,191,106,.1)}.badge.online .dot{background:var(--success);box-shadow:0 0 10px var(--success);animation:ds-pulse 1.6s infinite}
.badge.offline{color:#f3b4ab;border-color:rgba(224,81,63,.4);background:rgba(224,81,63,.1)}.badge.offline .dot{background:var(--danger)}
.badge.maint{color:#f3dca0;border-color:rgba(240,192,74,.4);background:rgba(240,192,74,.1)}.badge.maint .dot{background:var(--warning)}
@keyframes ds-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ---------- Inputs ---------- */
.inp{width:100%;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--border);background:rgba(9,9,11,.75);color:var(--text-primary);font-size:15px;outline:none;transition:.2s}
.inp:focus{border-color:var(--ember);box-shadow:0 0 0 3px rgba(240,107,50,.18)}
label.lbl{display:block;margin:10px 0 5px;color:var(--text-secondary);font-size:13px}

/* ---------- Tabelas ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--text-secondary);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border)}
.tbl td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.05)}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.rank-medal{font-weight:800}
.rank-1{color:#ffd24d}.rank-2{color:#d8d8e0}.rank-3{color:#cd8e52}

/* ---------- Seções / títulos ---------- */
.section{position:relative;z-index:2;padding:70px 0}
.eyebrow{text-align:center;letter-spacing:.3em;color:var(--ember);font-size:12px;text-transform:uppercase;margin-bottom:10px;font-family:var(--font-ui);font-weight:700}
.sec-title{text-align:center;font-size:clamp(26px,4vw,40px);color:#fff;margin:0 0 10px;text-shadow:0 2px 20px rgba(0,0,0,.7)}
.sec-sub{text-align:center;color:var(--text-secondary);max-width:620px;margin:0 auto 34px}

/* ---------- Grids ---------- */
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- Motion util ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.float{animation:ds-float 7s ease-in-out infinite}
@keyframes ds-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.count{font-variant-numeric:tabular-nums}

/* ---------- Toasts ---------- */
#ds-toasts{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{min-width:240px;max-width:360px;padding:13px 16px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--border);backdrop-filter:blur(10px);box-shadow:var(--shadow);color:var(--text-primary);font-size:14px;animation:ds-slidein .3s ease}
.toast.success{border-color:rgba(95,191,106,.5)}.toast.error{border-color:rgba(224,81,63,.5)}.toast.warning{border-color:rgba(240,192,74,.5)}.toast.info{border-color:rgba(90,166,240,.5)}
@keyframes ds-slidein{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}