/* Friends: the Friends screen, a friend's guide (details share the Album's layout), the Super friend and unlock reveals, and the Play as character picker. */
.album-card.friends {
  background: var(--type-friend-soft);
}

.screen.friends { padding: 18px 15px 30px; overflow-y: auto; }

/* Friends share the Album's compact portrait cards; details live in a modal. */
.screen.friends { padding: 0; background: var(--slate-300); }
.friends-album-body { padding: 14px 16px 22px; }
.friends-album .album-card.is-selected { border-color: #b5ed44; box-shadow: 0 4px #4a7338; }
.choose-character .modal-body { padding: 14px 10px 18px; }
/* Play as: one swipeable row of friend cards; the next card peeks in at the edge. */
.character-picker-row { display: flex; align-items: center; gap: 6px; }
.character-picker { flex: 1; min-width: 0; display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 5px 4px 9px; }
.character-picker::-webkit-scrollbar { display: none; }
.character-picker .album-card { flex: 0 0 40%; scroll-snap-align: start; scroll-margin-left: 4px; }
/* Long names keep the smaller .album-card > b.long-name size; that rule now loads earlier but used to win. */
.character-picker .album-card > b:not(.long-name) { font-size: 13px; }
.character-picker .album-card .album-art { padding: 12px 0; }
/* Touch screens swipe; the arrows are for mouse and keyboard. */
@media (hover: none) { .character-step { display: none; } .character-picker .album-card { flex-basis: 42%; }
}
.friends-album .album-card.is-selected small { background: #456e39; }

.super-reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.super-reveal section { flex: 1 1 140px; background: var(--slate-800); border: 2px solid #eac65e; border-radius: 15px; padding: 12px; }
.super-reveal h3 { font-size: 18px; margin: 6px 0; }

.friends-info-button {position:absolute;top:12px;left:14px;z-index:2}