/* Vexoria — Oferenda Diária (prêmio de login), visual novo (Claude, 21/10). JS: client/src/login-rewards.js
   Arte: fx/bau_chefe.png (8 quadros × 3 cores, 24×28), ui/login/moldura.png, medalhao.png, placa.png, botao_*.png.
   Pixel art sempre em escala inteira (2×, 3×, 4×). Pix só em 16/32px. */
#login-calendar{position:fixed;inset:0;z-index:110;display:flex;overflow:auto;padding:40px 12px 16px;pointer-events:auto;
  background:radial-gradient(ellipse at 50% 45%,#2a1640aa,#07040bee 70%);animation:lc-fade .35s ease-out}
#login-calendar.hidden{display:none}
@keyframes lc-fade{from{opacity:0}}

/* ---------- a moldura ---------- */
#login-calendar .lc-box{position:relative;margin:auto;width:min(820px,100%);padding:44px 22px 20px;color:#e3dcef;text-align:center;
  border:32px solid transparent;border-image:url(/client/assets/ui/login/moldura.png) 16 / 32px stretch;image-rendering:pixelated;
  background:radial-gradient(ellipse at 50% 30%,#3a2654 0,#21172f 55%,#170f22 100%) padding-box;
  box-shadow:0 20px 60px #000c;animation:lc-rise .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes lc-rise{from{opacity:0;transform:translateY(24px) scale(.94)}}
/* pontinhos da textura da moldura repetidos no fundo, bem fracos */
#login-calendar .lc-box:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:radial-gradient(#5a447a 1px,transparent 1.5px) 0 0/8px 8px;mask:linear-gradient(#000,transparent 70%)}

/* medalhão dourado com o número do dia, pendurado no topo */
#login-calendar .lc-medal{position:absolute;left:50%;top:-74px;width:80px;height:80px;transform:translateX(-50%);display:grid;place-items:center;
  background:url(/client/assets/ui/login/medalhao.png) -80px 0/160px 80px no-repeat;image-rendering:pixelated;filter:drop-shadow(0 4px 0 #0d0914) drop-shadow(0 0 14px #f7d77a66)}
#login-calendar .lc-medal span{font:32px Pix,monospace;color:#fff3c4;text-shadow:2px 2px 0 #1a1126,-2px 0 0 #1a1126,0 -2px 0 #1a1126;margin-top:-2px}

#login-calendar header small{display:block;font:16px Pix,monospace;letter-spacing:2px;color:#d69a34;-webkit-font-smoothing:none}
#login-calendar header h2{margin:2px 0 4px;font:32px Pix,monospace;color:#fff3c4;letter-spacing:1px;-webkit-font-smoothing:none;
  text-shadow:2px 2px 0 #0d0914,0 0 18px #f7d77a55}
#login-calendar header p{margin:0;font:14px Txt,sans-serif;color:#b9a8d0}#login-calendar header p b{color:#f7d77a}

/* ---------- a fileira de baús ---------- */
.lc-track{position:relative;display:grid;grid-template-columns:repeat(6,1fr) 1.25fr;align-items:start;gap:4px;list-style:none;margin:10px 0 6px;padding:0 4px}
/* trilho de pedra por trás das bases, com ouro até o dia de hoje */
.lc-track:before{content:"";position:absolute;left:6%;right:6%;top:124px;height:6px;background:#0d0914;box-shadow:inset 0 2px #2c2140,0 2px #3d2c56}
.lc-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.lc-pedestal{position:relative;height:128px;width:100%;display:flex;align-items:flex-end;justify-content:center}
/* sombra oval embaixo do baú */
.lc-pedestal:after{content:"";position:absolute;bottom:-4px;left:50%;width:64px;height:10px;transform:translateX(-50%);background:#0007;border-radius:50%;z-index:0}

.lc-chest{--s:3;--fw:calc(24px*var(--s));position:relative;z-index:1;display:block;width:var(--fw);height:calc(28px*var(--s));
  background:url(/client/assets/fx/bau_chefe.png) 0 calc(-28px*var(--s)*var(--row,1))/calc(192px*var(--s)) calc(84px*var(--s)) no-repeat;
  image-rendering:pixelated;transform-origin:50% 100%}
.lc-day.big .lc-chest{--s:4}
.lc-day.big .lc-pedestal:after{width:88px}

/* já pegos: abertos, mais apagados, com o selo verde */
.lc-day.done .lc-chest{background-position-x:calc(var(--fw)*-6);filter:saturate(.45) brightness(.62)}
.lc-check{position:absolute;z-index:2;bottom:-6px;left:calc(50% + 18px);width:28px;height:28px;background:#2b4a1e;border:2px solid #0d0914;box-shadow:inset 0 0 0 2px #93b46a,0 2px 0 #0d0914}
.lc-check:before{content:"";position:absolute;left:6px;top:4px;width:6px;height:11px;border:solid #e6ffc9;border-width:0 4px 4px 0;transform:rotate(40deg)}
/* futuros: fechados, na penumbra */
.lc-day.next .lc-chest{filter:brightness(.5) saturate(.6)}
.lc-day.next.big .lc-chest{filter:brightness(.62) saturate(.8);animation:lc-shine 2.4s steps(4,jump-none) infinite}

/* hoje: luz por trás, brilho no metal, depois treme e abre */
.lc-day.today .lc-pedestal:before{content:"";position:absolute;z-index:0;left:50%;bottom:-6px;width:170px;height:170px;margin-left:-85px;opacity:0;
  background:repeating-conic-gradient(from 0deg,#f7d77a55 0 10deg,transparent 10deg 30deg);
  mask:radial-gradient(circle,#000 18%,transparent 66%);transition:opacity .4s;animation:lc-spin 9s linear infinite}
.lc-day.today .lc-chest{animation:lc-shine 1s steps(4,jump-none) infinite,lc-bob 1.4s ease-in-out infinite}
.lc-shaking .lc-day.today .lc-chest{animation:lc-shine .3s steps(4,jump-none) infinite,lc-shake .12s linear infinite}
.lc-opened .lc-day.today .lc-chest{background-position-x:calc(var(--fw)*-7);animation:lc-open .36s steps(4,jump-none),lc-pop .45s cubic-bezier(.2,1.6,.4,1);filter:drop-shadow(0 0 10px #f7d77acc)}
.lc-opened .lc-day.today .lc-pedestal:before{opacity:1}
.lc-day.today small{color:#f7d77a!important}

@keyframes lc-shine{from{background-position-x:0}to{background-position-x:calc(var(--fw)*-3)}}
@keyframes lc-open{from{background-position-x:calc(var(--fw)*-4)}to{background-position-x:calc(var(--fw)*-7)}}
@keyframes lc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lc-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) translateX(-2px)}75%{transform:rotate(4deg) translateX(2px)}}
@keyframes lc-pop{0%{transform:scale(1)}40%{transform:scale(1.18,.86)}70%{transform:scale(.94,1.1)}100%{transform:scale(1)}}
@keyframes lc-spin{to{transform:rotate(360deg)}}

/* faíscas quadradas que saem do baú */
.lc-spark{position:absolute;z-index:3;left:50%;bottom:40px;width:6px;height:6px;margin-left:-3px;background:var(--c);box-shadow:0 0 6px var(--c);
  animation:lc-spark .8s cubic-bezier(.1,.7,.3,1) forwards;pointer-events:none}
@keyframes lc-spark{0%{transform:translate(0,0) scale(1.4);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.4);opacity:0}}

/* rótulo do dia + prêmios em miniatura */
.lc-day small{font:16px Pix,monospace;color:#8e7fa6;letter-spacing:1px;-webkit-font-smoothing:none;margin-top:4px}
.lc-day.done small{color:#93b46a}
.lc-mini{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;min-height:32px}
.lc-mini span{position:relative;display:inline-flex;align-items:center}
.lc-mini img,.lc-mini .lc-bone{width:32px;height:32px;image-rendering:pixelated}
.lc-mini .lc-bone{width:22px;height:22px;margin:5px 1px}
.lc-mini em{font:normal 16px Pix,monospace;color:#fff3c4;text-shadow:1px 1px 0 #0d0914,-1px 0 0 #0d0914;-webkit-font-smoothing:none}
.lc-mini img+em{position:absolute;right:-4px;bottom:-4px}
.lc-day.done .lc-mini{opacity:.45;filter:grayscale(.6)}
.lc-day.next .lc-mini{opacity:.8}

/* ---------- placa com o que você ganhou ---------- */
.lc-reveal{position:relative;margin:14px auto 0;max-width:560px;padding:10px 16px 12px;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.4,1);
  border:16px solid transparent;border-image:url(/client/assets/ui/login/placa.png) 8 / 16px stretch;background:#150e1e padding-box;image-rendering:pixelated}
.lc-revealed .lc-reveal{opacity:1;transform:none}
.lc-eyebrow{display:block;font:16px Pix,monospace;letter-spacing:2px;color:#d69a34;-webkit-font-smoothing:none}
.lc-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;list-style:none;margin:8px 0 0;padding:0}
.lc-chips li{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;opacity:0}
.lc-revealed .lc-chips li{animation:lc-chip .4s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:calc(var(--i)*.14s + .1s)}
@keyframes lc-chip{from{opacity:0;transform:translateY(8px) scale(.6)}to{opacity:1;transform:none}}
.lc-chips img,.lc-chips .lc-bone{grid-row:span 2;width:48px;height:48px;image-rendering:pixelated;filter:drop-shadow(0 3px 0 #0d0914) drop-shadow(0 0 8px #f7d77a44)}
.lc-chips .lc-bone{width:36px;height:36px;margin:6px}
.lc-chips b{font:32px/1 Pix,monospace;color:#fff3c4;text-shadow:2px 2px 0 #0d0914;-webkit-font-smoothing:none}
.lc-chips small{font:13px Txt,sans-serif;color:#c9b8dd}
.lc-label{display:block;margin-top:6px;font:18px Txt,sans-serif;color:#fff3c4}
.lc-mail{margin:8px 0 0;font:13px Txt,sans-serif;color:#ff9a9a}

/* ---------- rodapé ---------- */
#login-calendar footer{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.lc-tomorrow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin:0;font:13px Txt,sans-serif;color:#b9a8d0}
.lc-tomorrow>span:first-child{font:16px Pix,monospace;color:#8e7fa6;letter-spacing:1px;-webkit-font-smoothing:none}
.lc-tomorrow .lc-mini{min-height:0}.lc-tomorrow .lc-mini img{width:32px;height:32px}
.lc-tomorrow em{font-style:normal;color:#e3dcef}
.lc-rule{margin:0;font:12px Txt,sans-serif;color:#7d6f94}
#login-calendar .lc-go{margin:10px 0 0;min-width:232px;height:48px;padding:0 24px;cursor:pointer;
  font:16px Pix,monospace;letter-spacing:1px;color:#fff3c4;text-shadow:2px 2px 0 #4a0d18;-webkit-font-smoothing:none;
  background:none;border:8px solid transparent;border-image:url(/client/assets/ui/login/botao_n.png) 4 fill / 8px stretch;image-rendering:pixelated;
  box-shadow:0 4px 0 #0d0914,0 0 0 2px #0d0914}
#login-calendar .lc-go:hover,#login-calendar .lc-go:focus-visible{border-image-source:url(/client/assets/ui/login/botao_h.png);outline:none;box-shadow:0 4px 0 #0d0914,0 0 0 2px #0d0914,0 0 18px #e0283f88}
#login-calendar .lc-go:active{border-image-source:url(/client/assets/ui/login/botao_p.png);transform:translateY(2px);box-shadow:0 2px 0 #0d0914,0 0 0 2px #0d0914}
.lc-revealed .lc-go{animation:lc-ready 1.6s ease-in-out .6s infinite}
@keyframes lc-ready{0%,100%{filter:none}50%{filter:brightness(1.18)}}

/* ---------- telas menores ---------- */
@media (max-width:760px){
  #login-calendar .lc-box{padding:40px 8px 14px;border-width:24px;border-image-width:24px}
  .lc-track{grid-template-columns:repeat(4,1fr);row-gap:14px}.lc-track:before{display:none}
  .lc-chest{--s:2}.lc-day.big .lc-chest{--s:3}
  .lc-pedestal{height:88px}.lc-check{left:calc(50% + 10px)}
  .lc-day.today .lc-pedestal:before{width:120px;height:120px;margin-left:-60px}
  .lc-mini img{width:24px;height:24px}
  #login-calendar header h2{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  #login-calendar *,#login-calendar .lc-box{animation:none!important;transition:none!important}
  .lc-chips li{opacity:1}
}