/* ===== Loot Diário — estilos base ===== */
:root{
  --bg:#0B1020;
  --text:#F8FAFC;
  --card:#1E293B;
  --purple:#7C3AED;
  --purple-l:#a78bfa;
  --gold:#F5B301;
  --muted:#94a3b8;
  --muted-d:#64748b;
  --muted-l:#cbd5e1;
  --line:rgba(255,255,255,.06);
  --line-p:rgba(124,58,237,.22);
  --display:'Chakra Petch',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{color:#ffd35c}
button{font-family:var(--body)}
::selection{background:var(--purple);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#26324a;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#33405c}

@keyframes revealUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes pulseGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gridmove{from{background-position:0 0}to{background-position:0 60px}}

/* utilitários de layout usados na marcação */
.wrap{max-width:1280px;margin:0 auto;padding:0 26px}
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:26px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.reveal{opacity:0}

/* fundo ambiente */
.bg-amb{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg-amb .g1{position:absolute;top:-160px;left:-120px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(124,58,237,.28),transparent 70%);
  filter:blur(20px);animation:pulseGlow 7s ease-in-out infinite}
.bg-amb .g2{position:absolute;top:220px;right:-160px;width:480px;height:480px;
  background:radial-gradient(circle,rgba(245,179,1,.16),transparent 70%);
  filter:blur(20px);animation:pulseGlow 9s ease-in-out infinite}
.bg-amb .grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(124,58,237,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,.05) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(circle at 50% 0,black,transparent 75%);
  mask-image:radial-gradient(circle at 50% 0,black,transparent 75%);
  animation:gridmove 12s linear infinite}

/* carrossel: limita linhas do título/resumo pra o chip não ser cortado */
.hero-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.hero-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* cartões */
.gcard{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.gcard:hover{transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px var(--accent,#7C3AED);
  border-color:var(--accent,#7C3AED)}
.rowcard{transition:.22s}
.rowcard:hover{transform:translateX(4px);border-color:rgba(124,58,237,.5)}
.dealcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.5)}
.steamcard:hover{transform:translateY(-5px);
  box-shadow:0 16px 38px rgba(0,0,0,.5),0 0 0 1px var(--accent,#66c0f4);
  border-color:var(--accent,#66c0f4)}
.gcard:hover .playbtn{transform:translate(-50%,-50%) scale(1.12)}

/* navegação */
.navlink{background:none;border:none;cursor:pointer;font:600 14px 'Manrope';
  color:#cbd5e1;padding:8px 12px;border-radius:8px;transition:.18s;text-decoration:none;
  display:inline-flex;align-items:center;white-space:nowrap}
.navlink:hover{background:rgba(124,58,237,.18);color:#F8FAFC}
.navlink-steam{color:#66c0f4}
.navlink-steam:hover{background:rgba(102,192,244,.16);color:#9fd8ff}

/* botões */
.btn-ghost{transition:.18s}
.btn-ghost:hover{border-color:rgba(245,179,1,.5);color:#fff}
.btn-gold,.btn-purple{transition:.18s}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(245,179,1,.42)}
.btn-purple:hover{transform:translateY(-3px)}
.footlink{transition:.15s;text-decoration:none}
.footlink:hover{color:#F5B301}

/* responsivo */
@media(max-width:1000px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .grid4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .wrap{padding:0 16px}
  .grid3,.grid4{grid-template-columns:1fr}
  .hero-slide{height:360px !important}
  .hero-title{font-size:30px !important}
  .nav-scroll{overflow-x:auto;flex-wrap:nowrap !important}
}

/* ===== painel flutuante da live (Twitch) ===== */
#ld-live{position:fixed;right:20px;bottom:20px;z-index:9999;font-family:var(--body)}
.ld-panel{width:360px;max-width:calc(100vw - 32px);background:#11161f;border:1px solid rgba(145,70,255,.5);border-radius:14px;overflow:hidden;box-shadow:0 22px 55px rgba(0,0,0,.6)}
.ld-head{display:flex;align-items:center;gap:7px;padding:9px 10px 9px 12px;background:linear-gradient(90deg,#9146FF,#5c2bb3);cursor:grab;touch-action:none;user-select:none}
.ld-head:active{cursor:grabbing}
.ld-live-dot{width:8px;height:8px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 8px #ff3b3b;animation:pulseGlow 1.4s infinite;flex-shrink:0}
.ld-live-label{font:800 11px 'Chakra Petch',sans-serif;letter-spacing:1px;color:#fff;flex-shrink:0}
.ld-chan{font:600 12px 'Manrope',sans-serif;color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.ld-head-btns{margin-left:auto;display:flex;gap:4px;flex-shrink:0}
.ld-hbtn{width:24px;height:24px;display:grid;place-items:center;border:none;background:rgba(0,0,0,.25);color:#fff;border-radius:6px;cursor:pointer;font:700 14px/1 'Manrope',sans-serif}
.ld-hbtn:hover{background:rgba(0,0,0,.45)}
.ld-body{position:relative;background:#000;width:100%;aspect-ratio:16/9}
.ld-embed{position:absolute;inset:0}
.ld-embed iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}
.ld-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#0d1119;font:600 12px 'Manrope',sans-serif;color:#94a3b8}
.ld-foot a{color:#b18aff;text-decoration:none;white-space:nowrap}
.ld-foot a:hover{color:#d0b6ff}
.ld-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;color:#cbd5e1;font:500 13px/1.5 'Manrope',sans-serif;background:linear-gradient(160deg,#1a1030,#0d1119)}
.ld-panel.ld-min .ld-body,.ld-panel.ld-min .ld-foot{display:none}
.ld-bubble{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#9146FF,#5c2bb3);border:none;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 30px rgba(145,70,255,.5)}
.ld-bubble:hover{transform:translateY(-2px)}
.ld-hidden{display:none!important}
@media(max-width:640px){ #ld-live{right:10px;bottom:10px} .ld-panel{width:min(300px,calc(100vw - 20px))} }