/* =========================================================
   EmpireMU - Minimal Gold UI (SAFE OVERRIDES)
   - Does NOT change any critical sizes used by the roulette.
   - Only colors/shadows/typography + small UX hints.
   ========================================================= */

:root{
  --empire-gold: #c4ab3e;          /* base do seu template (já usada no coin_box) */
  --empire-gold-2: #e7d07a;        /* brilho suave */
  --empire-gold-soft: rgba(196,171,62,.22);
  --empire-gold-soft2: rgba(196,171,62,.12);

  --empire-bg: #0b0b10;
  --empire-panel: rgba(12, 10, 6, .78);
  --empire-panel-2: rgba(18, 14, 6, .90);

  --empire-text: rgba(255,255,255,.88);
  --empire-muted: rgba(255,255,255,.62);

  --empire-line: rgba(196,171,62,.22);
  --empire-line-2: rgba(196,171,62,.35);

  --empire-shadow: 0 14px 40px rgba(0,0,0,.55);
}

/* Linha central e setas (troca o azul por dourado, mantém dimensões) */
.lootbox-case-line{
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.lootbox-case-line::before,
.lootbox-case-line::after{
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.lootbox-case-line-dash{
  border-color: rgba(196,171,62,.55) !important; /* antes: dashed blue */
  opacity: .75;
}

/* Janela do scrolled: mantém height/width/top/transition (calculado) */
.scrolled{
  position: relative;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  filter: saturate(1.05);
}
.scrolled::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* overlay minimal: melhora contraste sem mexer no layout */
  background: radial-gradient(120% 140% at 50% -10%, rgb(196 171 62 / 41%), #00000082 55%), linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0));
  z-index: 1;
}
.scrolled .lootbox,
.scrolled .lootbox-case-window,
.scrolled .lootbox-case-spinnable{
  position: relative;
  z-index: 2;
}

/* Cards dos itens (mantém 182x127 e padding 8px do CSS original) */
.lootbox-case-item{
  border-radius: 14px !important;
  border: 1px solid var(--empire-line) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 10px 22px rgba(0,0,0,.45) !important;
  overflow: hidden;
}
.lootbox-case-item::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(140% 120% at 50% 0%, rgba(196,171,62,.10), transparent 58%);
  opacity: .9;
}
.lootbox-content{
  /* já é relative no arquivo original, aqui só padroniza layout visual */
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

/* imagem do item */
.lootbox-case-item .image img{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}

/* Nome do item: mais limpo e legível */
.lootbox-case-item .name{
  letter-spacing: .3px;
}
.lootbox-case-item .name p:nth-child(1){
  color: var(--empire-text) !important; /* antes: #fcd4c0 */
  text-shadow: 0 2px 10px rgba(0,0,0,.55) !important;
  font-weight: 700;
}
.item-name{
  color: var(--empire-muted);
}

/* Item vencedor: destaque dourado (antes: borda verde) */
.wonItem{
  border-color: var(--empire-gold) !important;
  box-shadow:
    0 0 0 1px rgba(196,171,62,.45),
    0 0 26px rgba(196,171,62,.18) !important;
}

/* Caixa (CTA) - sem alterar tamanho; só melhora feedback/legibilidade */
.caixa{
  filter: drop-shadow(0 24px 55px rgba(0,0,0,.62));
}
.caixa:hover{
  transform: translateY(-2px);
  filter: drop-shadow(0 28px 65px rgba(0,0,0,.68));
}


/* ======= UI do topo (user-info-box + botões) =======
   Esses estilos existem inline no view.wheel.php, então aqui usamos !important. */
.user-info-box{
  background: linear-gradient(180deg, var(--empire-panel), var(--empire-panel-2)) !important;
  border: 1px solid var(--empire-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--empire-shadow) !important;
  color: var(--empire-text) !important;
  backdrop-filter: blur(8px);
}
.user-line{ color: var(--empire-muted) !important; }
.user-name{
  color: var(--empire-gold-2) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.user-badge{
  background: linear-gradient(135deg, rgba(196,171,62,.95), rgba(138,110,18,.95)) !important;
  box-shadow: 0 10px 22px rgba(196,171,62,.18) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.user-label{ color: var(--empire-text) !important; }
#mastery-points-feedback{ color: rgba(231,208,122,.85) !important; }

/* Botões (Buy Keys / My Rewards / etc) - minimal dourado */
.fancy-btn{
  background: linear-gradient(135deg, rgba(196,171,62,.92), rgba(138,110,18,.92)) !important;
  color: rgba(10,10,12,.92) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 0 18px rgba(196,171,62,.14) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  text-decoration: none !important;
}
.fancy-btn:hover{
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,.62), 0 0 22px rgba(196,171,62,.20) !important;
}
.fancy-btn::after{ opacity: .22 !important; }

/* Slider dos últimos prêmios: deixa mais clean e dourado */
.sliderm::before,
.sliderm::after{
  background: linear-gradient(to right, rgb(103 79 33 / 17%) 0%0%, rgba(11, 11, 16, 0) 100%100%) !important;
}
.sliderm .slidem{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}

/* ===== Raridade / grid "Possible Rewards" (o view usa pseudo-border azul). ===== */
.lootbox-case-item::before{
  /* sobrescreve o gradient azul do inline */
  background: linear-gradient(135deg,
    rgba(196,171,62,.38),
    rgba(196,171,62,.12),
    rgba(196,171,62,.38)
  ) !important;
  opacity: .50 !important;
}
.lootbox-case-item:hover{
  /* remove glow azul do inline e mantém um destaque sutil */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 12px 28px rgba(0,0,0,.62),
    0 0 18px rgba(196,171,62,.14) !important;
}

/* mantém a ideia de raridade, mas com tons mais "premium" e menos neon */
.luckyItem.common::before      { background: linear-gradient(135deg, rgba(160,170,180,.55), rgba(90,98,108,.22)) !important; }
.luckyItem.rare::before        { background: linear-gradient(135deg, rgba(88,220,190,.55), rgba(20,110,110,.22)) !important; }
.luckyItem.epic::before        { background: linear-gradient(135deg, rgba(180,140,255,.55), rgba(90,50,170,.22)) !important; }
.luckyItem.legendary::before   { background: linear-gradient(135deg, rgba(231,208,122,.70), rgba(196,171,62,.25)) !important; }
.luckyItem.mythic::before      { background: linear-gradient(135deg, rgba(255,150,210,.55), rgba(170,40,120,.22)) !important; }

/* ===== Aviso flutuante (spin-warning) — troca o azul por dourado, sem mexer no JS ===== */
.spin-float{ filter: drop-shadow(0 14px 40px rgba(0,0,0,.65)) !important; }
.spin-card{
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(196,171,62,.10), rgba(2,2,6,.86)) ,
    linear-gradient(180deg, #0c0a06, #06060a) !important;
  border: 1px solid rgba(196,171,62,.22) !important;
}
.spin-card::before{
  background: conic-gradient(from 0deg, transparent 0 25%, rgba(196,171,62,.22) 40%, transparent 60% 100%) !important;
}
.spin-head{ border-bottom-color: rgba(196,171,62,.18) !important; }
.spin-badge{
  border-color: rgba(196,171,62,.22) !important;
  box-shadow: 0 0 26px rgba(196,171,62,.22) !important;
  background: radial-gradient(100% 100% at 50% 0%, rgba(196,171,62,.16), rgba(0,0,0,0)) !important;
}
.spin-title{
  background: linear-gradient(90deg, var(--empire-gold), var(--empire-gold-2)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color: transparent !important;
}
.spin-hide{
  border-color: rgba(196,171,62,.22) !important;
  background: linear-gradient(180deg, rgba(196,171,62,.18), rgba(196,171,62,.08)) !important;
}
.spin-hide:hover{ box-shadow:0 8px 22px rgba(196,171,62,.22) !important; }
.spin-cta{
  border-color: rgba(196,171,62,.22) !important;
  background: linear-gradient(180deg, rgba(196,171,62,.24), rgba(196,171,62,.12)) !important;
}
.spin-cta:hover{ box-shadow:0 10px 26px rgba(196,171,62,.24) !important; }