/* =============================================================
   DESMOCHEE · COLECCIÓN / PERSONALIZACIÓN · FASE 1
   Capa visual independiente. No modifica motor de juego.
   ============================================================= */

.collection-profile-entry{border-color:rgba(87,212,154,.12)!important}
.collection-profile-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.collection-profile-equipped{min-width:0;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid rgba(255,255,255,.065);border-radius:14px;background:rgba(255,255,255,.025)}
.collection-profile-equipped>div{min-width:0}
.collection-profile-equipped small{display:block;color:rgba(177,203,190,.60);font-size:.48rem;letter-spacing:.06em}
.collection-profile-equipped strong{display:block;margin-top:3px;color:#eaf5ef;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collection-summary-mark{width:30px;height:30px;flex:0 0 30px;border:1px solid rgba(87,212,154,.13);border-radius:10px;background:rgba(87,212,154,.035);position:relative}
.collection-summary-mark.table-mark::before{content:"";position:absolute;inset:7px 5px;border:1.4px solid #9edfc0;border-radius:4px}
.collection-summary-mark.card-mark::before,.collection-summary-mark.card-mark::after{content:"";position:absolute;width:12px;height:17px;border:1.3px solid #9edfc0;border-radius:3px;left:8px;top:6px;background:rgba(8,39,28,.8)}
.collection-summary-mark.card-mark::after{transform:translate(4px,-2px)}
.collection-phase-note{margin:9px 1px 0!important;color:rgba(177,203,190,.52)!important;font-size:.52rem!important;line-height:1.38!important}

.collection-overlay{position:fixed;inset:0;z-index:4400;background:rgba(2,13,9,.97);overflow-y:auto;overscroll-behavior:contain;color:#f2f8f5}
.collection-overlay[hidden]{display:none!important}
.collection-shell{width:min(100%,480px);min-height:100%;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 14px max(28px,env(safe-area-inset-bottom));background:radial-gradient(circle at 15% 4%,rgba(87,212,154,.12),transparent 25%),linear-gradient(180deg,#0a291e,#061a13 48%,#03100c)}
.collection-header{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:9px;padding:2px 0 12px}
.collection-header>div:nth-child(2){min-width:0}
.collection-header small{display:block;color:#62d6a0;font-size:.50rem;letter-spacing:.105em;font-weight:800}
.collection-header h2{margin:2px 0 0;font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:1.02rem;letter-spacing:.08em}
.collection-back{width:40px;height:40px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.035);font-size:1.1rem}
.collection-wallet{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid rgba(232,197,110,.16);border-radius:13px;background:rgba(255,255,255,.035);color:#f0d27e;font-size:.69rem}
.collection-coin{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#f0d481,#bd8d2e);color:#4b350e;font-size:.48rem;font-weight:900}

.collection-progress-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.collection-progress-strip>div{padding:8px 4px;border:1px solid rgba(255,255,255,.06);border-radius:13px;background:rgba(255,255,255,.022);text-align:center}
.collection-progress-strip strong{display:block;font-size:.72rem}.collection-progress-strip small{display:block;margin-top:2px;color:rgba(177,203,190,.55);font-size:.43rem;text-transform:uppercase}

.collection-preview-card{padding:9px;border:1px solid rgba(255,255,255,.085);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.016)),rgba(10,42,31,.60);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.collection-preview-label{display:flex;align-items:end;justify-content:space-between;gap:8px;padding:4px 4px 9px}
.collection-preview-label>div{min-width:0}.collection-preview-label small{display:block;color:#69daa4;font-size:.46rem;font-weight:800;letter-spacing:.08em}.collection-preview-label strong{display:block;margin-top:3px;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collection-preview-label>span{color:rgba(177,203,190,.52);font-size:.49rem;white-space:nowrap}
.collection-table-preview{--table-bg:linear-gradient(145deg,#134b38,#08291e 64%,#061c15);--table-motif:none;--table-motif-color:rgba(255,255,255,.10);--face-bg:linear-gradient(145deg,#fffdf7,#eee8dc);--black-suit:#17221d;--red-suit:#b83d42;--back-bg:radial-gradient(circle,#54d296 0 2px,transparent 2.4px) 0 0/11px 11px,linear-gradient(145deg,#0f5c40,#092d22);--back-motif:none;--back-motif-color:rgba(255,255,255,.62);position:relative;height:215px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:var(--table-bg);box-shadow:inset 0 0 0 5px rgba(0,0,0,.13),inset 0 0 0 7px rgba(255,255,255,.025)}
.collection-table-inner{position:absolute;inset:11px;border:1px solid rgba(255,255,255,.05);border-radius:14px}
.collection-table-motif{position:absolute;inset:20px;background:var(--table-motif-color);opacity:.92;-webkit-mask:var(--table-motif) center/62% 62% no-repeat;mask:var(--table-motif) center/62% 62% no-repeat;pointer-events:none}
.collection-preview-deck{position:absolute;right:14px;top:14px;width:40px;height:58px;border:1px solid rgba(255,255,255,.20);border-radius:8px;background:var(--back-bg);box-shadow:0 7px 16px rgba(0,0,0,.27)}
.collection-preview-deck::before{content:"";position:absolute;inset:6px;background:var(--back-motif-color);-webkit-mask:var(--back-motif) center/68% 68% no-repeat;mask:var(--back-motif) center/68% 68% no-repeat;opacity:.82}.collection-preview-deck::after{content:"♠";position:absolute;inset:6px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:5px;color:rgba(255,255,255,.55);font-family:Georgia,serif;font-size:.9rem}.collection-preview-deck.has-motif::after{display:none}
.collection-preview-hand{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);display:flex}
.collection-face-card{position:relative;width:46px;height:66px;margin-left:-8px;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:var(--face-bg);box-shadow:0 7px 18px rgba(0,0,0,.28);color:var(--black-suit);font-family:Georgia,"Times New Roman",serif}.collection-face-card:first-child{margin-left:0}.collection-face-card.red{color:var(--red-suit)}.collection-face-card::before{content:"";position:absolute;inset:9px;background:currentColor;opacity:.10;-webkit-mask:var(--back-motif) center/70% 70% no-repeat;mask:var(--back-motif) center/70% 70% no-repeat}.collection-face-card .rank{position:absolute;z-index:2;left:5px;top:3px;font-size:.79rem;font-weight:800}.collection-face-card .corner-suit{position:absolute;z-index:2;left:6px;top:18px;font-size:.62rem}.collection-face-card .big-suit{position:absolute;z-index:2;inset:0;display:grid;place-items:center;font-size:1.5rem;opacity:.88}.collection-face-card::after{content:"";position:absolute;inset:4px;border:1px solid rgba(60,80,70,.10);border-radius:6px}
.collection-palette-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.collection-palette-row>div{padding:7px 8px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.022)}.collection-palette-row small{display:block;color:rgba(177,203,190,.53);font-size:.43rem;letter-spacing:.045em}.collection-palette-row strong{display:block;margin-top:3px;font-size:.55rem}

.collection-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}.collection-tab{min-height:42px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.028);color:#b8cbc2;font-size:.63rem;font-weight:850}.collection-tab.active{border-color:rgba(87,212,154,.25);background:linear-gradient(#68dca8,#42c88e);color:#062117}
.collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px;padding-bottom:8px}
.collection-item{position:relative;min-width:0;padding:8px;border:1px solid rgba(255,255,255,.065);border-radius:17px;background:rgba(255,255,255,.026)}.collection-item.selected{border-color:rgba(87,212,154,.31);box-shadow:0 0 0 1px rgba(87,212,154,.06)}.collection-item.is-equipped{background:linear-gradient(145deg,rgba(87,212,154,.055),rgba(255,255,255,.02))}.collection-thumb{--thumb-bg:linear-gradient(145deg,#134b38,#08291e);--thumb-motif:none;--thumb-motif-color:rgba(255,255,255,.14);height:76px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.065);border-radius:12px;background:var(--thumb-bg)}.collection-thumb.table::after{content:"";position:absolute;inset:7px;background:var(--thumb-motif-color);-webkit-mask:var(--thumb-motif) center/60% 60% no-repeat;mask:var(--thumb-motif) center/60% 60% no-repeat}.collection-thumb.table.no-motif::after{content:"♠";display:grid;place-items:center;background:none!important;-webkit-mask:none!important;mask:none!important;color:rgba(255,255,255,.10);font-family:Georgia;font-size:1.8rem}.collection-thumb.cards{display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.016)}.collection-mini-face,.collection-mini-back{width:43px;height:61px;border:1px solid rgba(255,255,255,.18);border-radius:8px;box-shadow:0 5px 12px rgba(0,0,0,.22)}.collection-mini-face{position:relative;background:var(--face-bg);color:var(--black-suit);font-family:Georgia}.collection-mini-face::before{content:"A♠";position:absolute;left:5px;top:4px;font-size:.68rem;font-weight:800}.collection-mini-face::after{content:"";position:absolute;inset:8px;background:currentColor;opacity:.11;-webkit-mask:var(--back-motif) center/68% 68% no-repeat;mask:var(--back-motif) center/68% 68% no-repeat}.collection-mini-back{position:relative;background:var(--back-bg)}.collection-mini-back::before{content:"";position:absolute;inset:6px;background:var(--back-motif-color);opacity:.78;-webkit-mask:var(--back-motif) center/68% 68% no-repeat;mask:var(--back-motif) center/68% 68% no-repeat}.collection-mini-back::after{content:"♠";position:absolute;inset:6px;display:grid;place-items:center;color:rgba(255,255,255,.58);font-family:Georgia}.collection-mini-back.has-motif::after{display:none}
.collection-item h3{margin:7px 0 2px;color:#eef6f2;font-size:.65rem}.collection-item>p{margin:0;color:rgba(177,203,190,.57);font-size:.47rem;line-height:1.32;min-height:2.55em}.collection-item-meta{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:6px}.collection-rarity{padding:3px 5px;border:1px solid rgba(255,255,255,.08);border-radius:999px;font-size:.40rem;font-weight:900}.collection-rarity.base{color:#b9cbc3}.collection-rarity.rare{color:#79baff;border-color:rgba(121,186,255,.18)}.collection-rarity.epic{color:#c99cff;border-color:rgba(201,156,255,.18)}.collection-rarity.legendary{color:#f0ce79;border-color:rgba(240,206,121,.20)}.collection-price{color:#efd487;font-size:.46rem;font-weight:850}.collection-item.is-equipped .collection-price{color:#77dda9}.collection-requirement{margin-top:6px;padding:5px 6px;border:1px solid rgba(255,255,255,.05);border-radius:9px;color:rgba(177,203,190,.50);font-size:.42rem;line-height:1.28}.collection-requirement.met{color:#75d9a7;border-color:rgba(87,212,154,.08)}
.collection-action-bar{position:sticky;bottom:7px;z-index:3;margin-top:5px;padding:8px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:rgba(5,28,20,.92);backdrop-filter:blur(16px);box-shadow:0 12px 30px rgba(0,0,0,.25)}.collection-action-bar p{margin:0 2px 7px;color:rgba(177,203,190,.52);font-size:.46rem;text-align:center}.collection-action-bar button{width:100%;min-height:44px;border:0;border-radius:13px;background:linear-gradient(#68dca8,#42c88e);color:#062117;font-size:.61rem;font-weight:900}.collection-action-bar button:disabled{opacity:.48}
.collection-footer{padding:13px 2px 2px;text-align:center}.collection-footer button{min-height:34px;padding:0 13px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025);color:#c4d8ce;font-size:.49rem;font-weight:800}.collection-footer p{margin:8px auto 0;max-width:360px;color:rgba(177,203,190,.40);font-size:.43rem;line-height:1.4}

.collection-credits-overlay{position:fixed;inset:0;z-index:4500;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,9,6,.68);backdrop-filter:blur(10px)}.collection-credits-overlay[hidden]{display:none!important}.collection-credits-card{width:min(100%,480px);max-height:min(82dvh,700px);overflow-y:auto;padding:10px 14px max(18px,env(safe-area-inset-bottom));border:1px solid rgba(255,255,255,.10);border-radius:24px 24px 0 0;background:linear-gradient(180deg,#163e2f,#071d15 62%,#04120d);color:#edf7f2;box-shadow:0 -20px 50px rgba(0,0,0,.38)}.collection-credits-handle{width:42px;height:4px;margin:2px auto 12px;border-radius:999px;background:rgba(255,255,255,.14)}.collection-credits-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}.collection-credits-card header small{color:#64d6a0;font-size:.46rem;letter-spacing:.09em}.collection-credits-card h2{margin:2px 0 0;font-size:.88rem}.collection-credits-card header button{width:34px;height:34px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.03);font-size:1rem}.collection-credit-intro,.collection-credit-note{color:rgba(189,212,201,.68);font-size:.55rem;line-height:1.5}.collection-credit-group{margin-top:9px;padding:9px 10px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.02)}.collection-credit-group strong{font-size:.61rem;color:#eaf6f0}.collection-credit-group p{margin:3px 0 0;color:rgba(183,207,195,.61);font-size:.52rem;line-height:1.45}.collection-credit-links{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.collection-credit-links a{min-height:38px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(87,212,154,.12);border-radius:11px;background:rgba(87,212,154,.035);color:#bdebd3;text-decoration:none;font-size:.48rem;font-weight:850}

@media(max-width:380px){.collection-grid{gap:7px}.collection-item{padding:7px}.collection-preview-hand .collection-face-card{width:43px;height:63px}.collection-profile-summary{grid-template-columns:1fr}.collection-credit-links{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.collection-overlay,.collection-credits-overlay{scroll-behavior:auto}}

/* =============================================================
   DESMOCHEE · COLECCIÓN FASE 2 · SKINS EN PARTIDA OFFLINE
   -------------------------------------------------------------
   Solo pinta nodos existentes. No modifica geometría, drag/drop,
   hitboxes, IDs ni estructura DOM.
   ============================================================= */

/* Mesa equipada: reemplaza únicamente la superficie visual. */
.game-screen.collection-game-skin .pilot-table {
  background: var(--collection-game-table-bg) !important;
}

/* Sin motivo, conservamos la textura discreta de la UI híbrida. */
.game-screen.collection-game-skin:not(.collection-table-has-motif) .pilot-table::before {
  background:
    linear-gradient(rgba(255,255,255,.010) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.010) 1px, transparent 1px) !important;
  background-size: 26px 26px !important;
  opacity: .42 !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Motivo del set: grande, sutil y detrás de toda la interfaz. */
.game-screen.collection-game-skin.collection-table-has-motif .pilot-table::before {
  content: "" !important;
  position: absolute !important;
  inset: 5% 5% 8% !important;
  pointer-events: none !important;
  background: var(--collection-game-table-motif-color) !important;
  opacity: .72 !important;
  -webkit-mask: var(--collection-game-table-motif) center 46% / min(58vw, 255px) min(58vw, 255px) no-repeat !important;
  mask: var(--collection-game-table-motif) center 46% / min(58vw, 255px) min(58vw, 255px) no-repeat !important;
}

/* Centro algo más transparente para que el motivo se perciba sin molestar. */
.game-screen.collection-game-skin.collection-table-has-motif .table-center {
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.018), transparent 48%),
    rgba(2, 16, 12, .20) !important;
}

/* =============================================================
   FRENTES DE CARTA
   ============================================================= */
.game-screen.collection-game-skin .playing-card,
.game-screen.collection-game-skin .discard-face,
.game-screen.collection-game-skin .table-card,
.game-screen.collection-game-skin .draft-card,
.game-screen.collection-game-skin .mini-card {
  background: var(--collection-game-face-bg) !important;
  color: var(--collection-game-black) !important;
}

.game-screen.collection-game-skin .playing-card.red,
.game-screen.collection-game-skin .discard-face.red,
.game-screen.collection-game-skin .table-card.red,
.game-screen.collection-game-skin .draft-card.red,
.game-screen.collection-game-skin .mini-card.red {
  color: var(--collection-game-red) !important;
}

/* Marca de agua solo en cartas suficientemente grandes. */
.game-screen.collection-game-skin.collection-card-has-motif .playing-card::before,
.game-screen.collection-game-skin.collection-card-has-motif .discard-face::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  pointer-events: none !important;
  background: currentColor !important;
  opacity: .09 !important;
  -webkit-mask: var(--collection-game-card-motif) center / 68% 68% no-repeat !important;
  mask: var(--collection-game-card-motif) center / 68% 68% no-repeat !important;
}

.game-screen.collection-game-skin.collection-card-has-motif .playing-card .card-corner,
.game-screen.collection-game-skin.collection-card-has-motif .playing-card .card-center-symbol,
.game-screen.collection-game-skin.collection-card-has-motif .discard-face .discard-value,
.game-screen.collection-game-skin.collection-card-has-motif .discard-face .discard-symbol {
  z-index: 2;
}

/* =============================================================
   REVERSOS: MAZO + BOTS
   ============================================================= */
.game-screen.collection-game-skin .deck-card:not(.empty-deck),
.game-screen.collection-game-skin .deck-card:not(.empty-deck)::before,
.game-screen.collection-game-skin .deck-card:not(.empty-deck)::after,
.game-screen.collection-game-skin .bot-card-back {
  background: var(--collection-game-back-bg) !important;
}

/* Los estilos particulares de Bot 1/2/3 dejan de sobreescribir la baraja elegida. */
.game-screen.collection-game-skin .bot-seat.bot-skin-1 .bot-card-back,
.game-screen.collection-game-skin .bot-seat.bot-skin-2 .bot-card-back,
.game-screen.collection-game-skin .bot-seat.bot-skin-3 .bot-card-back {
  background: var(--collection-game-back-bg) !important;
}

/* Emblema del mazo. Para skins sin dibujo se conserva el símbolo original. */
.game-screen.collection-game-skin.collection-card-has-motif .deck-emblem {
  position: relative;
  color: transparent !important;
  background: rgba(0,0,0,.10) !important;
}
.game-screen.collection-game-skin.collection-card-has-motif .deck-emblem::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--collection-game-card-motif-color);
  -webkit-mask: var(--collection-game-card-motif) center / contain no-repeat;
  mask: var(--collection-game-card-motif) center / contain no-repeat;
}

/* Motivo pequeño en las cartas ocultas de bots. */
.game-screen.collection-game-skin.collection-card-has-motif .bot-card-back::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background: var(--collection-game-card-motif-color);
  opacity: .68;
  -webkit-mask: var(--collection-game-card-motif) center / contain no-repeat;
  mask: var(--collection-game-card-motif) center / contain no-repeat;
}

/* La selección/arrastre sigue usando las sombras funcionales existentes. */
.game-screen.collection-game-skin .playing-card.dragging,
.game-screen.collection-game-skin .table-card.dragging-table-card,
.game-screen.collection-game-skin .draft-card.dragging-draft {
  isolation: isolate;
}



/* =============================================================
   FASE 2.3.2 · CONSISTENCIA VISUAL DE CARTAS TRANSITORIAS
   -------------------------------------------------------------
   Las cartas voladoras (reparto / cambio / descarte bot) y el
   cuadro de CAMBIO usan la misma skin equipada por el jugador.
   ============================================================= */

.deal-fly-card.collection-themed {
  border-color: rgba(255,255,255,.22) !important;
  background: var(--flyer-back-bg) !important;
  color: var(--flyer-card-motif-color, rgba(255,255,255,.70)) !important;
}

.deal-fly-card.collection-themed.face {
  background: var(--flyer-face-bg) !important;
  color: var(--flyer-black) !important;
}

.deal-fly-card.collection-themed.face.red {
  color: var(--flyer-red) !important;
}

.bot-discard-fly-card.collection-themed {
  border-color: rgba(255,255,255,.20) !important;
  background: var(--flyer-face-bg) !important;
  color: var(--flyer-black) !important;
}

.bot-discard-fly-card.collection-themed.red {
  color: var(--flyer-red) !important;
}

.deal-fly-card.collection-themed.collection-card-motif::before,
.bot-discard-fly-card.collection-themed.collection-card-motif::before {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background: var(--flyer-card-motif-color, currentColor);
  opacity: .12;
  -webkit-mask: var(--flyer-card-motif) center / contain no-repeat;
  mask: var(--flyer-card-motif) center / contain no-repeat;
}

.deal-fly-card.collection-themed:not(.face).collection-card-motif::before {
  opacity: .72;
}

.game-screen.collection-game-skin .special-card-back {
  border-color: rgba(255,255,255,.20) !important;
  color: var(--collection-game-card-motif-color) !important;
  background: var(--collection-game-back-bg) !important;
  position: relative;
}

.game-screen.collection-game-skin.collection-card-has-motif .special-card-back::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--collection-game-card-motif-color);
  opacity: .72;
  -webkit-mask: var(--collection-game-card-motif) center / contain no-repeat;
  mask: var(--collection-game-card-motif) center / contain no-repeat;
}

.game-screen.collection-game-skin .special-card-placeholder {
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.58) !important;
  background: rgba(255,255,255,.035) !important;
}


/* =============================================================
   FASE 2.3.3 · DRAG PREVIEW HEREDA LA BARAJA EQUIPADA
   -------------------------------------------------------------
   La carta que se levanta/arrastra ahora usa la misma skin
   equipada por el jugador: frente, colores y motivo.
   ============================================================= */

.drag-bundle-card.playing-card {
  cursor: grabbing;
  touch-action: none;
}

.game-screen.collection-game-skin .drag-bundle-card.collection-themed {
  border-color: rgba(255,255,255,.22) !important;
  background: var(--flyer-face-bg) !important;
  color: var(--flyer-black) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

.game-screen.collection-game-skin .drag-bundle-card.collection-themed.red {
  color: var(--flyer-red) !important;
}

.game-screen.collection-game-skin .drag-bundle-card.collection-themed.collection-card-motif::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background: var(--flyer-card-motif-color, currentColor);
  opacity: .10;
  -webkit-mask: var(--flyer-card-motif) center / contain no-repeat;
  mask: var(--flyer-card-motif) center / contain no-repeat;
}


/* =============================================================
   FASE 2.3.4 · SKIN CONSISTENCY + STYLE BOOST
   -------------------------------------------------------------
   - Corrige el drag preview blanco (vive fuera de .game-screen).
   - Refuerza borde, contraste, sombra y motivo de cada baraja.
   - Mantiene hitboxes y geometría funcional sin cambios.
   ============================================================= */

/* Previsualización de colección: misma identidad que en partida. */
.collection-face-card,
.collection-mini-face {
  border-color: var(--card-border, rgba(255,255,255,.20)) !important;
  box-shadow: var(--card-shadow, 0 5px 11px rgba(0,0,0,.28)) !important;
}
.collection-face-card::before,
.collection-mini-face::after {
  opacity: var(--card-motif-opacity, .12) !important;
}
.collection-preview-deck::before,
.collection-mini-back::before {
  opacity: var(--back-motif-opacity, .78) !important;
}

/* Cartas reales: más nítidas y con borde propio del set. */
.game-screen.collection-game-skin .playing-card,
.game-screen.collection-game-skin .discard-face,
.game-screen.collection-game-skin .table-card,
.game-screen.collection-game-skin .draft-card,
.game-screen.collection-game-skin .mini-card {
  border-color: var(--collection-game-card-border, rgba(255,255,255,.20)) !important;
  box-shadow: var(--collection-game-card-shadow, 0 5px 11px rgba(0,0,0,.30)) !important;
  filter: none !important;
}

.game-screen.collection-game-skin.collection-card-has-motif .playing-card::before,
.game-screen.collection-game-skin.collection-card-has-motif .discard-face::before {
  opacity: var(--collection-game-card-motif-opacity, .12) !important;
}

.game-screen.collection-game-skin.collection-card-has-motif .bot-card-back::after,
.game-screen.collection-game-skin.collection-card-has-motif .deck-emblem::before,
.game-screen.collection-game-skin.collection-card-has-motif .special-card-back::before {
  opacity: var(--collection-game-back-motif-opacity, .82) !important;
}

/*
  CLAVE DEL BUG BLANCO:
  drag-bundle se inserta directamente en <body>, por eso NO puede
  depender de un selector descendiente de .game-screen.
*/
.drag-bundle-card.collection-themed {
  border-color: var(--flyer-card-border, rgba(255,255,255,.22)) !important;
  background: var(--flyer-face-bg) !important;
  color: var(--flyer-black) !important;
  box-shadow: var(--flyer-card-shadow, 0 10px 18px rgba(0,0,0,.34)) !important;
  filter: none !important;
}

.drag-bundle-card.collection-themed.red {
  color: var(--flyer-red) !important;
}

.drag-bundle-card.collection-themed.collection-card-motif::before {
  content:"" !important;
  position:absolute !important;
  inset:7px !important;
  pointer-events:none !important;
  background:var(--flyer-card-motif-color,currentColor) !important;
  opacity:var(--flyer-card-motif-opacity,.12) !important;
  -webkit-mask:var(--flyer-card-motif) center/contain no-repeat !important;
  mask:var(--flyer-card-motif) center/contain no-repeat !important;
}

.drag-bundle-card.collection-themed .card-corner,
.drag-bundle-card.collection-themed .card-center-symbol {
  position: relative;
  z-index: 2;
}

/* Animaciones transitorias usan borde/sombra de la baraja equipada. */
.deal-fly-card.collection-themed,
.bot-discard-fly-card.collection-themed {
  border-color: var(--flyer-card-border, rgba(255,255,255,.22)) !important;
  box-shadow: var(--flyer-card-shadow, 0 7px 13px rgba(0,0,0,.40)) !important;
  filter: none !important;
}
.deal-fly-card.collection-themed.collection-card-motif::before,
.bot-discard-fly-card.collection-themed.collection-card-motif::before {
  opacity: var(--flyer-card-motif-opacity, .12) !important;
}

/* Algunos sets claros necesitaban un pequeño marco interior para no verse lavados. */
.game-screen.collection-game-skin[data-collection-cards="forest"] .playing-card,
.game-screen.collection-game-skin[data-collection-cards="tree"] .playing-card,
.game-screen.collection-game-skin[data-collection-cards="serpent"] .playing-card,
.game-screen.collection-game-skin[data-collection-cards="lotus"] .playing-card,
.game-screen.collection-game-skin[data-collection-cards="moon"] .playing-card,
.game-screen.collection-game-skin[data-collection-cards="hawk"] .playing-card,
.game-screen.collection-game-skin[data-collection-cards="wolf"] .playing-card {
  outline: 1px solid rgba(255,255,255,.06);
  outline-offset: -3px;
}


/* =============================================================
   FASE 2.3.5 · ÚLTIMOS AJUSTES VISUALES
   -------------------------------------------------------------
   - Drag preview: corrige el número bugueado al levantar carta.
   - Bot melds / cartas reveladas: adoptan la baraja equipada.
   - Motivo SVG de la carta: se mueve a una esquina para no ensuciar.
   ============================================================= */

/* Drag preview: necesita comportarse como carta real. */
.drag-bundle-card.collection-themed {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  isolation: isolate !important;
  transform: translateZ(0);
}

.drag-bundle-card.collection-themed .card-corner {
  position: absolute !important;
  top: 4px !important;
  left: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  line-height: .88 !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  z-index: 3 !important;
}

.drag-bundle-card.collection-themed .card-corner.bottom {
  top: auto !important;
  left: auto !important;
  right: 5px !important;
  bottom: 4px !important;
  transform: rotate(180deg) !important;
}

.drag-bundle-card.collection-themed .card-center-symbol {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

/* El motivo decorativo ya no va gigante al centro; se va a la esquina. */
.game-screen.collection-game-skin.collection-card-has-motif .playing-card::before,
.game-screen.collection-game-skin.collection-card-has-motif .discard-face::before,
.drag-bundle-card.collection-themed.collection-card-motif::before,
.deal-fly-card.collection-themed.collection-card-motif::before,
.bot-discard-fly-card.collection-themed.collection-card-motif::before {
  inset: auto !important;
  top: 5px !important;
  right: 5px !important;
  width: 14px !important;
  height: 14px !important;
  opacity: var(--collection-game-card-motif-opacity, .10) !important;
  background: currentColor !important;
  -webkit-mask: var(--collection-game-card-motif, var(--flyer-card-motif)) center / contain no-repeat !important;
  mask: var(--collection-game-card-motif, var(--flyer-card-motif)) center / contain no-repeat !important;
}

.drag-bundle-card.collection-themed.collection-card-motif::before,
.deal-fly-card.collection-themed.collection-card-motif::before,
.bot-discard-fly-card.collection-themed.collection-card-motif::before {
  background: currentColor !important;
  opacity: var(--flyer-card-motif-opacity, .10) !important;
}

/* Cartas reveladas de bots y melds: ya no se quedan blancas/default. */
.game-screen.collection-game-skin .bot-hand.revealed .mini-card,
.game-screen.collection-game-skin .bot-meld-ribbon {
  position: relative;
  overflow: hidden;
  background: var(--collection-game-face-bg) !important;
  color: var(--collection-game-black) !important;
  border-color: var(--collection-game-card-border, rgba(255,255,255,.20)) !important;
  box-shadow: var(--collection-game-card-shadow, 0 5px 11px rgba(0,0,0,.30)) !important;
  filter: none !important;
}

.game-screen.collection-game-skin .bot-hand.revealed .mini-card.red,
.game-screen.collection-game-skin .bot-meld-token.red {
  color: var(--collection-game-red) !important;
}

.game-screen.collection-game-skin .bot-meld-token {
  color: var(--collection-game-black) !important;
  position: relative;
  z-index: 2;
}

.game-screen.collection-game-skin.collection-card-has-motif .bot-hand.revealed .mini-card::before,
.game-screen.collection-game-skin.collection-card-has-motif .bot-meld-ribbon::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  background: currentColor;
  opacity: .10;
  -webkit-mask: var(--collection-game-card-motif) center / contain no-repeat;
  mask: var(--collection-game-card-motif) center / contain no-repeat;
}

.game-screen.collection-game-skin .bot-hand.revealed .mini-card .mini-card-value,
.game-screen.collection-game-skin .bot-hand.revealed .mini-card .mini-card-suit,
.game-screen.collection-game-skin .bot-meld-value,
.game-screen.collection-game-skin .bot-meld-suit {
  position: relative;
  z-index: 2;
}


/* =============================================================
   FASE 2.3.6K · PALETA UNIVERSAL POR PALO
   -------------------------------------------------------------
   Las skins pueden definir spade/club/heart/diamond. Si no lo
   hacen, collection.js genera variantes compatibles desde black/red.
   Esto aplica a mano, descarte, bots, mesa, drag y animaciones.
   ============================================================= */

/* Cartas grandes y medianas de partida. */
.game-screen.collection-game-skin .playing-card.suit-spade,
.game-screen.collection-game-skin .discard-face.suit-spade,
.game-screen.collection-game-skin .draft-card.suit-spade,
.game-screen.collection-game-skin .mini-card.suit-spade,
.game-screen.collection-game-skin .table-building-card.suit-spade,
.game-screen.collection-game-skin .bot-meld-token.suit-spade {
  color: var(--collection-game-spade, var(--collection-game-black)) !important;
}

.game-screen.collection-game-skin .playing-card.suit-club,
.game-screen.collection-game-skin .discard-face.suit-club,
.game-screen.collection-game-skin .draft-card.suit-club,
.game-screen.collection-game-skin .mini-card.suit-club,
.game-screen.collection-game-skin .table-building-card.suit-club,
.game-screen.collection-game-skin .bot-meld-token.suit-club {
  color: var(--collection-game-club, var(--collection-game-black)) !important;
}

.game-screen.collection-game-skin .playing-card.suit-heart,
.game-screen.collection-game-skin .discard-face.suit-heart,
.game-screen.collection-game-skin .draft-card.suit-heart,
.game-screen.collection-game-skin .mini-card.suit-heart,
.game-screen.collection-game-skin .table-building-card.suit-heart,
.game-screen.collection-game-skin .bot-meld-token.suit-heart {
  color: var(--collection-game-heart, var(--collection-game-red)) !important;
}

.game-screen.collection-game-skin .playing-card.suit-diamond,
.game-screen.collection-game-skin .discard-face.suit-diamond,
.game-screen.collection-game-skin .draft-card.suit-diamond,
.game-screen.collection-game-skin .mini-card.suit-diamond,
.game-screen.collection-game-skin .table-building-card.suit-diamond,
.game-screen.collection-game-skin .bot-meld-token.suit-diamond {
  color: var(--collection-game-diamond, var(--collection-game-red)) !important;
}

/* Clones / flyers que viven fuera de #gameScreen. */
.collection-themed.suit-spade { color: var(--flyer-spade, var(--flyer-black)) !important; }
.collection-themed.suit-club { color: var(--flyer-club, var(--flyer-black)) !important; }
.collection-themed.suit-heart { color: var(--flyer-heart, var(--flyer-red)) !important; }
.collection-themed.suit-diamond { color: var(--flyer-diamond, var(--flyer-red)) !important; }

/* Preview de Colección usa exactamente la misma intención cromática. */
.collection-face-card.suit-spade { color: var(--spade-suit, var(--black-suit)) !important; }
.collection-face-card.suit-club { color: var(--club-suit, var(--black-suit)) !important; }
.collection-face-card.suit-heart { color: var(--heart-suit, var(--red-suit)) !important; }
.collection-face-card.suit-diamond { color: var(--diamond-suit, var(--red-suit)) !important; }

/* Miniatura A♠ del catálogo. */
.collection-mini-face { color: var(--spade-suit, var(--black-suit)) !important; }