/* ELIE v5.1.0 — XENO Laser Style System
   Isolated from the locked desktop/mobile foundation. */
.evolution-laser-beam-preview{
  position:absolute;
  z-index:3;
  left:51%;
  top:23.2%;
  width:45%;
  height:auto;
  object-fit:contain;
  object-position:left center;
  opacity:0;
  pointer-events:none;
  transform:translate3d(-5%,0,0) scaleX(.45);
  transform-origin:left center;
}
.evolution-lab[data-category="laserStyles"] .evolution-laser-beam-preview{
  opacity:.94;
  animation:elieLaserLabPulse 1.18s cubic-bezier(.18,.72,.2,1) infinite;
}
.evolution-lab[data-category="laserStyles"] .evolution-orbit{opacity:.16}
.evolution-lab[data-category="laserStyles"] .evolution-test{border-style:dashed}
@keyframes elieLaserLabPulse{
  0%,23%{opacity:0;transform:translate3d(-5%,0,0) scaleX(.22)}
  34%,66%{opacity:.98;transform:translate3d(0,0,0) scaleX(1)}
  82%,100%{opacity:0;transform:translate3d(14%,0,0) scaleX(1.08)}
}

.evolution-upgrades.laser-style-mode{
  display:block;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--green) rgba(46,241,58,.08);
  padding-right:calc(var(--u)*.28);
}
.evolution-upgrades.laser-style-mode::-webkit-scrollbar{width:6px}
.evolution-upgrades.laser-style-mode::-webkit-scrollbar-track{background:rgba(46,241,58,.07)}
.evolution-upgrades.laser-style-mode::-webkit-scrollbar-thumb{background:var(--green);border-radius:999px}
.laser-style-lab{min-width:0;padding-bottom:calc(var(--u)*.25);text-transform:uppercase}
.laser-style-lab-head{
  position:sticky;
  z-index:5;
  top:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(calc(var(--u)*10),34%);
  gap:calc(var(--u)*.85);
  align-items:end;
  padding:0 0 calc(var(--u)*.72);
  margin:0 0 calc(var(--u)*.72);
  background:#000;
  border-bottom:1px solid rgba(46,241,58,.42);
}
.laser-style-lab-head small{display:block;font-size:calc(var(--u)*.46);letter-spacing:.12em;color:rgba(190,255,199,.62)}
.laser-style-lab-head h2{margin:calc(var(--u)*.22) 0 0;font-size:calc(var(--u)*1.3);line-height:.92;letter-spacing:-.025em;color:var(--green)}
.laser-style-lab-head p{margin:calc(var(--u)*.34) 0 0;max-width:52ch;font-size:calc(var(--u)*.46);line-height:1.25;color:rgba(213,255,218,.68)}
.laser-style-lab-head>b{
  display:block;
  padding:calc(var(--u)*.55) calc(var(--u)*.62);
  border:1px solid rgba(46,241,58,.32);
  border-radius:calc(var(--u)*.48);
  font-size:calc(var(--u)*.42);
  line-height:1.25;
  font-weight:600;
  color:rgba(183,255,193,.7);
  text-align:right;
}
.laser-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*.72)}
.laser-style-card{
  position:relative;
  min-width:0;
  padding:calc(var(--u)*.68);
  border:1px solid rgba(46,241,58,.3);
  border-radius:calc(var(--u)*.82);
  background:#000;
  overflow:hidden;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.laser-style-card:before{
  content:"";
  position:absolute;
  left:0;
  top:18%;
  bottom:18%;
  width:3px;
  background:rgba(46,241,58,.22);
}
.laser-style-card:hover,.laser-style-card:focus-within{border-color:rgba(46,241,58,.76);background:rgba(46,241,58,.025)}
.laser-style-card.available{border-color:rgba(46,241,58,.7)}
.laser-style-card.selected{border-color:var(--green);background:rgba(46,241,58,.065)}
.laser-style-card.selected:before{background:var(--green)}
.laser-style-preview{
  position:relative;
  height:calc(var(--u)*4.25);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:0 calc(var(--u)*.5);
  border:1px solid rgba(46,241,58,.22);
  border-radius:calc(var(--u)*.52);
  background:
    linear-gradient(90deg,rgba(46,241,58,.06),transparent 48%),
    repeating-linear-gradient(90deg,transparent 0 calc(var(--u)*1.4),rgba(46,241,58,.045) calc(var(--u)*1.4) calc(var(--u)*1.45));
}
.laser-style-preview:after{content:"";position:absolute;left:calc(var(--u)*.52);right:calc(var(--u)*.52);top:50%;height:1px;background:rgba(46,241,58,.18)}
.laser-style-preview img{position:relative;z-index:2;width:86%;max-height:68%;object-fit:contain;object-position:left center;filter:none}
.laser-style-preview i{position:absolute;z-index:3;right:calc(var(--u)*.38);top:calc(var(--u)*.3);font-style:normal;font-size:calc(var(--u)*.42);letter-spacing:.08em;color:rgba(205,255,211,.7)}
.laser-style-copy{padding:calc(var(--u)*.55) calc(var(--u)*.12) calc(var(--u)*.42);min-height:calc(var(--u)*5.1)}
.laser-style-copy small{display:block;font-size:calc(var(--u)*.4);letter-spacing:.09em;color:rgba(182,255,192,.54)}
.laser-style-copy strong{display:block;margin-top:calc(var(--u)*.2);font-size:calc(var(--u)*.72);line-height:1;color:var(--green)}
.laser-style-copy p{margin:calc(var(--u)*.32) 0 0;font-size:calc(var(--u)*.42);line-height:1.28;text-transform:none;color:rgba(223,255,227,.66)}
.laser-style-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*.28);margin-bottom:calc(var(--u)*.48)}
.laser-style-metrics span{min-width:0;padding:calc(var(--u)*.35) calc(var(--u)*.2);border:1px solid rgba(46,241,58,.18);border-radius:calc(var(--u)*.34);text-align:center}
.laser-style-metrics b{display:block;font-size:calc(var(--u)*.66);line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.laser-style-metrics small{display:block;margin-top:calc(var(--u)*.18);font-size:calc(var(--u)*.34);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(197,255,204,.54)}
.laser-style-action{
  width:100%;
  min-height:calc(var(--u)*2.45);
  padding:0 calc(var(--u)*.56);
  border:1px solid rgba(46,241,58,.44);
  border-radius:calc(var(--u)*.42);
  background:#000;
  color:var(--green);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(var(--u)*.34);
  text-transform:uppercase;
  box-shadow:none;
}
.laser-style-action img{width:calc(var(--u)*1.25);height:calc(var(--u)*1.58);object-fit:contain}
.laser-style-action em{font-style:normal;font-size:calc(var(--u)*.62);font-variant-numeric:tabular-nums}
.laser-style-action b{font-size:calc(var(--u)*.48);letter-spacing:.04em}
.laser-style-action.buyable:hover,.laser-style-action.buyable:focus-visible,
.laser-style-card.unlocked:not(.selected) .laser-style-action:hover,
.laser-style-card.unlocked:not(.selected) .laser-style-action:focus-visible{background:var(--green);color:#001705}
.laser-style-action.selected{background:var(--green);border-color:var(--green);color:#001705;opacity:1}
.laser-style-card.locked:not(.available){opacity:.58}

html[dir="rtl"] .laser-style-lab-head>b{text-align:left}
html[dir="rtl"] .laser-style-card:before{left:auto;right:0}
html[dir="rtl"] .laser-style-preview img{object-position:right center}
html[dir="rtl"] .laser-style-preview i{right:auto;left:calc(var(--u)*.38)}

@media (orientation:landscape) and (pointer:coarse){
  .evolution-laser-beam-preview{top:22%;width:43%}
  .laser-style-lab-head{grid-template-columns:minmax(0,1fr) 30%;gap:8px;padding-bottom:7px;margin-bottom:7px}
  .laser-style-lab-head small{font-size:8px}.laser-style-lab-head h2{font-size:clamp(16px,3.7vh,22px)}
  .laser-style-lab-head p,.laser-style-lab-head>b{font-size:clamp(7.5px,1.7vh,9px)}
  .laser-style-grid{gap:7px}
  .laser-style-card{padding:7px;border-radius:10px}
  .laser-style-preview{height:clamp(45px,10.5vh,61px);border-radius:7px}
  .laser-style-preview i{font-size:8px}
  .laser-style-copy{padding:6px 2px 5px;min-height:clamp(58px,14vh,78px)}
  .laser-style-copy small{font-size:7px}.laser-style-copy strong{font-size:clamp(10px,2.25vh,13px)}
  .laser-style-copy p{font-size:clamp(7.5px,1.72vh,9px);line-height:1.2}
  .laser-style-metrics{gap:3px;margin-bottom:5px}
  .laser-style-metrics span{padding:4px 2px}.laser-style-metrics b{font-size:10px}.laser-style-metrics small{font-size:7px}
  .laser-style-action{min-height:34px;border-radius:7px}.laser-style-action img{width:17px;height:23px}.laser-style-action em{font-size:10px}.laser-style-action b{font-size:8px}
}

@media (orientation:landscape) and (pointer:coarse) and (max-height:430px){
  .laser-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .laser-style-lab-head>b{display:none}
  .laser-style-lab-head{grid-template-columns:1fr}
  .laser-style-preview{height:40px}
  .laser-style-copy{min-height:54px}
}

@media (prefers-reduced-motion:reduce){
  .evolution-lab[data-category="laserStyles"] .evolution-laser-beam-preview{animation:none;opacity:.84;transform:none}
  .laser-style-card{transition:none}
}
