.poxy-col-mode-toggle{
  display:inline-flex;
  gap:4px;
  padding:3px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}
.poxy-col-mode-btn{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.35);
  cursor:pointer;
  transition:background 0.18s,color 0.18s;
}
.poxy-col-mode-btn.is-active{
  background:rgba(245,158,11,0.18);
  color:#f59e0b;
}

#colMuseum[hidden]{display:none}
#colMuseum{
  display:flex;
  flex-direction:column;
  gap:0;
}

.museum-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 0;
  color:rgba(255,255,255,0.12);
}
.museum-divider::before,
.museum-divider::after{
  content:'';
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
}
.museum-divider span{font-size:11px;letter-spacing:0.3em}

.museum-exhibit{
  display:flex;
  gap:0;
  align-items:stretch;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  overflow:hidden;
  opacity:0;
  transform:translateX(-20px);
  transition:opacity 0.4s ease-out,transform 0.4s ease-out;
}
.museum-exhibit.is-visible{opacity:1;transform:translateX(0)}

.museum-rarity-bar{
  width:4px;
  flex-shrink:0;
  background:var(--mus-color,rgba(255,255,255,0.3));
  transition:width 0.2s ease;
}
.museum-exhibit:hover .museum-rarity-bar{width:8px}
.museum-exhibit:hover{box-shadow:0 0 24px var(--mus-glow,rgba(255,255,255,0.08))}

.museum-avatar{
  flex-shrink:0;
  width:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  background:rgba(0,0,0,0.2);
}
.museum-avatar .material-symbols-outlined{font-size:52px;color:var(--mus-color,#fff)}

.museum-info{
  flex:1;
  min-width:0;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.museum-pxid{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:0.08em;
  color:rgba(196,199,200,0.4);
}
.museum-name{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:18px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
}
.museum-badge{
  align-self:flex-start;
  font-family:'JetBrains Mono',monospace;
  font-size:8px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--mus-color,rgba(255,255,255,0.2));
  color:var(--mus-color,rgba(255,255,255,0.5));
}
.museum-traits{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:4px;
}
.museum-trait{
  font-family:'JetBrains Mono',monospace;
  font-size:8px;
  letter-spacing:0.05em;
  color:rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:6px;
  padding:2px 6px;
}
.museum-lore{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:12px;
  font-style:italic;
  color:rgba(255,255,255,0.5);
  line-height:1.45;
  margin-top:4px;
}
.museum-date{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  color:rgba(196,199,200,0.35);
  margin-top:4px;
}

.col-grid--dispersing .col-card{
  animation:museumDisperse 0.2s ease-in forwards;
}
@keyframes museumDisperse{
  to{opacity:0;transform:scale(0.8)}
}

@media (max-width:420px){
  .museum-avatar{width:72px;font-size:38px}
  .museum-name{font-size:16px}
  .museum-info{padding:12px 14px}
}

@media (prefers-reduced-motion:reduce){
  .museum-exhibit,
  .museum-rarity-bar,
  .col-grid--dispersing .col-card{
    animation:none!important;
    transition:none!important;
    opacity:1;
    transform:none;
  }
}