/* ===== NoxusMu — Card Reveal IMAGE-MAPPED (LootBox) ===== */
.nxlbm-wrap{ position:relative; width:100vw; margin:0 auto; }
.nxlbm-main, .nxlb-main{ display:block !important; width:100vw !important; margin:0 calc(50% - 50vw) !important; padding:0 !important; }
.nxlb-page{ width:100vw !important; max-width:none !important; flex:1 1 100% !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; backdrop-filter:none !important; }
.nxlb-page::before, .nxlb-page::after{ display:none !important; content:none !important; }

/* background = poza desenata, intinsa la raport fix */
.nxlbm{ position:relative; width:100vw; aspect-ratio:16/9; overflow:hidden;
    background:url(../images/lootbox.png) center center/100% 100% no-repeat;
    font-family:'Cinzel',Georgia,serif; color:#efe5d0; user-select:none; }
.nxlbm *{ box-sizing:border-box; }

/* overlay generic */
.nxlbm-el{ position:absolute; }

/* close */
.nxlbm-close{ left:94.5%; top:7.4%; width:3%; height:5.2%; cursor:pointer; border-radius:8px; }

/* moneda (peste contor) */
.nxlbm-cur{ left:62.1%; top:7.5%; width:8.1%; height:4.5%; display:flex; align-items:center; justify-content:center; }
.nxlbm-cur .nxlb-bal{ font:700 clamp(12px,1.1vw,20px) 'Cinzel',serif; color:#fff; text-shadow:0 1px 3px #000; }

/* ===== carti ===== */
.nxlbm-cards{ left:23.4%; top:29.5%; width:46.2%; height:38.9%; display:flex; gap:3.8%; align-items:center; justify-content:center; perspective:1400px; z-index:2; }
.nxlbm-card:not(.flipped){ cursor:pointer; }
.nxlbm-card.is-revealing{ cursor:wait; }
.nxlbm:not(.edit) .nxlbm-card:not(.flipped):hover .nxlbm-card-flip{ filter:brightness(1.14) drop-shadow(0 0 14px rgba(154,77,255,.5)); }
.nxlbm-card{ position:relative; flex:0 0 16.2%; width:16.2%; height:auto; aspect-ratio:2/3; max-height:122%; margin:0; transform:scale(1.15); transform-origin:center; perspective:1100px; }
.nxlbm-card{ --rc:#9a4dff; }
.nxlbm-card-flip{ position:relative; width:100%; height:100%; transform-style:preserve-3d; will-change:transform; z-index:2; }
.nxlbm-card.flipped .nxlbm-card-flip{ transform:rotateY(180deg); } /* fallback fara GSAP */
/* fete + grosime 3D reala (translateZ) */
.nxlbm-card-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; align-items:center; justify-content:center; }
img.nxlbm-card-face{ object-fit:contain; display:block; }
.nxlbm-card-back{ width:100% !important; height:100% !important; max-width:none; transform:translateZ(7px); }
.nxlbm-card-front{ transform:rotateY(180deg) translateZ(7px); overflow:hidden; border-radius:7%; }
.nxlbm-card-frame{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; z-index:2; transform:none; }
.nxlbm-card-front.no-frame::before{ content:""; position:absolute; inset:0; z-index:1; border-radius:7%;
    background:
        radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 40%),
        linear-gradient(180deg, rgba(12,8,22,.96), rgba(4,3,8,.98));
    border:2px solid var(--rc); box-shadow:inset 0 0 24px rgba(255,255,255,.08), 0 0 22px var(--rc); }
.nxlbm-card-front.no-frame .nxlbm-card-frame{ display:none; }
.nxlbm-card-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:3; }
/* muchii = grosimea cartii */
.nxlbm-edge{ position:absolute; background:linear-gradient(180deg,#caa24a,#5a3f15); box-shadow:inset 0 0 5px rgba(0,0,0,.7); }
.ne-r{ right:0; top:0; width:14px; height:100%; transform-origin:right center; transform:rotateY(90deg); }
.ne-l{ left:0; top:0; width:14px; height:100%; transform-origin:left center; transform:rotateY(-90deg); }
.ne-t{ left:0; top:0; width:100%; height:14px; transform-origin:center top; transform:rotateX(90deg); }
.ne-b{ left:0; bottom:0; width:100%; height:14px; transform-origin:center bottom; transform:rotateX(-90deg); }
/* cinematic VFX layers */
.nxlbm-vfx{ position:absolute; left:50%; top:50%; pointer-events:none; transform:translate(-50%,-50%); transform-origin:center; }
.nxlbm-card-glow{ position:absolute; left:50%; top:50%; width:112%; height:80%; z-index:0; border-radius:45%; pointer-events:none; opacity:0; transform:translate(-50%,-50%);
    background:radial-gradient(ellipse, color-mix(in srgb, var(--rc) 34%, transparent), transparent 68%); filter:blur(11px); mix-blend-mode:screen; }
.nxlbm-edgeLight{ width:92%; height:95%; z-index:3; opacity:0; border-radius:9%;
    border:1px solid color-mix(in srgb, var(--rc) 70%, #fff 30%);
    box-shadow:inset 0 0 10px color-mix(in srgb, var(--rc) 55%, transparent), 0 0 12px color-mix(in srgb, var(--rc) 45%, transparent);
    filter:drop-shadow(0 0 6px var(--rc)); }
.nxlbm-smoke{ width:155%; aspect-ratio:1/1; z-index:0; opacity:0; border-radius:50%;
    background:
        radial-gradient(circle at 36% 38%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 26%),
        radial-gradient(circle at 62% 58%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 30%),
        conic-gradient(from 20deg, transparent, color-mix(in srgb, var(--rc) 16%, transparent), transparent, color-mix(in srgb, var(--rc) 12%, transparent), transparent);
    filter:blur(16px); mix-blend-mode:screen; }
.nxlbm-aura{ position:absolute; inset:11%; z-index:1; border-radius:14%; pointer-events:none; opacity:0;
    background:radial-gradient(circle, color-mix(in srgb, var(--rc) 36%, transparent), transparent 70%); filter:blur(8px); mix-blend-mode:screen; }
.nxlbm-shine{ position:absolute; top:-30%; left:-70%; width:34%; height:160%; z-index:4; pointer-events:none; opacity:0; transform:rotate(16deg);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.78), color-mix(in srgb, var(--rc) 52%, #fff 48%), transparent);
    filter:blur(.5px); }
.nxlbm-light-streak{ width:118%; height:5%; z-index:8; opacity:0; border-radius:999px; transform:translate(-50%,-50%) rotate(-10deg);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), color-mix(in srgb, var(--rc) 70%, #fff 30%), rgba(255,255,255,.65), transparent);
    filter:blur(.7px) drop-shadow(0 0 7px var(--rc)); mix-blend-mode:screen; }
/* umbra dinamica */
.nxlbm-card-shadow{ position:absolute; left:50%; bottom:-7%; width:62%; height:8%; transform:translateX(-50%); z-index:0; pointer-events:none;
    background:radial-gradient(ellipse, rgba(0,0,0,.62), transparent 70%); filter:blur(6px); }
.nxlbm-rune{ width:155%; aspect-ratio:1/1; z-index:0; opacity:0; border-radius:50%;
    background:repeating-conic-gradient(from 0deg, transparent 0 9deg, color-mix(in srgb, var(--rc) 78%, #fff 22%) 9deg 10deg), radial-gradient(circle, transparent 52%, var(--rc) 53%, transparent 56%, transparent 64%, color-mix(in srgb, var(--rc) 70%, #fff 30%) 65%, transparent 67%);
    -webkit-mask:radial-gradient(circle, transparent 46%, #000 47%); mask:radial-gradient(circle, transparent 46%, #000 47%);
    filter:drop-shadow(0 0 7px var(--rc)); mix-blend-mode:screen; }
.nxlbm-rays{ width:220%; aspect-ratio:1/1; z-index:0; opacity:0;
    background:repeating-conic-gradient(from 0deg, rgba(255,210,110,0) 0 7deg, rgba(255,210,110,.55) 7deg 8deg);
    -webkit-mask:radial-gradient(circle, transparent 28%, #000 55%, transparent 76%); mask:radial-gradient(circle, transparent 28%, #000 55%, transparent 76%); mix-blend-mode:screen; }
.nxlbm-shock{ width:48%; aspect-ratio:1/1; z-index:5; opacity:0; border-radius:50%;
    border:2px solid color-mix(in srgb, var(--rc) 72%, #fff 28%); box-shadow:0 0 18px color-mix(in srgb, var(--rc) 65%, transparent), inset 0 0 10px color-mix(in srgb, var(--rc) 48%, transparent); }
.nxlbm-ambientParticles,.nxlbm-orbitParticles,.nxlbm-fx,.nxlbm-afterglowParticles{ left:-36%; top:-36%; right:-36%; bottom:-36%; z-index:6; transform:none; overflow:visible; }
.nxlbm-orbitParticles{ z-index:1; }
.nxlbm-afterglowParticles{ z-index:7; }
.nxlbm-particle{ position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, #fff, color-mix(in srgb, var(--rc) 74%, #fff 26%) 48%, transparent 72%);
    box-shadow:0 0 6px color-mix(in srgb, var(--rc) 70%, transparent); will-change:transform,opacity; }
.nxlbm-particle.is-diamond{ width:5px; height:5px; border-radius:1px; transform:rotate(45deg); background:linear-gradient(135deg,#fff,var(--rc),transparent); }
.nxlbm-particle.is-shard{ width:4px; height:13px; border-radius:1px; background:linear-gradient(180deg,#fff,var(--rc),transparent); }
.nxlbm-particle.is-wisp{ width:14px; height:5px; border-radius:50%; filter:blur(1.2px); }
.nxlbm-particle.is-arcane{ width:8px; height:8px; border-radius:2px; background:linear-gradient(135deg,#fff,var(--rc) 55%,transparent); }
.nxlbm-particle.is-ember{ width:6px; height:9px; border-radius:50% 50% 45% 45%; background:radial-gradient(circle at 50% 20%,#fff,#ffd76b 35%,var(--rc) 70%,transparent); }
.nxlbm-card[data-frame="silver"] .nxlbm-edge{ background:linear-gradient(180deg,#f2f6ff,#647083); }
.nxlbm-card[data-frame="green"] .nxlbm-edge{ background:linear-gradient(180deg,#92ff99,#234a25); }
.nxlbm-card[data-frame="blue"] .nxlbm-edge{ background:linear-gradient(180deg,#8fc6ff,#173963); }
.nxlbm-card[data-frame="purple"] .nxlbm-edge{ background:linear-gradient(180deg,#d086ff,#32115d); }
.nxlbm-card[data-frame="gold"] .nxlbm-edge{ background:linear-gradient(180deg,#ffe08a,#7b4b08); box-shadow:inset 0 0 6px rgba(0,0,0,.65), 0 0 10px rgba(246,195,77,.45); }
.nxlbm-card-item{ flex:0 0 auto; display:grid; place-items:center; width:62%; height:46%; margin-top:6%; }
.nxlbm-card-item img{ max-width:100%; max-height:100%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)); }
.nxlbm-card-name{ margin-top:6%; font:700 clamp(8px,.78vw,13px) 'Open Sans',sans-serif; text-align:center; color:#fff; text-shadow:0 1px 3px #000; padding:0 8%; line-height:1.15; }
/* lift/tilt sunt incluse in nxlbmFlip */
.nxlbm-card.empty{ opacity:.34; }

/* zone-butoane (invizibile, peste butoanele desenate) */
.nxlbm-btn{ cursor:pointer; border-radius:10px; z-index:6; }
/* auto reveal (clickabil + mutabil) */
.nxlbm-auto{ left:45%; top:79.6%; width:1.4%; height:3%; z-index:6; display:flex; align-items:center; justify-content:center; }
.nxlbm-auto input{ width:100%; height:100%; cursor:pointer; accent-color:#9a4dff; }
.nxlbm-btn.is-busy{ pointer-events:none; }
.nxlbm-reveal,.nxlb-reveal{ left:26.4%; top:64.2%; width:15.6%; height:8.2%; }
.nxlbm-revealall,.nxlb-revealall{ left:43.4%; top:64.2%; width:16%; height:8.2%; }
.nxlbm-again,.nxlb-again{ left:61%; top:64.2%; width:16%; height:8.2%; display:flex; align-items:center; justify-content:center;
    color:#f7df9b; font:800 clamp(10px,.9vw,15px) 'Cinzel',serif; letter-spacing:.08em; text-shadow:0 2px 4px #000;
    border:1px solid rgba(246,195,77,.55); background:linear-gradient(180deg,rgba(91,43,22,.86),rgba(25,13,9,.82));
    box-shadow:inset 0 0 13px rgba(246,195,77,.2), 0 0 12px rgba(0,0,0,.55); text-decoration:none; }
.nxlbm-again:hover,.nxlb-again:hover{ filter:brightness(1.12); }

/* streak fill */
.nxlbm-streak{ left:11.8%; top:79.4%; width:6.8%; height:2%; border-radius:6px; overflow:hidden; }
.nxlbm-streak .nxlb-streak-fill{ display:block; height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg,#9a4dff,#f6c34d); transition:width .5s ease; }

/* recent rewards */
.nxlbm-recent{ left:85.3%; top:37.5%; width:11.3%; height:30.8%; list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:5px; overflow:hidden; }
.nxlbm-recent li{ display:flex; align-items:center; gap:7px; }
.nxlbm-recent li img{ width:18%; max-width:34px; aspect-ratio:1/1; object-fit:contain; }
.nxlbm-recent li b{ font:700 clamp(8px,.72vw,12px) 'Open Sans',sans-serif; color:#fff; }
.nxlbm-recent li small{ font-size:9px; text-transform:uppercase; letter-spacing:.1em; display:block; }

/* possible rewards (peste sloturile de jos) */
.nxlbm-preview{ left:4.1%; top:86.6%; width:98%; height:11.5%; display:block; padding:0 .4%; overflow:visible; }
.nxlbm-prev-item{ position:absolute; aspect-ratio:1/1; border:0 !important; border-radius:0; display:grid; place-items:center; background:transparent !important; box-shadow:none !important; }
.nxlbm-prev-item img{ max-width:88%; max-height:88%; object-fit:contain; }
.nxlbm [data-pos="previewItem1"]{ left:17.3% !important; top:2.2% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem2"]{ left:22.9% !important; top:7.4% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem3"]{ left:28.1% !important; top:4.9% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem4"]{ left:33.4% !important; top:4.1% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem5"]{ left:38.5% !important; top:4.1% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem6"]{ left:43.7% !important; top:1.6% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem7"]{ left:48.3% !important; top:2.5% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem8"]{ left:52.6% !important; top:4.1% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem9"]{ left:57% !important; top:3.3% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem10"]{ left:62.2% !important; top:0% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem11"]{ left:66.7% !important; top:4.1% !important; width:4.5% !important; height:83% !important; }
.nxlbm [data-pos="previewItem12"]{ left:70.8% !important; top:4.9% !important; width:4.3% !important; height:80.6% !important; }
.nxlbm [data-pos="previewItem13"]{ left:74.8% !important; top:4.1% !important; width:4.6% !important; height:85.5% !important; }
.nxlbm [data-pos="previewItem14"]{ left:78.7% !important; top:4.1% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem15"]{ left:82.8% !important; top:1.6% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem16"]{ left:86.9% !important; top:0.8% !important; width:4.9% !important; height:88% !important; }
.nxlbm [data-pos="previewItem17"]{ left:90.8% !important; top:2.5% !important; width:4.9% !important; height:88% !important; }

/* mesaj */
.nxlbm-msg{ position:absolute; left:50%; top:14%; transform:translateX(-50%); z-index:20; display:none;
    padding:8px 16px; border-radius:10px; font:700 clamp(11px,1vw,15px) 'Open Sans',sans-serif; box-shadow:0 8px 22px rgba(0,0,0,.6); }
.nxlbm-msg.show{ display:block; }
.nxlbm-msg.ok{ color:#d6f5e2; background:rgba(22,70,42,.95); border:1px solid rgba(120,220,160,.6); }
.nxlbm-msg.err{ color:#ffdcdc; background:rgba(80,22,28,.95); border:1px solid rgba(230,120,120,.6); }

/* ===== editor de pozitionare ===== */
.nxlbm-editbtn{ all:unset; cursor:pointer; position:absolute; right:10px; bottom:-44px; z-index:40; padding:8px 14px; border-radius:8px;
    font:600 13px 'Open Sans',sans-serif; color:#fff0d0; background:linear-gradient(180deg,#3a2358,#1c1130); border:1px solid rgba(236,191,103,.5); }
.nxlbm.edit .nxlbm-el{ outline:1px dashed rgba(255,215,120,.6); outline-offset:1px; }
.nxlbm.edit .nxlbm-btn, .nxlbm.edit .nxlbm-close{ background:rgba(246,195,77,.12); }
.nxlbm-el.sel{ outline:2px solid #ffd76b !important; z-index:30; }
.nxlbm-rsz{ position:absolute; right:-6px; bottom:-6px; width:13px; height:13px; background:#ffd76b; border:1px solid #1a1206; border-radius:2px; z-index:31; cursor:nwse-resize; }
.nxlbm-bar{ position:absolute; left:10px; bottom:-44px; z-index:40; display:none; gap:6px; }
.nxlbm-bar.show{ display:flex; }
.nxlbm-bar button{ all:unset; cursor:pointer; padding:8px 12px; border-radius:8px; font:600 12px 'Open Sans',sans-serif; color:#cfe7ff; background:#1a1030; border:1px solid rgba(236,191,103,.4); }
.nxlbm-out{ position:absolute; left:10px; bottom:-150px; z-index:40; width:520px; max-width:90%; height:96px; display:none; font:11px/1.3 monospace; color:#cfe; background:#0a0712; border:1px solid rgba(236,191,103,.4); border-radius:6px; padding:6px; }
.nxlbm-out.show{ display:block; }

@media (max-width:760px){ .nxlbm{ aspect-ratio:auto; min-height:560px; } }