/* ================= LAB · SECUENCIA 3: tienda y cajas ================= */
#unbox-ui { position: fixed; inset: 0; z-index: 30; font-family: var(--cond); cursor: pointer; }
.ub-head { position: absolute; left: 4vw; top: 4vh; pointer-events: none; animation: fadeup .6s .2s both; }
.ub-head small { display: block; font-size: 14px; letter-spacing: 6px; color: var(--cyan); font-weight: 700; }
.ub-head b { font-size: 48px; font-weight: 900; font-style: italic; text-shadow: 0 4px 0 rgba(0, 0, 0, .4); }
.ub-hint { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: 5px; color: #e8ecf4; text-shadow: 0 2px 6px #000; transition: opacity .4s; pointer-events: none; animation: fadeup .6s 1s both, blink 1.8s 1.6s infinite; }
.ub-hint.busy { animation: none; opacity: .0; }
.ub-hint.gone { opacity: 0; }
.ub-hold { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .8); position: relative; }
.ub-hold i { position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.ub-reveal { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); text-align: center; opacity: 0; pointer-events: none; }
.ub-reveal.on { opacity: 1; pointer-events: auto; cursor: default; }
.ub-rar { position: relative; display: inline-block; padding: 6px 40px; font-size: 22px; font-weight: 900; letter-spacing: 10px; color: #fff; overflow: hidden;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 85%, transparent) 20%, color-mix(in srgb, var(--rc) 85%, transparent) 80%, transparent);
  animation: rarIn .6s cubic-bezier(.2, 1.3, .4, 1) .45s both; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.ub-rar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); animation: shine 2.4s 1s infinite; }
.ub-rar.legendary { font-size: 28px; padding: 8px 56px; }
@keyframes rarIn { from { opacity: 0; transform: scaleX(0); letter-spacing: 40px; } }
.ub-name { font-size: clamp(48px, 7vw, 86px); font-weight: 900; font-style: italic; line-height: 1; margin-top: 8px; text-shadow: 0 5px 0 rgba(0, 0, 0, .45), 0 0 40px rgba(0, 0, 0, .5); animation: wordIn .9s cubic-bezier(.2, 1, .3, 1) .6s both; }
.ub-reveal.legendary .ub-name { color: #ffd26a; text-shadow: 0 5px 0 rgba(0, 0, 0, .45), 0 0 40px rgba(255, 179, 33, .55); }
.ub-reveal.epic .ub-name { color: #e2c2ff; }
.ub-kind { font-size: 14px; letter-spacing: 4px; font-weight: 700; color: #cfd6e2; margin-top: 6px; animation: fadeup .5s 1s both; }
.ub-btns { display: flex; justify-content: center; gap: 12px; margin-top: 16px; animation: fadeup .5s 1.4s both; }
.ub-btns .btn { font-size: 22px; padding: 10px 36px; }
body[class*="ub-flash-"]::after { content: ''; position: fixed; inset: 0; z-index: 45; pointer-events: none; animation: ubFlash .9s ease-out forwards; }
body.ub-flash-common::after { background: radial-gradient(circle, rgba(255, 255, 255, .7), transparent 70%); }
body.ub-flash-rare::after { background: radial-gradient(circle, rgba(61, 139, 255, .75), transparent 70%); }
body.ub-flash-epic::after { background: radial-gradient(circle, rgba(162, 77, 255, .8), transparent 70%); }
body.ub-flash-legendary::after { background: radial-gradient(circle, rgba(255, 210, 110, .95), rgba(255, 179, 33, .4) 40%, transparent 75%); }
@keyframes ubFlash { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Compra con mantener pulsado ---------- */
#buy { position: fixed; inset: 0; z-index: 42; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 12, .7); backdrop-filter: blur(4px); animation: fadeup .3s both; font-family: var(--cond); }
#buy.out { opacity: 0; transition: opacity .3s; }
.buy-card { position: relative; width: min(420px, 90vw); padding: 22px 24px 20px; text-align: center; background: linear-gradient(180deg, rgba(36, 44, 64, .97), rgba(20, 25, 37, .98)); border: 1px solid rgba(255, 255, 255, .1); border-top: 4px solid var(--rc); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px color-mix(in srgb, var(--rc) 25%, transparent); animation: popin .35s cubic-bezier(.2, 1.3, .4, 1); transform-style: preserve-3d; }
.buy-rar { font-size: 14px; letter-spacing: 6px; font-weight: 800; color: var(--rc); }
.buy-img { height: 170px; display: flex; align-items: center; justify-content: center; margin: 6px 0; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--rc) 22%, transparent), transparent 65%); }
.buy-img img { max-height: 160px; max-width: 100%; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.buy-name { font-size: 40px; font-weight: 900; font-style: italic; line-height: 1; }
.buy-price { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 16px; font-size: 26px; font-weight: 800; color: var(--yellow); }
.buy-price i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #e9a91f 55%, #9a6a0a); }
.buy-price small { font-size: 14px; color: var(--muted); letter-spacing: 1px; }
.buy-hold { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 12px; font-size: 20px; font-weight: 900; letter-spacing: 2px; color: #fff; background: linear-gradient(180deg, #2a3348, #1b2130); border: 1px solid rgba(255, 255, 255, .15); user-select: none; transition: background .2s, transform .1s; }
.buy-hold:hover { background: linear-gradient(180deg, #34405a, #222a3d); }
.buy-hold.holding { transform: scale(.98); background: linear-gradient(180deg, #1f6a78, #134a55); }
.buy-hold svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.buy-hold circle { fill: none; stroke-width: 4; }
.buy-hold .bg { stroke: rgba(255, 255, 255, .15); } .buy-hold .fg { stroke: var(--cyan); stroke-linecap: round; }
.buy-hold.poor { color: #ff7b7b; cursor: not-allowed; animation: shake .4s; }
.buy-x { position: absolute; right: 10px; top: 8px; font-size: 20px; color: rgba(255, 255, 255, .6); }
.buy-after { display: none; justify-content: center; gap: 10px; }
.buy-stamp { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-12deg) scale(2.5); opacity: 0; padding: 4px 18px; font-size: 44px; font-weight: 900; letter-spacing: 4px; color: var(--rc); border: 4px solid var(--rc); background: rgba(8, 10, 16, .75); pointer-events: none; }
#buy.bought .buy-stamp { animation: stamp .45s cubic-bezier(.2, 1.4, .4, 1) .15s forwards; }
#buy.bought .buy-hold { display: none; }
#buy.bought .buy-after { display: flex; animation: fadeup .4s .5s both; }
#buy.bought .buy-img img { transform: scale(1.12) rotate(-4deg); }
#buy.bought .buy-card { animation: cardFlip .6s cubic-bezier(.2, 1, .3, 1); }
@keyframes stamp { to { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }
@keyframes cardFlip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(1.05); } 100% { transform: rotateY(0); } }

/* revelación al estilo CoD: texto a la izquierda, premio a la derecha */
.ub-reveal { left: 5vw !important; top: 50%; bottom: auto !important; transform: translateY(-40%) !important; text-align: left !important; max-width: 46vw; }
.ub-rar { padding-left: 16px !important; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 90%, transparent), color-mix(in srgb, var(--rc) 60%, transparent) 70%, transparent) !important; transform-origin: left; }
.ub-btns { justify-content: flex-start !important; }