body{font-family:Arial;background:#0f172a;color:#fff;text-align:center;padding:20px;margin:0}
button{padding:10px;margin:5px;border:none;border-radius:8px;cursor:pointer;background:#2563eb;color:#fff}
button:hover{opacity:0.9}
button:disabled{opacity:0.5;cursor:not-allowed}
input,select,textarea{padding:8px;margin:5px;border-radius:6px;border:none;font-family:inherit}

/* HEADER */
#topBar{position:sticky;top:0;z-index:50;background:rgba(15,23,42,0.95);backdrop-filter:blur(8px);padding:10px;border-bottom:1px solid #334155;margin:-20px -20px 20px}
#hud{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.hudBadge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#1e293b,#334155);padding:8px 16px;border-radius:30px;font-size:15px;font-weight:bold}
#coinsDisplay{border:2px solid #eab308;box-shadow:0 0 15px rgba(234,179,8,0.3)}
#coinsDisplay .coin{font-size:18px;filter:drop-shadow(0 0 5px gold)}
#coinsAmount{color:#eab308;letter-spacing:1px}
#levelBadge{border:2px solid #3b82f6;box-shadow:0 0 15px rgba(59,130,246,0.3);cursor:default}
#levelBadge .lvl{color:#60a5fa}
.levelProgressBar{width:100px;height:5px;background:#0f172a;border-radius:3px;overflow:hidden;margin-left:6px}
.levelProgressBar .fill{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);transition:width 0.5s ease}
#rewardBtn{background:linear-gradient(135deg,#16a34a,#22c55e);border:2px solid #4ade80;padding:8px 16px;font-size:13px;border-radius:30px;cursor:pointer;box-shadow:0 0 15px rgba(34,197,94,0.4)}
#rewardBtn:disabled{background:linear-gradient(135deg,#334155,#475569);border-color:#64748b;box-shadow:none;color:#94a3b8}

@keyframes coinsPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
.pulse{animation:coinsPulse 0.4s ease}
@keyframes levelUpFly{0%{opacity:0;transform:translate(-50%,-30%) scale(0.5)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(1.2)}}
#levelUpToast{position:fixed;top:50%;left:50%;background:linear-gradient(135deg,#1d4ed8,#3b82f6);padding:30px 50px;border-radius:20px;border:3px solid #60a5fa;font-size:32px;font-weight:bold;box-shadow:0 0 40px rgba(59,130,246,0.6);z-index:1000;pointer-events:none;opacity:0}
#levelUpToast.show{animation:levelUpFly 2.5s forwards}

/* ACHIEVEMENT TOAST */
@keyframes achToastIn{0%{opacity:0;transform:translateX(120%)}15%{opacity:1;transform:translateX(0)}85%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(120%)}}
.achToast{
 position:fixed;top:80px;right:20px;
 background:linear-gradient(135deg,#7c3aed,#a855f7);
 padding:14px 20px;border-radius:12px;
 border:2px solid #c084fc;
 box-shadow:0 0 30px rgba(168,85,247,0.5);
 z-index:998;font-size:14px;text-align:left;
 max-width:280px;
 animation:achToastIn 4s forwards;
}
.achToast .achTitle{font-weight:bold;font-size:16px;margin-bottom:4px}
.achToast .achDesc{opacity:0.9;font-size:12px}

/* VISTAS */
.view{display:none;animation:fadeIn 0.3s ease}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.backBtn{background:transparent;border:2px solid #475569;padding:8px 16px;border-radius:8px;font-size:14px;color:#cbd5e1;margin:0 0 15px}
.backBtn:hover{border-color:#60a5fa;color:#60a5fa}

.heroTitle{font-size:42px;margin:30px 0 10px;background:linear-gradient(135deg,#60a5fa,#a855f7,#eab308);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:'Arial Black',sans-serif;letter-spacing:3px}
.heroSubtitle{opacity:0.7;margin-bottom:30px;font-size:14px;letter-spacing:2px}

.navGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:920px;margin:30px auto;padding:0 10px}
.navBtn{padding:30px 18px;background:linear-gradient(135deg,#1e293b,#334155);border:2px solid #475569;border-radius:18px;cursor:pointer;transition:all 0.3s;color:#fff}
.navBtn:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,0.4)}
.navBtn .icon{font-size:48px;display:block;margin-bottom:10px}
.navBtn .title{font-size:20px;font-weight:bold;display:block;margin-bottom:4px}
.navBtn .desc{font-size:12px;opacity:0.7;display:block}
.navBtn.sobres:hover{border-color:#a855f7;box-shadow:0 10px 30px rgba(168,85,247,0.4)}
.navBtn.coleccion:hover{border-color:#22c55e;box-shadow:0 10px 30px rgba(34,197,94,0.4)}
.navBtn.sbc:hover{border-color:#0891b2;box-shadow:0 10px 30px rgba(8,145,178,0.4)}
.navBtn.logros:hover{border-color:#eab308;box-shadow:0 10px 30px rgba(234,179,8,0.4)}
.navBtn.moba:hover{border-color:#dc2626;box-shadow:0 10px 30px rgba(220,38,38,0.4)}
.navBtn.misiones:hover{border-color:#f59e0b;box-shadow:0 10px 30px rgba(245,158,11,0.4)}
.navBtn.expedicion:hover{border-color:#06b6d4;box-shadow:0 10px 30px rgba(6,182,212,0.4)}
.navBtn.album:hover{border-color:#d97706;box-shadow:0 10px 30px rgba(217,119,6,0.4)}
.navBtn .badge{display:inline-block;background:#dc2626;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;margin-left:6px;font-weight:bold}

.adminBtn{background:transparent;border:1px solid #475569;color:#94a3b8;padding:8px 16px;font-size:13px;margin-top:30px}
.adminBtn:hover{border-color:#60a5fa;color:#60a5fa}

.pack{display:grid;grid-template-columns:repeat(5,120px);gap:10px;justify-content:center;min-height:200px;margin:0 auto}
.collectionRow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}

.card{background:#1e293b;padding:8px;border-radius:10px;width:120px;position:relative;box-sizing:border-box;overflow:hidden;flex:1;min-height:0}
.card p{margin:2px 0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
img{max-width:100%;border-radius:6px}

.cardMeta{font-size:10px;opacity:0.75;margin-top:2px;line-height:1.3}
.cardMeta .region{color:#60a5fa;font-weight:bold}
.cardMeta .rol{color:#f59e0b;font-weight:bold}
.cardMeta .theme{color:#ec4899;font-weight:bold;font-size:9px;letter-spacing:0.5px}
.cardValue{font-size:10px;color:#eab308;margin-top:2px;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* STATS: ATAQUE / CONTROL / DEFENSA */
.cardStats{display:flex;gap:3px;margin-top:auto;padding-top:4px;justify-content:space-between}
.statBadge{
 flex:1;font-size:10px;
 padding:3px 4px;border-radius:5px;
 font-weight:bold;text-align:center;
 letter-spacing:0.5px;
}
.statBadge .statLabel{display:block;font-size:8px;opacity:0.8;letter-spacing:0.3px}
.statBadge.attack{background:rgba(239,68,68,0.18);color:#fca5a5;border:1px solid #ef4444}
.statBadge.velocidad{background:rgba(34,197,94,0.18);color:#86efac;border:1px solid #22c55e}
.statBadge.defense{background:rgba(59,130,246,0.18);color:#93c5fd;border:1px solid #3b82f6}
.cardFrontWrap .cardStats{margin-top:3px}
.cardFrontWrap .statBadge{font-size:9px;padding:2px 3px}

.packCard{display:inline-block;background:#1e293b;padding:10px;border-radius:10px;margin:5px;cursor:pointer;width:140px;position:relative}
.packCard.selected{outline:3px solid #22c55e}
.packCard .price{color:#eab308;font-size:13px;font-weight:bold;margin-top:3px}
.packCard .levelReq{font-size:11px;background:rgba(59,130,246,0.2);border:1px solid #3b82f6;color:#60a5fa;padding:2px 6px;border-radius:6px;display:inline-block;margin-top:4px}
.packCard.locked{opacity:0.55;cursor:not-allowed}
.packCard.locked img{filter:grayscale(70%) brightness(0.7)}
.packCard .lockOverlay{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.75);padding:4px 8px;border-radius:6px;font-size:11px;color:#fca5a5;border:1px solid #dc2626}

/* RAREZAS */
.common{border:3px solid #22c55e}
.rare{border:3px solid #3b82f6}
.epic{border:3px solid #a855f7}
.legendary{border:3px solid #eab308;position:relative;overflow:hidden}
.mythic{border:3px solid #ef4444;position:relative;overflow:hidden;box-shadow:0 0 15px rgba(239,68,68,0.5)}
.legendary.reveal::after,.mythic.reveal::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.8),transparent);transform:skewX(-20deg);animation:shine 1.5s forwards;pointer-events:none}
@keyframes shine{0%{left:-75%}100%{left:125%}}

/* SHINY/FOIL */
.shinyCard{position:relative;overflow:hidden}
.shinyCard::before{
 content:"✨";
 position:absolute;top:4px;right:4px;
 font-size:18px;z-index:3;
 filter:drop-shadow(0 0 4px gold);
 animation:shinyFloat 2s ease-in-out infinite;
}
@keyframes shinyFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(15deg)}}
.shinyCard::after{
 content:"";position:absolute;inset:0;
 background:linear-gradient(125deg,transparent 30%,rgba(255,215,0,0.25) 45%,rgba(255,255,255,0.4) 50%,rgba(255,215,0,0.25) 55%,transparent 70%);
 background-size:200% 200%;
 animation:shinyShimmer 3s linear infinite;
 pointer-events:none;border-radius:inherit;
}
@keyframes shinyShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* RASGADO HORIZONTAL: 1/4 vuela hacia arriba, 3/4 hacia abajo */
#openingArea{
 width:220px;height:340px;
 margin:30px auto 80px;display:none;
 position:relative;user-select:none;-webkit-user-select:none;
}
#packContainer{width:220px;height:300px;position:relative;cursor:grab;margin:0 auto}
#packContainer.grabbing{cursor:grabbing}
.packHalf{
 position:absolute;inset:0;
 background-size:cover;background-position:center;
 background-color:#334155;border-radius:8px;
 transition:transform 0.15s ease-out;
 will-change:transform;
}
/* Cuarto superior con borde zigzag horizontal abajo */
.packTop{
 clip-path:polygon(0 0, 100% 0, 100% 25%, 95% 26.5%, 85% 23.5%, 75% 26.5%, 65% 23.5%, 55% 26.5%, 45% 23.5%, 35% 26.5%, 25% 23.5%, 15% 26.5%, 5% 23.5%, 0 25%);
}
/* Tres cuartos inferiores con borde zigzag horizontal arriba */
.packBottom{
 clip-path:polygon(0 25%, 5% 23.5%, 15% 26.5%, 25% 23.5%, 35% 26.5%, 45% 23.5%, 55% 26.5%, 65% 23.5%, 75% 26.5%, 85% 23.5%, 95% 26.5%, 100% 25%, 100% 100%, 0 100%);
}
.completed .packHalf{transition:transform 0.8s cubic-bezier(.5,0,.75,0)}
.completed .packTop{transform:translateY(-280%) rotate(-15deg) !important}
.completed .packBottom{transform:translateY(110%) rotate(6deg) !important}

#tearHint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:14px;opacity:0.7;pointer-events:none;letter-spacing:1px}
#tearProgress{position:absolute;bottom:-22px;left:5%;right:5%;height:8px;background:#1e293b;border-radius:4px;overflow:hidden;pointer-events:none;border:1px solid #334155}
#tearBar{height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#eab308,#a855f7,#ef4444);box-shadow:0 0 10px rgba(168,85,247,0.6);transition:width 0.1s}

/* CARD SLOTS */
.cardSlot{width:120px;height:200px;perspective:1200px;cursor:pointer}
.cardSlot .cardInner{position:relative;width:100%;height:100%;transition:transform 0.8s;transform-style:preserve-3d}
.cardSlot.flipped .cardInner{transform:rotateY(180deg)}
.cardSlot:hover:not(.flipped) .cardInner{transform:rotateY(15deg)}
.cardFace{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;box-sizing:border-box}
.cardBack{background:repeating-linear-gradient(45deg,#1e293b 0,#1e293b 10px,#334155 10px,#334155 20px);border:3px solid #475569;display:flex;align-items:center;justify-content:center;font-size:60px;color:#94a3b8;font-weight:bold;text-shadow:0 2px 8px rgba(0,0,0,0.5)}
.cardFrontWrap{transform:rotateY(180deg);width:100%;height:100%;margin:0 !important;overflow:hidden;display:flex;flex-direction:column}
.cardFrontWrap .card{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column}
.cardFrontWrap img{max-height:80px;object-fit:cover;width:100%}
.cardFrontWrap p{margin:4px 0;font-size:13px}
.cardFrontWrap .cardMeta{font-size:9px}

/* WALKOUT */
#walkout{position:fixed;top:0;left:0;width:100%;height:100%;display:none;justify-content:center;align-items:center;z-index:999;cursor:pointer}
.walkCard{width:280px;flex:none;transform:scale(0.5);opacity:0;animation:walkIn 1s forwards}
@keyframes walkIn{0%{transform:scale(0.5);opacity:0}50%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.walk-common{background:#000}
.walk-rare{background:radial-gradient(circle,#3b82f6,#000)}
.walk-epic{background:radial-gradient(circle,#a855f7,#000)}
.walk-legendary{background:radial-gradient(circle,#7c5e00,#000 80%)}
.walk-mythic{background:radial-gradient(circle,#7f1d1d,#000 80%)}
.walkoutHint{position:absolute;bottom:30px;left:0;right:0;text-align:center;color:#fff;opacity:0;font-size:14px;animation:hintFade 0.5s 1.5s forwards}
@keyframes hintFade{to{opacity:0.6}}

.fifaStage{display:flex;flex-direction:column;align-items:center;gap:24px;color:gold;font-family:'Arial Black',Arial,sans-serif;text-shadow:0 0 20px gold,0 0 40px rgba(255,215,0,0.5);z-index:2}
.fifaStage.mythic{color:#fca5a5;text-shadow:0 0 20px #ef4444,0 0 40px rgba(239,68,68,0.6)}
.fifaItem{opacity:0;transform:translateY(30px) scale(0.7);transition:all 0.6s cubic-bezier(.34,1.56,.64,1)}
.fifaItem.show{opacity:1;transform:translateY(0) scale(1)}
.fifaItem.fade-out{opacity:0 !important;transform:scale(1.4) !important;transition:all 0.5s ease-out}
.fifaNumber{font-size:46px;letter-spacing:6px}
.fifaRarity{font-size:64px;letter-spacing:8px;color:#fff;text-shadow:0 0 30px gold,0 0 60px gold}
.fifaStage.mythic .fifaRarity{text-shadow:0 0 30px #ef4444,0 0 60px #ef4444}
.fifaRegion{font-size:32px;letter-spacing:4px;color:#60a5fa;text-shadow:0 0 20px #3b82f6}
.fifaRol{font-size:32px;letter-spacing:4px;color:#fde047}
.fifaParticles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particle{position:absolute;width:6px;height:6px;background:gold;border-radius:50%;box-shadow:0 0 10px gold;animation:particleFloat 3s linear infinite}
.particle.mythic{background:#ef4444;box-shadow:0 0 10px #ef4444}
@keyframes particleFloat{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-20vh) scale(1.2);opacity:0}}

/* PICK 1 OF 3 */
#mythicPicker{
 display:flex;flex-direction:column;align-items:center;
 gap:20px;z-index:5;
}
#mythicPicker h2{
 color:#fef2f2;font-size:30px;letter-spacing:3px;
 text-shadow:0 0 20px #ef4444;margin:0;
}
.pickerCards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.pickerCard{
 width:160px;cursor:pointer;
 transition:transform 0.3s;
 border:3px solid #ef4444;
 border-radius:12px;background:#1e293b;
 padding:10px;
 box-shadow:0 0 20px rgba(239,68,68,0.4);
 animation:pickerIn 0.6s ease forwards;
 opacity:0;
}
@keyframes pickerIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.pickerCard:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 0 30px rgba(239,68,68,0.7)}
.pickerCard.picked{transform:scale(1.1);box-shadow:0 0 40px gold;border-color:gold}
.pickerCard img{width:100%;height:120px;object-fit:cover;border-radius:6px}
.pickerCard .pickName{font-size:14px;font-weight:bold;margin-top:6px}
.pickerCard .pickMeta{font-size:11px;opacity:0.8}

/* PANEL ADMIN */
.adminTabs{
 display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
 margin:15px auto 10px;padding:8px;
 background:#0f172a;border-radius:12px;
 max-width:760px;
 border:1px solid #334155;
}
.adminTab{
 background:transparent;color:#94a3b8;
 border:1px solid transparent;padding:9px 16px;
 font-size:13px;border-radius:8px;cursor:pointer;
 transition:all 0.2s;font-weight:bold;letter-spacing:0.5px;
}
.adminTab:hover{background:#1e293b;color:#fff}
.adminTab.active{
 background:linear-gradient(135deg,#2563eb,#1d4ed8);
 color:#fff;border-color:#60a5fa;
 box-shadow:0 4px 12px rgba(37,99,235,0.4);
}
[data-admin-section]{display:none}
[data-admin-section].active{display:block;animation:fadeIn 0.25s ease}

.panel{background:#1e293b;padding:15px;margin:10px auto;border-radius:10px;max-width:600px;text-align:left}
.panel h3{margin-top:0;text-align:center}
.adminList{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;margin-top:10px;padding:5px;background:#0f172a;border-radius:8px}
.adminItem{display:flex;align-items:center;gap:10px;background:#334155;padding:8px;border-radius:6px}
.adminItem img{width:45px;height:45px;object-fit:cover;border-radius:4px;flex-shrink:0}
.adminItem .info{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.adminItem .info small{display:block;opacity:0.8;font-size:11px}
.adminItem .info .valueTag{color:#eab308;font-weight:bold;font-size:12px}
.adminItem .info .levelTag{color:#60a5fa;font-weight:bold;font-size:12px}
.adminItem .info .regionTag{color:#60a5fa;font-weight:bold;font-size:11px}
.adminItem .info .rolTag{color:#f59e0b;font-weight:bold;font-size:11px}
.adminItem .info .themeTag{color:#ec4899;font-weight:bold;font-size:11px}
.adminItem button{padding:6px 10px;font-size:12px;margin:0 2px}
.btnDelete{background:#dc2626 !important}
.btnEdit{background:#f59e0b !important}
.btnTest{background:#10b981 !important}
.btnCancel{background:#64748b !important}
.btnExport{background:#0891b2 !important}
.btnImport{background:#7c3aed !important}
.btnCoins{background:#eab308 !important;color:#000 !important}
.btnLevel{background:#3b82f6 !important}
.btnReroll{background:linear-gradient(135deg,#a855f7,#ec4899) !important}
.empty{text-align:center;opacity:0.5;padding:40px 10px;font-size:14px}
.editing{outline:2px solid #f59e0b}

.rarityDot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.rarityDot.common{background:#22c55e}
.rarityDot.rare{background:#3b82f6}
.rarityDot.epic{background:#a855f7}
.rarityDot.legendary{background:#eab308}
.rarityDot.mythic{background:#ef4444}

.sectionTitle{font-size:28px;margin:10px 0 20px}
.collectionStats{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-bottom:25px}
.statCard{background:#1e293b;padding:10px 18px;border-radius:10px;border:2px solid #334155;font-size:13px}
.statCard strong{display:block;font-size:20px;margin-top:3px}
.statCard.common strong{color:#22c55e}
.statCard.rare strong{color:#3b82f6}
.statCard.epic strong{color:#a855f7}
.statCard.legendary strong{color:#eab308}
.statCard.mythic strong{color:#ef4444}
.statCard.total strong{color:#fff}

.openPackBtn{background:linear-gradient(135deg,#a855f7,#7c3aed);padding:14px 32px;font-size:16px;font-weight:bold;border-radius:12px;margin:15px 5px;box-shadow:0 4px 15px rgba(168,85,247,0.4)}
.openPackBtn:hover{transform:translateY(-2px)}
.openPackBtn:disabled{background:#475569;box-shadow:none}

/* COLLECTION CARD - reroll button */
.collectionCard{position:relative}
.collectionCard .rerollBtn{
 position:absolute;top:5px;right:5px;
 background:rgba(168,85,247,0.9);border:none;
 padding:4px 8px;border-radius:6px;
 font-size:10px;cursor:pointer;color:#fff;
 z-index:2;
}
.collectionCard .rerollBtn:hover{background:#a855f7}
.shinyCount{
 background:rgba(234,179,8,0.2);border:1px solid #eab308;
 color:#fde047;font-size:10px;padding:1px 6px;border-radius:6px;
 margin-left:4px;
}

/* SBC */
.sbcCard{
 background:linear-gradient(135deg,#1e293b,#334155);
 border:2px solid #475569;border-radius:12px;
 padding:15px;margin:10px auto;max-width:600px;text-align:left;
}
.sbcCard.completed{opacity:0.6;border-color:#22c55e}
.sbcCard h3{margin:0 0 8px;color:#60a5fa}
.sbcCard .sbcDesc{font-size:13px;opacity:0.8;margin-bottom:10px}
.sbcReq{
 background:#0f172a;padding:8px;border-radius:6px;
 margin:6px 0;font-size:13px;
 display:flex;justify-content:space-between;align-items:center;
}
.sbcReq.met{background:#14532d;color:#86efac}
.sbcReward{color:#eab308;font-weight:bold;margin-top:8px}
.sbcSelectionArea{
 background:#0f172a;border-radius:8px;padding:10px;
 margin-top:10px;max-height:300px;overflow-y:auto;
}
.sbcCardItem{
 display:inline-block;cursor:pointer;
 width:80px;margin:4px;padding:5px;
 background:#1e293b;border-radius:6px;
 font-size:11px;border:2px solid transparent;
 transition:all 0.2s;
}
.sbcCardItem:hover{border-color:#60a5fa}
.sbcCardItem.selected{border-color:#22c55e;background:#14532d}
.sbcCardItem img{width:100%;height:60px;object-fit:cover;border-radius:4px}

/* LOGROS */
.achGrid{
 display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
 gap:14px;max-width:900px;margin:20px auto;padding:0 10px;
}
.achCard{
 background:#1e293b;border:2px solid #334155;
 border-radius:12px;padding:14px;text-align:left;
 display:flex;gap:12px;align-items:flex-start;
}
.achCard.unlocked{border-color:#eab308;background:linear-gradient(135deg,#1e293b,#3a2a0a)}
.achCard .achIcon{font-size:36px;flex-shrink:0}
.achCard .achInfo{flex:1}
.achCard h4{margin:0 0 4px;font-size:15px}
.achCard .achDescription{font-size:12px;opacity:0.8;margin-bottom:8px}
.achProgressBar{width:100%;height:6px;background:#0f172a;border-radius:3px;overflow:hidden}
.achProgressBar .fill{height:100%;background:linear-gradient(90deg,#a855f7,#eab308);transition:width 0.5s}
.achCard.unlocked .achProgressBar .fill{background:#22c55e}
.achProgressText{font-size:11px;opacity:0.7;margin-top:3px}
.achReward{font-size:11px;color:#eab308;font-weight:bold;margin-top:4px}
.achCard.claimed::after{content:"✓ Reclamado";position:absolute;top:8px;right:8px;font-size:10px;color:#22c55e}
.achCard{position:relative}
.claimAchBtn{
 background:linear-gradient(135deg,#16a34a,#22c55e);
 padding:6px 12px;font-size:12px;border-radius:8px;
 margin-top:6px;
}

/* MISSIONS */
.missionsList{max-width:600px;margin:20px auto}
.missionCard{
 background:#1e293b;border:2px solid #334155;
 border-radius:10px;padding:14px;margin:10px auto;text-align:left;
 display:flex;gap:14px;align-items:center;
}
.missionCard.completed{border-color:#22c55e}
.missionCard.claimed{opacity:0.5}
.missionCard .missionIcon{font-size:30px}
.missionCard .missionContent{flex:1}
.missionCard h4{margin:0 0 4px}
.missionProgressBar{width:100%;height:6px;background:#0f172a;border-radius:3px;overflow:hidden}
.missionProgressBar .fill{height:100%;background:linear-gradient(90deg,#f59e0b,#eab308);transition:width 0.5s}

/* MOBA */
.mobaArena{max-width:900px;margin:20px auto;background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid #475569;border-radius:12px;padding:20px}

/* SCOREBOARD */
.mobaScoreboard{
 display:flex;justify-content:space-between;align-items:center;
 background:#0f172a;border-radius:10px;padding:12px 20px;
 margin-bottom:20px;font-size:16px;
}
.mobaScore{font-size:28px;font-weight:bold;letter-spacing:6px}
.mobaScore .userScore{color:#22c55e}
.mobaScore .enemyScore{color:#ef4444}
.mobaRoundInfo{opacity:0.8;font-size:14px}
.mobaScoreLabel{font-size:11px;opacity:0.6;letter-spacing:2px;text-align:center;margin-top:2px}

/* PICK PHASE (igual que antes) */
.mobaTeams{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.mobaTeam{flex:1;min-width:280px}
.mobaTeam h3{margin-top:0}
.mobaTeam.user h3{color:#22c55e}
.mobaTeam.enemy h3{color:#ef4444}
.mobaSlots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;min-height:180px;background:#0f172a;border-radius:8px;padding:10px}
.mobaSlot{background:#1e293b;border:2px dashed #475569;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:24px;opacity:0.5;min-height:120px}
.mobaSlot.filled{opacity:1;border-style:solid;padding:5px;display:block}
.mobaSlot img{max-width:100%;max-height:60px;object-fit:cover;border-radius:4px}
.mobaSlot .slotName{font-size:10px;margin-top:3px;text-align:center}
.mobaPickerSection{margin-top:20px;background:#0f172a;padding:15px;border-radius:10px}

/* BATTLE PHASE */
.mobaSection{margin:15px 0}
.mobaSection h3{margin:0 0 8px;letter-spacing:1px;font-size:15px}
.mobaSection.enemySection h3{color:#fca5a5}
.mobaSection.userSection h3{color:#86efac}

.mobaRow{
 display:grid;grid-template-columns:repeat(5,1fr);
 gap:8px;background:#0f172a;border-radius:8px;padding:10px;
}

/* ENEMY CARD (hint only) */
.enemyHintCard{
 background:repeating-linear-gradient(45deg,#1e293b 0,#1e293b 8px,#334155 8px,#334155 16px);
 border:2px solid #ef4444;border-radius:8px;
 padding:10px 6px;text-align:center;color:#fca5a5;
 min-height:130px;display:flex;flex-direction:column;
 justify-content:center;align-items:center;gap:4px;
 position:relative;
}
.enemyHintCard.used{
 opacity:0.3;background:#1e293b;border-color:#475569;
 filter:grayscale(80%);
}
.enemyHintCard .qmark{font-size:36px;font-weight:bold;color:#475569}
.enemyHintCard .hintLabel{font-size:9px;letter-spacing:1px;opacity:0.7}
.enemyHintCard .hintValue{font-size:11px;font-weight:bold;color:#fee2e2}
.enemyHintCard.used::after{
 content:"✗";position:absolute;font-size:50px;
 color:#dc2626;opacity:0.6;font-weight:bold;
}

/* USER CARD in battle row (clickable) */
.userBattleCard{
 cursor:pointer;transition:all 0.2s;
 padding:6px;background:#1e293b;border:2px solid #475569;
 border-radius:8px;text-align:center;font-size:11px;
 position:relative;
}
.userBattleCard:hover:not(.used){
 transform:translateY(-3px);
 border-color:#22c55e;box-shadow:0 4px 15px rgba(34,197,94,0.4);
}
.userBattleCard.used{opacity:0.3;cursor:not-allowed;filter:grayscale(70%)}
.userBattleCard.used::after{
 content:"✗";position:absolute;inset:0;
 display:flex;align-items:center;justify-content:center;
 font-size:50px;color:#dc2626;opacity:0.6;font-weight:bold;
}
.userBattleCard img{width:100%;height:70px;object-fit:cover;border-radius:4px}
.userBattleCard .ubcName{margin:4px 0 3px;font-weight:bold;font-size:11px}
.userBattleCard .miniStats{display:flex;gap:2px;justify-content:space-between;margin-top:3px}
.userBattleCard .miniStat{
 flex:1;font-size:9px;padding:1px 2px;border-radius:3px;font-weight:bold;
}
.userBattleCard .miniStat.attack{background:rgba(239,68,68,0.2);color:#fca5a5}
.userBattleCard .miniStat.velocidad{background:rgba(34,197,94,0.2);color:#86efac}
.userBattleCard .miniStat.defense{background:rgba(59,130,246,0.2);color:#93c5fd}

.mobaActionHint{
 text-align:center;background:#1e293b;padding:10px;
 border-radius:8px;margin:15px 0;border:1px solid #475569;
 font-size:13px;opacity:0.9;
}

/* SHOWDOWN */
#mobaShowdown{
 display:none;position:fixed;inset:0;
 background:rgba(0,0,0,0.92);z-index:990;
 align-items:center;justify-content:center;
 flex-direction:column;gap:20px;padding:20px;
}
#mobaShowdown.active{display:flex}
.showdownCards{
 display:flex;align-items:center;gap:25px;flex-wrap:wrap;justify-content:center;
}
.showdownCardWrap{
 transform:scale(0.5);opacity:0;
 animation:showdownIn 0.6s ease forwards;
}
.showdownCardWrap.right{animation-delay:0.3s}
.showdownCardWrap .card{transform:scale(1.2)}
@keyframes showdownIn{to{transform:scale(1.2);opacity:1}}
.showdownCardWrap.winner .card{box-shadow:0 0 40px gold;animation:winnerGlow 1.5s ease infinite alternate}
.showdownCardWrap.loser .card{filter:grayscale(60%) brightness(0.6);transform:scale(1)}
@keyframes winnerGlow{from{box-shadow:0 0 25px gold}to{box-shadow:0 0 50px gold}}
.statBadge.maxStat{
 transform:scale(1.15);
 filter:brightness(1.5);
 animation:maxStatPulse 0.6s ease infinite alternate;
}
@keyframes maxStatPulse{from{box-shadow:0 0 5px currentColor}to{box-shadow:0 0 18px currentColor}}
.vsLabel{
 font-size:60px;font-family:'Arial Black',sans-serif;
 color:#ef4444;text-shadow:0 0 20px #ef4444;
 opacity:0;animation:vsIn 0.5s 0.5s ease forwards;
}
@keyframes vsIn{to{opacity:1}}
.roundResultBanner{
 font-size:42px;font-weight:bold;letter-spacing:6px;
 padding:15px 40px;border-radius:14px;
 opacity:0;transform:scale(0.5);
 animation:bannerIn 0.5s 1.2s ease forwards;
}
.roundResultBanner.win{background:linear-gradient(135deg,#14532d,#22c55e);color:#fff;text-shadow:0 0 15px #22c55e}
.roundResultBanner.lose{background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;text-shadow:0 0 15px #ef4444}
.roundResultBanner.tie{background:linear-gradient(135deg,#374151,#6b7280);color:#fff}
@keyframes bannerIn{to{opacity:1;transform:scale(1)}}
.statComparison{
 background:#1e293b;border-radius:10px;padding:10px 20px;
 margin-top:10px;font-size:14px;opacity:0;
 animation:bannerIn 0.5s 1.5s ease forwards;
}
.statComparison .vs{margin:0 10px;opacity:0.6}

.mobaPower{font-size:24px;font-weight:bold;text-align:center;margin:10px 0}
.mobaResult{font-size:48px;font-weight:bold;text-align:center;padding:20px;border-radius:12px;margin:20px 0;letter-spacing:5px}
.mobaResult.win{background:linear-gradient(135deg,#14532d,#22c55e);color:#fff;text-shadow:0 0 20px #22c55e}
.mobaResult.lose{background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;text-shadow:0 0 20px #ef4444}
.mobaResult.tie{background:linear-gradient(135deg,#374151,#6b7280);color:#fff}

/* EXPEDICIONES */
.expedCard{
 background:linear-gradient(135deg,#1e293b,#0c4a6e);
 border:2px solid #0891b2;border-radius:12px;
 padding:18px;margin:12px auto;max-width:650px;text-align:left;
 position:relative;
}
.expedCard.active{border-color:#f59e0b;background:linear-gradient(135deg,#1e293b,#451a03)}
.expedCard.ready{border-color:#22c55e;background:linear-gradient(135deg,#1e293b,#14532d);animation:expedReady 1.5s ease infinite alternate}
@keyframes expedReady{from{box-shadow:0 0 10px rgba(34,197,94,0.3)}to{box-shadow:0 0 30px rgba(34,197,94,0.6)}}
.expedCard h3{margin:0 0 6px;color:#67e8f9;display:flex;align-items:center;gap:8px}
.expedCard.active h3{color:#fbbf24}
.expedCard.ready h3{color:#86efac}
.expedDesc{font-size:13px;opacity:0.85;margin-bottom:12px}
.expedMeta{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;
 margin:10px 0;
}
.expedMetaItem{
 background:#0f172a;padding:8px 12px;border-radius:6px;
 font-size:12px;
}
.expedMetaItem .label{display:block;font-size:10px;opacity:0.6;letter-spacing:1px}
.expedMetaItem .value{font-weight:bold;font-size:14px;color:#fde047}
.expedReward{color:#eab308;font-weight:bold;margin:10px 0;font-size:14px}
.expedCountdown{
 background:#0f172a;padding:10px;border-radius:8px;
 font-size:18px;font-weight:bold;text-align:center;
 color:#fbbf24;font-family:'Courier New',monospace;
 letter-spacing:2px;margin:10px 0;
 border:1px solid #f59e0b;
}
.expedCountdown.done{color:#86efac;border-color:#22c55e}
.expedProgressBar{height:8px;background:#0f172a;border-radius:4px;overflow:hidden;margin:8px 0;border:1px solid #334155}
.expedProgressBar .fill{height:100%;background:linear-gradient(90deg,#0891b2,#22c55e);transition:width 0.5s}
.expedSelectionArea{
 background:#0f172a;border-radius:8px;padding:10px;
 margin-top:12px;max-height:300px;overflow-y:auto;
}
.expedLiveStats{
 display:flex;justify-content:space-around;gap:10px;
 background:#1e293b;padding:10px;border-radius:8px;
 margin:10px 0;font-size:13px;flex-wrap:wrap;
}
.expedLiveStats .liveStatItem strong{display:block;font-size:18px;margin-top:2px}
.expedLiveStats .durationStat strong{color:#06b6d4}
.expedLiveStats .failStat strong{color:#fca5a5}
.expedLiveStats .countStat strong{color:#86efac}
.expedInfoBlock{background:#0f172a;padding:8px 12px;border-radius:6px;font-size:12px;margin:8px 0;opacity:0.85}
.btnExped{background:linear-gradient(135deg,#06b6d4,#0891b2) !important;padding:10px 24px;font-weight:bold}

/* ÁLBUM VIRTUAL ESTILO PANINI */

/* Contenedor de página completa con navegación */
.albumStage{
 max-width:980px;margin:20px auto;
 position:relative;
}
.albumNav{
 display:flex;justify-content:space-between;align-items:center;
 padding:8px 4px;margin-bottom:12px;
 font-size:14px;
}
.albumNav .pageIndicator{
 background:#1e293b;padding:6px 14px;border-radius:20px;
 letter-spacing:1px;color:#fde047;font-weight:bold;
}
.albumNavBtn{
 background:linear-gradient(135deg,#d97706,#b45309);
 color:#fff;border:2px solid #f59e0b;
 padding:10px 20px;border-radius:10px;cursor:pointer;
 font-weight:bold;letter-spacing:1px;font-size:13px;
 box-shadow:0 4px 12px rgba(217,119,6,0.4);
 transition:all 0.2s;
}
.albumNavBtn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 18px rgba(217,119,6,0.6)}
.albumNavBtn:disabled{opacity:0.3;cursor:not-allowed;background:#475569;border-color:#64748b;box-shadow:none}

/* PORTADA / CONTRATAPA */
.albumCoverPage{
 background:linear-gradient(135deg,#1e3a8a,#1e40af,#312e81);
 background-size:cover;background-position:center;
 border-radius:16px;
 min-height:580px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:50px 30px;text-align:center;
 box-shadow:0 8px 30px rgba(0,0,0,0.6);
 border:3px solid #1e293b;
 position:relative;overflow:hidden;
}
.albumCoverPage.withImage{background:#0f172a;background-size:cover;background-position:center}
.albumCoverPage::before{
 content:"";position:absolute;inset:0;
 background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(255,255,255,0.02) 12px,rgba(255,255,255,0.02) 24px);
 pointer-events:none;
}
.albumCoverPage > *{position:relative;z-index:1}
.coverBigTitle{
 font-size:54px;font-weight:900;
 color:#fde047;letter-spacing:6px;
 text-shadow:0 0 20px rgba(0,0,0,0.8),0 4px 8px rgba(0,0,0,0.5);
 margin:0;font-family:'Arial Black',sans-serif;
}
.coverSub{
 font-size:18px;letter-spacing:4px;
 color:#fef3c7;opacity:0.9;margin-top:10px;
 text-shadow:0 2px 5px rgba(0,0,0,0.8);
}
.coverPagesCount{
 background:rgba(0,0,0,0.5);
 padding:10px 25px;border-radius:30px;
 margin-top:30px;letter-spacing:2px;
 color:#fde047;font-weight:bold;border:1px solid #d97706;
}
.coverStartBtn{
 margin-top:30px;background:linear-gradient(135deg,#22c55e,#16a34a);
 color:#fff;border:2px solid #4ade80;
 padding:14px 32px;border-radius:14px;cursor:pointer;
 font-weight:bold;font-size:16px;letter-spacing:2px;
 box-shadow:0 6px 18px rgba(34,197,94,0.5);
}
.coverStartBtn:hover{transform:translateY(-3px)}

/* PÁGINA ESTILO PANINI */
.paniniPage{
 background:
  linear-gradient(135deg,rgba(30,58,138,0.85),rgba(30,64,175,0.85)),
  repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,0.025) 10px,rgba(255,255,255,0.025) 20px);
 background-color:#1e3a8a;
 background-size:cover;background-position:center;
 border-radius:16px;
 padding:30px 25px;min-height:540px;
 box-shadow:0 8px 30px rgba(0,0,0,0.6);
 border:3px solid #1e293b;
 position:relative;overflow:hidden;
}
.paniniPage.withBg{background:#0f172a;background-size:cover;background-position:center}
.paniniPage.withBg::after{
 content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(30,58,138,0.45),rgba(30,64,175,0.25));
 pointer-events:none;
}
.paniniPage > *{position:relative;z-index:1}

.paniniHeader{
 background:rgba(255,255,255,0.97);
 color:#1e293b;
 border-radius:12px;padding:12px 22px;
 display:inline-flex;align-items:center;gap:14px;
 margin-bottom:20px;
 box-shadow:0 4px 12px rgba(0,0,0,0.3);
 border:2px solid rgba(0,0,0,0.1);
}
.paniniHeader .codeBox{
 background:linear-gradient(135deg,#d97706,#b45309);
 color:#fff;padding:6px 14px;border-radius:8px;
 font-weight:900;font-size:20px;letter-spacing:2px;
 box-shadow:0 2px 4px rgba(0,0,0,0.3);
}
.paniniHeader .pageTitle{
 font-size:20px;font-weight:900;letter-spacing:3px;
 margin:0;color:#1e3a8a;
}
.paniniHeader .pageSubtitle{
 font-size:11px;opacity:0.7;letter-spacing:1px;
 margin-top:2px;
}

.paniniSlotsGrid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
 gap:10px;
 max-width:100%;
}

.paniniSlot{
 background:linear-gradient(160deg,#fcd34d,#f59e0b 50%,#d97706);
 border-radius:8px;
 aspect-ratio:3/4;
 padding:7px;
 display:flex;flex-direction:column;
 position:relative;
 box-shadow:0 4px 8px rgba(0,0,0,0.4),inset 0 1px 2px rgba(255,255,255,0.4);
 border:1px solid rgba(0,0,0,0.15);
}
.paniniSlot .slotTopBar{
 background:rgba(0,0,0,0.3);
 height:14px;border-radius:3px;margin-bottom:4px;
 display:flex;align-items:center;justify-content:center;
 font-size:8px;letter-spacing:1px;color:rgba(255,255,255,0.6);
 font-weight:bold;
}
.paniniSlot .slotCodeNum{
 text-align:center;
 color:rgba(0,0,0,0.75);
 margin:auto 0;
 line-height:1.1;
}
.paniniSlot .slotCodeNum .code{font-weight:900;font-size:15px;letter-spacing:1px;display:block}
.paniniSlot .slotCodeNum .num{font-weight:900;font-size:30px;letter-spacing:1px;display:block;margin-top:2px}
.paniniSlot .slotPlayerName{
 font-size:8px;text-align:center;
 color:rgba(0,0,0,0.75);
 font-weight:bold;letter-spacing:0.5px;
 text-transform:uppercase;
 margin-top:auto;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Slot pegable: borde brillando verde, indica que tenés la carta */
.paniniSlot.canPaste{
 cursor:pointer;
 border:2px solid #22c55e;
 animation:canPasteGlow 1.6s ease infinite;
 transition:transform 0.2s;
}
@keyframes canPasteGlow{
 0%,100%{box-shadow:0 4px 8px rgba(0,0,0,0.4),inset 0 1px 2px rgba(255,255,255,0.4),0 0 0 0 rgba(34,197,94,0.5)}
 50%{box-shadow:0 4px 8px rgba(0,0,0,0.4),inset 0 1px 2px rgba(255,255,255,0.4),0 0 20px 6px rgba(34,197,94,0.6)}
}
.paniniSlot.canPaste:hover{
 transform:scale(1.06) translateY(-3px);
 animation:none;
 box-shadow:0 6px 18px rgba(0,0,0,0.5),inset 0 1px 2px rgba(255,255,255,0.4),0 0 25px 8px rgba(34,197,94,0.8);
}
.paniniSlot.canPaste::before{
 content:"+ PEGAR";
 position:absolute;top:50%;left:50%;
 transform:translate(-50%,-50%);
 background:rgba(34,197,94,0.95);
 color:#fff;font-weight:bold;font-size:11px;
 padding:5px 12px;border-radius:6px;
 letter-spacing:1px;
 opacity:0;pointer-events:none;
 transition:opacity 0.2s;
 z-index:2;
 box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.paniniSlot.canPaste:hover::before{opacity:1}

/* Animación de pegado al hacer click */
@keyframes stickerPaste{
 0%{transform:scale(0.5) rotate(-15deg);opacity:0}
 60%{transform:scale(1.15) rotate(3deg);opacity:1}
 100%{transform:scale(1) rotate(0);opacity:1}
}
.paniniSlot.justPasted{animation:stickerPaste 0.6s cubic-bezier(.34,1.56,.64,1) forwards}

/* Slot con sticker pegado (carta obtenida) */
.paniniSlot.owned{
 background:#0f172a;
 padding:5px;
 border:2px solid #fde047;
 box-shadow:0 0 14px rgba(253,224,71,0.5),0 4px 8px rgba(0,0,0,0.5);
}
.paniniSlot.owned .stickerCard{
 width:100%;height:100%;
 display:flex;flex-direction:column;
 background:linear-gradient(135deg,#1e293b,#334155);
 border-radius:5px;overflow:hidden;
 position:relative;
}
.paniniSlot.owned img{
 width:100%;flex:1;object-fit:cover;
}
.paniniSlot.owned .stickerInfo{
 background:rgba(0,0,0,0.85);
 padding:3px 4px;
 font-size:8px;color:#fff;text-align:center;
 line-height:1.2;
}
.paniniSlot.owned .stickerInfo .stickerName{
 font-weight:bold;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.paniniSlot.owned .stickerInfo .stickerSub{opacity:0.7;font-size:7px}
.paniniSlot.owned.legendary{border-color:#eab308}
.paniniSlot.owned.mythic{border-color:#ef4444;box-shadow:0 0 18px rgba(239,68,68,0.6),0 4px 8px rgba(0,0,0,0.5)}
.paniniSlot.owned.epic{border-color:#a855f7}

/* Footer info de página */
.paniniFooter{
 margin-top:20px;
 display:flex;justify-content:space-between;align-items:center;
 background:rgba(0,0,0,0.4);
 padding:10px 16px;border-radius:10px;
 font-size:12px;color:#fef3c7;
 border:1px solid rgba(255,255,255,0.1);
}
.paniniFooter .completion{font-weight:bold;letter-spacing:1px}
.paniniFooter .completion.done{color:#86efac}

/* Admin: preview slots (mismo de antes pero ajuste) */
.albumSlotPreview{display:inline-block;width:90px;margin:4px;padding:6px;background:#334155;border-radius:6px;font-size:11px;text-align:center;position:relative}
.albumSlotPreview img{width:100%;height:50px;object-fit:cover;border-radius:4px}
.albumSlotPreview .slotPreviewName{margin-top:3px;font-size:10px}
.albumSlotPreview .slotPreviewLabel{font-size:9px;color:#fde047;font-weight:bold;margin-top:2px}
.albumSlotPreview .removeSlotBtn{position:absolute;top:-6px;right:-6px;background:#dc2626;color:#fff;border:none;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:11px;line-height:1}

.adminCoverPreview{
 width:120px;height:170px;
 background-size:cover;background-position:center;
 background-color:#1e293b;
 border-radius:8px;display:inline-block;
 margin:6px 8px 6px 0;border:2px solid #475569;
 vertical-align:middle;
}

/* CLOUD SYNC (T5) */
#offlineBadge{display:none;align-items:center;gap:6px;background:#451a03;color:#fbbf24;border:1px solid #92400e;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:bold;cursor:pointer;min-height:32px}
#cloudOverlay,#migrateOverlay{position:fixed;inset:0;background:rgba(2,6,23,0.88);display:none;align-items:center;justify-content:center;z-index:100000}
#cloudOverlay .panel,#migrateOverlay .panel{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:28px;max-width:420px;width:90%;text-align:center;font-family:Arial,sans-serif}
#cloudOverlay h3,#migrateOverlay h3{font-family:"Arial Black",Arial,sans-serif;color:#f8fafc;margin:0 0 12px;font-size:20px}
#cloudOverlay p,#migrateOverlay p{color:#94a3b8;font-size:14px;line-height:1.5;margin:0 0 8px}
#cloudOverlay .code{font-family:Consolas,monospace;font-size:22px;letter-spacing:2px;background:#0f172a;color:#f8fafc;padding:14px;border-radius:8px;margin:16px 0;user-select:all;font-weight:bold;word-break:break-all}
#cloudOverlay button,#migrateOverlay button{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-weight:bold;font-size:15px;cursor:pointer;min-height:44px}

/* AMIGOS Y TRADES (T7b) */
.navBtn.amigos:hover{border-color:#ec4899;box-shadow:0 10px 30px rgba(236,72,153,0.4)}
.codeBox{display:flex;align-items:center;gap:10px;background:#0f172a;border:1px dashed #475569;border-radius:12px;padding:10px 14px;margin:0 0 14px;flex-wrap:wrap}
.codeBox .codeVal{font-family:Consolas,monospace;font-size:22px;letter-spacing:3px;color:#f8fafc;font-weight:bold;user-select:all}
.codeBox .codeLabel{font-size:11px;color:#94a3b8;letter-spacing:1px}
.btnSm{border:none;border-radius:8px;padding:10px 14px;font-weight:bold;font-size:13px;cursor:pointer;min-height:44px;min-width:44px;color:#fff}
.btnOk{background:#16a34a}.btnNo{background:#dc2626}.btnNeutral{background:#334155}.btnBlue{background:#2563eb}
.addFriendRow{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.addFriendRow input{flex:1;min-width:150px;background:#0f172a;border:1px solid #475569;border-radius:10px;padding:10px 12px;color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:2px;min-height:44px;box-sizing:border-box;font-family:Consolas,monospace}
.socialSection{margin-bottom:24px}
.socialSection h3{font-size:14px;color:#cbd5e1;margin:0 0 10px;text-transform:uppercase;letter-spacing:1px}
.socialCard{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.socialRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.socialRow .who{font-weight:bold;font-size:13px;color:#f1f5f9;word-break:break-all}
.socialRow .spacer{flex:1}
.socialRow .meta{font-size:11px;color:#64748b}
.tradeChips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{display:inline-flex;align-items:center;gap:4px;background:#0f172a;border:1.5px solid #475569;border-radius:999px;padding:5px 11px;font-size:12px;color:#f1f5f9}
.chip.common{border-color:#22c55e}.chip.rare{border-color:#3b82f6}.chip.epic{border-color:#a855f7}.chip.legendary{border-color:#eab308}.chip.mythic{border-color:#ef4444}
.tradeArrow{text-align:center;color:#64748b;margin:2px 0;font-size:12px}
.composerBox{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:14px}
.composerBox select{width:100%;background:#0f172a;color:#fff;border:1px solid #475569;border-radius:10px;padding:10px;min-height:44px;font-size:14px;margin-bottom:12px;box-sizing:border-box}
.pickerGrid{display:flex;flex-wrap:wrap;gap:6px;max-height:190px;overflow-y:auto;padding:2px}
.pickerChip{background:#0f172a;border:1.5px solid #475569;border-radius:999px;padding:10px 13px;font-size:12px;color:#f1f5f9;cursor:pointer;min-height:44px;box-sizing:border-box}
.pickerChip.sel{border-color:#22c55e;background:#14532d}
.pickerChip.dis{opacity:0.35;cursor:not-allowed}
.composerHint{font-size:11px;color:#64748b;margin:4px 0 8px}
.composerActions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}