/* =========================================================
   LOOTBOX — chest opening overlay (js/lootbox.js).
   Self-contained: a fixed full-viewport layer outside #screen,
   with its own --u so it reads in landscape, portrait and on
   small phones. Reuses .plate .socket .pips .card-band .cname
   .hazard .lv-title .btn from style.css.
   ========================================================= */
#lootbox{
  --u:min(100vw / 560, 100vh / 330);
  --tc:#ffb347; --tc2:#ffe6a6; --tdark:#5a2206;
  --shake:720ms;
  position:fixed; inset:0; z-index:300;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--u) * 7);
  padding:max(env(safe-area-inset-top), calc(var(--u) * 10)) max(env(safe-area-inset-right), calc(var(--u) * 12))
          max(env(safe-area-inset-bottom), calc(var(--u) * 10)) max(env(safe-area-inset-left), calc(var(--u) * 12));
  font:calc(var(--u) * 10)/1.15 var(--FT);
  color:var(--bone); text-align:center;
  overflow:hidden; cursor:pointer; touch-action:none;
  user-select:none; -webkit-user-select:none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, color-mix(in srgb, var(--tc) 16%, transparent), transparent 70%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,.65) 100%),
    rgba(6,3,2,.8);
}
#lootbox.hidden{display:none;}
#lootbox[data-tier=gold]{--tc:#ffd35a; --tc2:#fff6d0; --tdark:#5a4206;}
#lootbox[data-tier=hell]{--tc:#ff3a12; --tc2:#ffb347; --tdark:#4a0602;}
#screen[data-state=lootbox] #hud{opacity:.35;}

/* ---------- header */
#lootbox .lb-head{display:flex; align-items:center; gap:calc(var(--u) * 8); z-index:2; transition:opacity .25s;}
#lootbox .lb-head .hazard{width:calc(var(--u) * 46);}
#lootbox .lb-title{font-size:calc(var(--u) * 30); white-space:nowrap; text-shadow:0 var(--u) 0 #3a0703, 0 calc(var(--u) * 2) 0 #1a0201, 0 calc(var(--u) * 3) 0 #000,
  calc(var(--u) * 1.5) 0 0 #000, calc(var(--u) * -1.5) 0 0 #000, 0 calc(var(--u) * -1.5) 0 #000, 0 0 calc(var(--u) * 16) color-mix(in srgb, var(--tc) 60%, transparent);}
#lootbox[data-tier=gold] .lb-title::before{background-image:linear-gradient(180deg, #fffbe8 25%, #ffe27a 42%, #e9a21e 60%, #7a4a06 80%);}
#lootbox[data-tier=hell] .lb-title::before{background-image:linear-gradient(180deg, #ffe0c0 20%, #ff8a3a 40%, #e0200a 60%, #5a0602 80%);}
#lootbox .lb-sub{margin-top:calc(var(--u) * -4); z-index:2; font:calc(var(--u) * 10)/1 var(--FT); letter-spacing:.12em; text-transform:uppercase; color:var(--tc); text-shadow:0 var(--u) 0 #000;}

/* ---------- crate: sits dead centre, shakes harder and glows hotter until it blows */
#lootbox .lb-crate{
  position:absolute; left:50%; top:50%; z-index:1;
  width:calc(var(--u) * 120); aspect-ratio:18 / 14;
  translate:-50% -50%;
  animation:lbRattle .09s linear infinite, lbSwell var(--shake) cubic-bezier(.5,0,.9,.4) forwards;
}
#lootbox .lb-crate canvas{position:absolute; left:0; width:100%; image-rendering:pixelated; filter:drop-shadow(0 calc(var(--u) * 3) 0 rgba(0,0,0,.6));}
#lootbox .lb-lid{top:0; height:calc(100% * 6 / 14); z-index:2;}
#lootbox .lb-body{top:calc(100% * 6 / 14); height:calc(100% * 8 / 14);}
#lootbox .lb-stencil{position:absolute; left:0; right:0; top:104%; font:calc(var(--u) * 11)/1 var(--FD); letter-spacing:.4em; color:color-mix(in srgb, var(--tc) 70%, #000); opacity:.75; text-shadow:0 var(--u) 0 #000;}
#lootbox .lb-stencil::after{content:attr(data-tag);}
#lootbox .lb-glow{
  position:absolute; inset:-60% -45%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--tc2) 70%, transparent) 0, color-mix(in srgb, var(--tc) 45%, transparent) 30%, transparent 65%);
  animation:lbGlow var(--shake) ease-in forwards;
}
#lootbox[data-tier=hell] .lb-crate canvas{filter:drop-shadow(0 calc(var(--u) * 3) 0 rgba(0,0,0,.6)) sepia(.4) saturate(2.2) hue-rotate(-28deg);}
#lootbox[data-tier=gold] .lb-crate{animation-duration:.07s, var(--shake);}
#lootbox[data-tier=hell] .lb-crate{animation-duration:.06s, var(--shake);}
@keyframes lbRattle{
  0%{transform:translate(0,0) rotate(0);} 25%{transform:translate(calc(var(--u) * -1.2 * var(--k, 1)), calc(var(--u) * .5)) rotate(-1.5deg);}
  50%{transform:translate(calc(var(--u) * .8), calc(var(--u) * -.8)) rotate(1deg);} 75%{transform:translate(calc(var(--u) * 1.3), calc(var(--u) * .4)) rotate(2deg);}
  100%{transform:translate(0,0) rotate(0);}
}
@keyframes lbSwell{from{scale:.8; filter:brightness(.8);} to{scale:1.12; filter:brightness(1.5) drop-shadow(0 0 calc(var(--u) * 6) var(--tc));}}
@keyframes lbGlow{from{opacity:.1; scale:.5;} 80%{opacity:.75;} to{opacity:1; scale:1.15;}}
/* burst: the lid is gone, the body sinks back behind the loot */
#lootbox.burst .lb-crate{animation:lbSpent .6s ease-out forwards;}
#lootbox.burst .lb-glow{animation:lbGlowOut 1.2s ease-out forwards;}
#lootbox.burst .lb-stencil{opacity:0;}
@keyframes lbSpent{from{scale:1.15; filter:brightness(2.5);} to{scale:1.35; opacity:.16; filter:brightness(.8);}}
@keyframes lbGlowOut{from{opacity:1; scale:1.2;} to{opacity:.35; scale:2.4;}}

/* light shafts + flash + particles */
#lootbox .lb-rays{
  position:absolute; left:50%; top:50%; width:max(140vw, 140vh); aspect-ratio:1; translate:-50% -50%; z-index:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 22%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle, #000 0, rgba(0,0,0,.5) 25%, transparent 60%); mask:radial-gradient(circle, #000 0, rgba(0,0,0,.5) 25%, transparent 60%);
  opacity:0;
}
#lootbox.burst .lb-rays{animation:lbRaysIn .5s ease-out forwards, lbSpin 24s linear infinite;}
#lootbox[data-tier=normal].burst .lb-rays{animation:lbRaysIn .5s ease-out forwards, lbSpin 24s linear infinite; --ro:.45;}
@keyframes lbRaysIn{from{opacity:0; scale:.3;} to{opacity:var(--ro, .85); scale:1;}}
@keyframes lbSpin{to{rotate:360deg;}}
#lootbox .lb-flash{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; background:radial-gradient(circle, #fff 0, var(--tc2) 30%, color-mix(in srgb, var(--tc) 60%, transparent) 60%, transparent 100%);}
#lootbox.burst .lb-flash{animation:lbFlash .5s ease-out;}
@keyframes lbFlash{from{opacity:.95;} to{opacity:0;}}
#lootbox .lb-ring{position:absolute; left:50%; top:50%; z-index:4; width:calc(var(--u) * 120); aspect-ratio:1; translate:-50% -50%; border-radius:50%; pointer-events:none; opacity:0;
  box-shadow:0 0 0 calc(var(--u) * 3) var(--tc2), 0 0 calc(var(--u) * 14) calc(var(--u) * 4) var(--tc), inset 0 0 calc(var(--u) * 14) calc(var(--u) * 2) var(--tc);}
#lootbox.burst .lb-ring{animation:lbRing .55s cubic-bezier(.1,.8,.3,1);}
#lootbox[data-tier=hell].burst .lb-ring, #lootbox[data-tier=gold].burst .lb-ring{animation-duration:.75s;}
@keyframes lbRing{from{opacity:1; scale:.15;} 60%{opacity:.8;} to{opacity:0; scale:3.2;}}
#lootbox .lb-fx{position:fixed; inset:0; z-index:4; pointer-events:none; overflow:hidden;}
#lootbox .lb-spark{position:absolute; width:calc(var(--u) * 3); height:calc(var(--u) * 3); box-shadow:0 0 calc(var(--u) * 4) currentColor;}
#lootbox .lb-gib{position:absolute; image-rendering:pixelated; height:auto;}

/* ---------- reward cards */
#lootbox .lb-cards{position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:calc(var(--u) * 10); justify-content:center; align-items:stretch; width:100%;}
#lootbox .lb-card{
  --accent:var(--blood-hi);
  position:relative;
  flex:0 1 calc(var(--u) * 150);
  min-height:calc(var(--u) * 150);
  display:flex; flex-direction:column; align-items:center;
  padding:0 calc(var(--u) * 8) calc(var(--u) * 10);
  opacity:0;
}
#lootbox .lb-card.out{opacity:1;}
#lootbox .lb-card.passive{--accent:#3d8ec9;}
#lootbox .lb-card.k-evolve{--accent:var(--gold);}
#lootbox .lb-card.k-union{--accent:#ff7a1a;}
#lootbox .lb-card.k-xp{--accent:#c8301c;}
#lootbox[data-tier=gold] .lb-card{box-shadow:0 0 0 var(--u) #050404, 0 0 0 calc(var(--u) * 2) #8a6a1a, 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0,0,0,.65);}
#lootbox .lb-card.settled.k-evolve, #lootbox .lb-card.settled.k-union{animation:lbLand .45s cubic-bezier(.2,1.5,.4,1), lbHot 1.1s ease-in-out .45s infinite alternate;}
#lootbox .lb-card .newtag{
  position:absolute; right:calc(var(--u) * -3); top:calc(var(--u) * 20); z-index:2;
  padding:calc(var(--u) * 2) calc(var(--u) * 5) calc(var(--u) * 1);
  font:calc(var(--u) * 9)/1 var(--FD); letter-spacing:.08em; color:#140c02;
  background:repeating-linear-gradient(-45deg, var(--hazard) 0 calc(var(--u) * 3), #f4c640 calc(var(--u) * 3) calc(var(--u) * 6));
  box-shadow:0 0 0 var(--u) #050404, calc(var(--u) * 2) calc(var(--u) * 2) 0 rgba(0,0,0,.5);
  transform:rotate(6deg);
  opacity:0;
}
#lootbox .lb-card.settled .newtag{opacity:1; transition:opacity .2s;}
#lootbox .lb-card .socket{margin:calc(var(--u) * 12) 0 calc(var(--u) * 7); overflow:hidden;}
#lootbox .lb-card.spinning .socket{box-shadow:inset 0 0 0 var(--u) #050404, inset 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0,0,0,.9), 0 0 0 calc(var(--u) * 2) var(--tc), 0 0 calc(var(--u) * 10) var(--tc);}
#lootbox .lb-card.spinning .socket canvas{opacity:.85;}
#lootbox .lb-card.settled .socket{animation:lbSocket .5s ease-out;}
#lootbox .lb-info{display:flex; flex-direction:column; align-items:center; min-width:0; flex:1;}
#lootbox .lb-card:not(.settled) .lb-info{visibility:hidden;}
#lootbox .lb-card.settled{animation:lbLand .4s cubic-bezier(.2,1.5,.4,1);}
#lootbox .lb-card.settled .lb-info{animation:lbInfo .3s ease-out backwards;}
#lootbox .cname{font-size:calc(var(--u) * 14); overflow-wrap:anywhere;}
#lootbox .lb-lvl{margin:calc(var(--u) * 5) 0 calc(var(--u) * 6);}
#lootbox .lb-recipe{display:flex; align-items:center; gap:calc(var(--u) * 3);}
#lootbox .lb-recipe canvas{width:calc(var(--u) * 18); height:calc(var(--u) * 18); background:#0b0807; box-shadow:0 0 0 var(--u) #3c3d40;}
#lootbox .lb-recipe b{font:calc(var(--u) * 12)/1 var(--FD); color:var(--ember);}
#lootbox .lb-xp{font:calc(var(--u) * 15)/1 var(--FD); color:#ff8a6a; text-shadow:0 0 calc(var(--u) * 8) rgba(255,60,30,.6), 0 var(--u) 0 #000;}
#lootbox .lb-eff{font:calc(var(--u) * 10.5)/1.25 var(--FT); color:var(--bone); max-width:calc(var(--u) * 134);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;}
#lootbox .lb-eff b{font:calc(var(--u) * 12)/1 var(--FD); color:var(--gold); letter-spacing:.03em;}
#lootbox .lb-eff em{font:calc(var(--u) * 10)/1 var(--FD); font-style:normal; color:var(--gold); letter-spacing:.08em;}
@keyframes lbLand{from{scale:1.14; filter:brightness(2.2);} to{scale:1; filter:none;}}
@keyframes lbHot{from{box-shadow:0 0 0 var(--u) #050404, 0 0 0 calc(var(--u) * 2) #8a6a1a, 0 0 calc(var(--u) * 6) rgba(255,190,60,.3);}
  to{box-shadow:0 0 0 var(--u) #050404, 0 0 0 calc(var(--u) * 2) var(--accent), 0 0 calc(var(--u) * 18) calc(var(--u) * 3) color-mix(in srgb, var(--accent) 55%, transparent);}}
@keyframes lbSocket{from{box-shadow:inset 0 0 0 var(--u) #050404, 0 0 0 calc(var(--u) * 2) #fff, 0 0 calc(var(--u) * 20) calc(var(--u) * 4) var(--accent);}}
@keyframes lbInfo{from{opacity:0; transform:translateY(calc(var(--u) * 4));}}

/* ---------- footer */
#lootbox .lb-foot{position:relative; z-index:3; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:calc(var(--u) * 8); min-height:calc(var(--u) * 18);}
#lootbox .lb-btn{pointer-events:none; min-width:calc(var(--u) * 80);}
#lootbox:not(.done) .lb-btn{filter:saturate(.3) brightness(.75);}
#lootbox.done .lb-btn{animation:lbPulse .8s ease-in-out infinite alternate;}
@keyframes lbPulse{to{filter:brightness(1.35); box-shadow:inset 0 0 0 var(--u) var(--gold), 0 0 calc(var(--u) * 10) rgba(255,140,40,.6);}}
#lootbox .lb-heal{font:calc(var(--u) * 12)/1 var(--FD); letter-spacing:.06em; color:var(--toxic); text-shadow:0 0 calc(var(--u) * 6) rgba(92,255,106,.5), 0 var(--u) 0 #000;}
#lootbox .lb-hint{font:calc(var(--u) * 9)/1 var(--FT); letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim);}
@media (pointer:coarse){ #lootbox .lb-btn kbd{display:none;} }

/* ---------- portrait / narrow: cards stack as horizontal rows */
@media (orientation:portrait), (max-aspect-ratio:4/3){
  #lootbox{--u:min(100vw / 305, 100vh / 540);}
  #lootbox .lb-head .hazard{width:calc(var(--u) * 22);}
  #lootbox .lb-title{font-size:calc(var(--u) * 28);}
  #lootbox .lb-crate{width:calc(var(--u) * 130);}
  /* keep room for the crate + stencil even when a single short card follows */
  #lootbox .lb-cards{flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:center; gap:calc(var(--u) * 8); min-height:calc(var(--u) * 140);}
  #lootbox .lb-card{
    flex:0 0 auto; width:min(100%, calc(var(--u) * 300)); min-height:calc(var(--u) * 96);
    display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr; column-gap:calc(var(--u) * 10);
    padding:0 calc(var(--u) * 10) calc(var(--u) * 8); text-align:left;
  }
  #lootbox .lb-card .card-band{grid-column:1 / -1; margin:0 calc(var(--u) * -10); text-align:center;}
  #lootbox .lb-card .socket{margin:calc(var(--u) * 8) 0 0; align-self:start;}
  #lootbox .lb-info{align-items:flex-start; justify-content:center; padding-top:calc(var(--u) * 7);}
  #lootbox .lb-lvl{margin:calc(var(--u) * 4) 0 calc(var(--u) * 4);}
  #lootbox .pips{justify-content:flex-start;}
  #lootbox .lb-eff{max-width:none; font-size:calc(var(--u) * 11);}
  #lootbox .cname{font-size:calc(var(--u) * 15);}
}

@media (prefers-reduced-motion:reduce){
  #lootbox .lb-crate{animation:none;}
  #lootbox.burst .lb-rays{animation:lbRaysIn .01s forwards;}
}