/* Shared collection selection controls: library and parking customization. */
.collection-tabs{display:flex;gap:0;margin:0 20px 16px;border-bottom:1px solid #ffffff15;flex-shrink:0}.collection-tabs button{flex:1;padding:12px 0;background:none;color:#999;border:0;border-bottom:2px solid transparent;font:inherit;font-size:12px;cursor:pointer}.collection-tabs button[aria-pressed=true]{color:#e5c397;border-bottom-color:#e5c397}
.collection-card{font:inherit;text-align:left;position:relative;width:100%;flex-shrink:0;cursor:pointer}
.collection-card:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.collection-card .vehicle-thumb img{border-radius:0}
.collection-card .scene-thumb{mask-image:linear-gradient(90deg,transparent,#000 24%);}
@media(max-width:760px){}

.collection-card{display:block;isolation:isolate;min-height:88px;height:88px;padding:0;overflow:hidden;border:1px solid #ffffff08;border-radius:4px;background:linear-gradient(112deg,#1b1d21 0%,#1b1d21 44%,#30343b 44.4%,#24282e 69%,#1d2025 100%);transition:border-color .18s,background .18s}
.collection-card:last-child{border-bottom:1px solid #ffffff08}
.collection-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,#1b1d21 22%,#1b1d21e6 35%,#1b1d2100 60%)}
.collection-card:hover{border-color:#ffffff2b;background:linear-gradient(112deg,#202328 44%,#3c424b 44.4%,#24282e 100%)}
.collection-card.selected{border:1px solid #cbb18c80;background:linear-gradient(112deg,#302b24 44%,#75634b 44.4%,#37332c 100%);box-shadow:inset 2px 0 #e5c397}
.collection-card.selected::before{display:none}.collection-card.selected::after{background:linear-gradient(100deg,#302b24 22%,#302b24df 35%,#302b2400 60%)}
.collection-card .vehicle-thumb{position:absolute;inset:7px 3px 7px auto;width:57%;height:auto;background:transparent;overflow:visible;display:block;z-index:0}
.collection-card .vehicle-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;transform:translateX(0);filter:brightness(1.02);transition:transform .2s,filter .2s}
.collection-card:hover .vehicle-thumb img,.collection-card.selected .vehicle-thumb img{transform:translateX(-3px);filter:brightness(1.1)}
.collection-card .number{display:none}
.collection-card .vehicle-caption{position:absolute;inset:0 49% 0 13px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;z-index:2;pointer-events:none}
.collection-card strong{position:static;font-size:12px;line-height:1.4;font-weight:550;color:#eeece7;text-shadow:0 1px 7px #0009}
.collection-card small{position:static;font-size:9px;line-height:1.4;letter-spacing:.3px;color:#aaa8a3;margin:0}
.collection-card.selected small{color:#c7b393}
.collection-card .indicator{position:absolute;bottom:6px;right:8px;top:auto;display:block;font-size:10px;line-height:1;color:#e5c397;opacity:0;z-index:2}
.collection-card.selected .indicator{opacity:1}
@media(max-width:1100px) and (min-width:761px){.collection-card{height:83px;min-height:83px}.collection-card .vehicle-caption{left:10px;right:48%}.collection-card strong{font-size:11px}.collection-card small{font-size:8px}}
@media(min-width:1700px){.collection-card{height:101px;min-height:101px}.collection-card strong{font-size:13px}}
@media(max-width:760px){.collection-card{height:88px;min-height:88px}.collection-card .vehicle-caption{left:10px}.collection-card strong{font-size:11px}}
@media(max-width:520px){.collection-card{height:85px;min-height:85px}.collection-card .vehicle-caption{left:14px;right:51%}.collection-card strong{font-size:12px}.collection-card small{font-size:9px}.collection-card .vehicle-thumb{width:55%;right:5px}}
@media(max-height:740px) and (min-width:761px){.collection-card{height:75px;min-height:75px}}

.collection-card[data-cover-state=failed] .number{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;font-size:24px;color:#817c73}

/* Character cards use transparent portrait crops while keeping the shared vehicle-card geometry. */
.collection-card[data-collection-type="character"] .vehicle-thumb img{transform:scale(1.12);transform-origin:center}
.collection-card[data-collection-type="character"]:hover .vehicle-thumb img,
.collection-card[data-collection-type="character"].selected .vehicle-thumb img{transform:translateX(-3px) scale(1.18)}

/* Keep decoration thumbnails as prominent as vehicle and character art. The source
   renders are already transparent, so the shared diagonal card remains visible
   behind the object without shrinking the object into a small icon. */
.collection-card[data-collection-type="decoration"] .vehicle-thumb img{transform:scale(1.08);transform-origin:center}
.collection-card[data-collection-type="decoration"]:hover .vehicle-thumb img,
.collection-card[data-collection-type="decoration"].selected .vehicle-thumb img{transform:translateX(-3px) scale(1.14)}

/* Character card-specific key light: the light swimsuit materials need a softer, deeper card grade. */
.collection-card[data-source-id="N01"] .vehicle-thumb img,
.collection-card[data-source-id="N10"] .vehicle-thumb img{
  filter:brightness(.78) contrast(1.22) saturate(1.12) drop-shadow(0 4px 5px rgba(0,0,0,.26));
}
/* The Mint card is captured from the dark-stage render; preserve that render grade. */
.collection-card[data-source-id="N10"] .vehicle-thumb img{filter:none}
/* Sylvia is also sourced from the dark-stage capture, so retain its baked lighting. */
.collection-card[data-source-id="N01"] .vehicle-thumb img{filter:none}
/* Transparent diorama art can use the full art area without carrying a backdrop. */
.collection-card .scene-thumb{transform:scale(1.28);transform-origin:center;mix-blend-mode:normal}
@media(max-width:760px){.collection-card .scene-thumb{transform:scale(1.18)}}
.collection-card .vehicle-thumb .scene-thumb{transform:scale(1.28)!important;mix-blend-mode:normal}
@media(max-width:760px){.collection-card .vehicle-thumb .scene-thumb{transform:scale(1.18)!important}}


.collection-card:disabled{cursor:wait;opacity:.6}
.collection-tabs button:focus-visible{outline:2px solid #b28a3f;outline-offset:-3px}
