/* Perfil de fã — página /perfil/ (ver edição e vista pública). */

.ksp-fanprofile {
	max-width: 720px;
	margin: 0 auto;
	color: var(--ksp-text);
}

.ksp-fanprofile__banner {
	height: clamp(120px, 20vw, 220px);
	border-radius: 20px;
	margin: 0 0 -46px;
	background-color: var(--ksp-bg-elevated-2);
	background-size: cover;
	background-position: center;
}
.ksp-fanprofile__banner--empty {
	background-image: linear-gradient(135deg, rgba(61, 155, 233, 0.35), rgba(13, 105, 163, 0.65));
}
.ksp-fanprofile__header {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 24px;
	padding: 0 16px;
}
.ksp-fanprofile__avatar-wrap {
	width: 88px;
	height: 88px;
	border-radius: 999px;
	overflow: hidden;
	border: 4px solid var(--ksp-bg);
	background: var(--ksp-bg-elevated-2);
	flex: 0 0 auto;
}
.ksp-fanprofile__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ksp-fanprofile__resize-field {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ksp-fanprofile__resize-field input[type="range"] {
	flex: 1;
}
.ksp-fanprofile__actions {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 12px;
}
.ksp-fanprofile__edit-btn {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 20px;
	border-radius: 999px;
	border: 1px solid rgba(var(--ksp-fg-rgb), 0.2);
	color: var(--ksp-text);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
}
.ksp-fanprofile__edit-btn:hover {
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
}
.ksp-fanprofile__name {
	margin: 0;
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.ksp-fanprofile__kofi {
	font-size: 0.65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: #ff5e5b;
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
}
.ksp-fanprofile__visibility {
	margin: 2px 0 0;
	font-size: 0.8rem;
	color: rgba(var(--ksp-fg-rgb), 0.5);
}
/* Photocards — mesmo layout/animação holográfica do jogo (game/jogo.html),
   para o perfil mostrar as cartas exatamente como na loja/binder do jogo. */
.ksp-fanprofile__binder-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 12px;
	max-height: 520px;
	overflow-y: auto;
	padding: 2px;
}
.ksp-fanprofile__binder {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 2px 10px;
	cursor: grab;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	user-select: none;
}
.ksp-fanprofile__binder.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}
.ksp-fanprofile__binder .photocard {
	flex: 0 0 130px;
	width: 130px;
}
.photocard {
	aspect-ratio: 2.5 / 3.5;
	background: #0A1226;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0;
	position: relative;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	transition: transform 0.2s ease;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
}
.photocard:hover { transform: scale(1.04); }
.photocard.holo::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	border-radius: inherit;
	background: linear-gradient(115deg, rgba(255,215,0,0) 20%, rgba(255,215,0,0.35) 35%, rgba(255,0,128,0.3) 48%, rgba(0,229,255,0.35) 60%, rgba(255,215,0,0) 80%);
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 2;
	animation: kspHoloSweep 3.5s ease-in-out infinite alternate;
}
@keyframes kspHoloSweep {
	0% { transform: translate(-20%, -20%) rotate(0deg); }
	100% { transform: translate(15%, 15%) rotate(10deg); }
}
.card-lendario-holo, .card-lendario { border: 2px solid #FFD700 !important; box-shadow: 0 0 14px rgba(255, 215, 0, 0.9); }
.card-raro-holo, .card-raro { border: 2px solid #A646EE !important; box-shadow: 0 0 12px rgba(166, 70, 238, 0.8); }
.card-comum-holo, .card-comum { border: 2px solid #00E5FF !important; box-shadow: 0 0 6px rgba(0, 229, 255, 0.3); }
.card-top-area { display: flex; justify-content: flex-start; align-items: center; width: 100%; z-index: 2; gap: 4px; padding: 6px 6px 0 6px; min-height: 18px; }
.card-bottom-area { display: flex; flex-direction: column; gap: 4px; padding: 6px; z-index: 2; width: 100%; }
.rarity-banner { width: 100%; padding: 4px 6px; border-radius: 6px; font-size: 0.65rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; text-align: center; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-lendario-holo, .banner-lendario { background: linear-gradient(135deg, #FFD700, #FFA500) !important; color: #000 !important; }
.banner-raro-holo, .banner-raro { background: linear-gradient(135deg, #A646EE, #7B2CBF) !important; color: #FFF !important; }
.banner-comum-holo, .banner-comum { background: linear-gradient(135deg, #00E5FF, #0088CC) !important; color: #000 !important; }
.count-badge { background: linear-gradient(135deg, #00E5FF, #0088CC); color: #000; padding: 4px 8px; border-radius: 6px; font-size: 0.65rem; font-weight: 800; border: 1px solid #FFF; z-index: 3; box-shadow: 0 2px 6px rgba(0,0,0,0.4); white-space: nowrap; flex-shrink: 0; }
.photocard-overlay { background: rgba(0,0,0,0.85); padding: 6px 8px; border-radius: 8px; z-index: 2; color: #FFF !important; text-align: left !important; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.photocard-overlay .card-group-name { font-size: 0.55rem; font-weight: 800; color: #00E5FF; text-transform: uppercase; line-height: 1; }
.photocard-overlay .card-idol-name { font-size: 0.8rem; font-weight: 800; color: #FFFFFF; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ksp-fanprofile__binder-search {
	width: 100%;
	padding: 8px 12px;
	border-radius: 10px;
	border: 2px solid var(--wp--preset--color--accent-1);
	background: var(--ksp-bg-elevated-2);
	color: var(--ksp-text);
	font-size: 0.85rem;
	margin-bottom: 10px;
	box-sizing: border-box;
}
.ksp-binder-pick { position: relative; display: block; }
.ksp-binder-pick input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ksp-binder-pick-check {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: rgba(0,0,0,0.7);
	color: #FFD700;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	z-index: 5;
}
.ksp-binder-pick.is-selected .ksp-binder-pick-check { display: flex; }
.ksp-binder-pick.is-selected .photocard { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 2px; }

.ksp-fanprofile__at-prefix {
	display: flex;
	align-items: center;
	gap: 4px;
}
.ksp-fanprofile__at-prefix input {
	flex: 1;
}
.ksp-fanprofile__identity {
	margin-bottom: 8px;
}
.ksp-fanprofile__handle {
	font-size: 0.78rem;
	color: rgba(var(--ksp-fg-rgb), 0.55);
	font-weight: 500;
	margin: 2px 0 0;
}
.ksp-fanprofile__sharelink {
	font-size: 0.85rem;
	color: rgba(var(--ksp-fg-rgb), 0.6);
	margin: 2px 0 0;
}
.ksp-fanprofile__sharelink a {
	color: var(--wp--preset--color--accent-1);
}

.ksp-fanprofile__bio {
	font-size: 1rem;
	line-height: 1.6;
}

.ksp-fanprofile__section-title {
	margin: 28px 0 12px;
	font-size: 1.1rem;
	color: var(--wp--preset--color--accent-2);
}
.ksp-fanprofile__song iframe {
	border-radius: 12px;
	display: block;
}

/* Formulário de edição */
.ksp-fanprofile__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ksp-fanprofile__form label {
	display: block;
	font-weight: 700;
	font-size: 0.85rem;
}
.ksp-fanprofile__form input[type="text"],
.ksp-fanprofile__form input[type="url"],
.ksp-fanprofile__form input[type="file"],
.ksp-fanprofile__form textarea,
.ksp-fanprofile__form select {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid rgba(var(--ksp-fg-rgb), 0.2);
	background: var(--ksp-bg-elevated);
	color: var(--ksp-text);
	font-family: inherit;
	font-size: 0.9rem;
	box-sizing: border-box;
}
.ksp-fanprofile__form textarea {
	resize: vertical;
}
.ksp-fanprofile__form fieldset {
	border: 1px solid rgba(var(--ksp-fg-rgb), 0.12);
	border-radius: 12px;
	padding: 14px 16px;
}
.ksp-fanprofile__form legend {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	padding: 0 6px;
}
.ksp-fanprofile__checklist {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 220px;
	overflow-y: auto;
}
.ksp-fanprofile__checklist label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}
.ksp-fanprofile__public-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ksp-fanprofile__form button[type="submit"] {
	align-self: flex-start;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 28px;
	font-weight: 800;
	cursor: pointer;
}

/* Binder de photocards */
/* Binder — escolha de cartas a destacar, no formulário de edição */
.ksp-fanprofile__hint {
	margin: -4px 0 12px;
	font-size: 0.8rem;
	color: rgba(var(--ksp-fg-rgb), 0.6);
	font-weight: 400;
}