/* ==========================================================================
   ÚČET

   Profil s pár číslami navrchu, pod ním navigácia a sekcie ako panely.
   Každá sekcia má nadpis a jednu vetu, na čo slúži.
   ========================================================================== */

.sq-account__hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"avatar who actions"
		"avatar stats actions";
	align-items: center;
	gap: var(--sq-space-8) var(--sq-space-24);
	margin-top: var(--sq-space-32);
	padding: var(--sq-space-32);
	background:
		radial-gradient(120% 140% at 0% 0%, var(--sq-personal-soft), transparent 60%),
		var(--sq-surface);
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
}

.sq-account__avatar {
	grid-area: avatar;
	width: 88px;
	height: 88px;
	flex-shrink: 0;
	border-radius: var(--sq-radius-pill);
	border: 2px solid var(--sq-personal-line);
	background: linear-gradient(135deg, var(--sq-personal), var(--sq-night));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-heading);
	font-weight: var(--sq-weight-bold);
	color: var(--sq-text);
}

.sq-account__eyebrow {
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-track-eyebrow);
	text-transform: uppercase;
	color: var(--sq-personal-text);
}

.sq-account__who {
	grid-area: who;
	min-width: 0;
}

.sq-account__name {
	margin-top: var(--sq-space-4);
	font-size: var(--sq-fs-title);
	line-height: 1.05;
	letter-spacing: var(--sq-track-title);
	overflow-wrap: anywhere;
}

.sq-account__mail {
	margin-top: var(--sq-space-8);
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
}

.sq-account__stats {
	grid-area: stats;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-8) var(--sq-space-32);
	margin: var(--sq-space-12) 0 0;
}

.sq-account__stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
}

.sq-account__stat dt {
	font-size: var(--sq-fs-micro);
	letter-spacing: var(--sq-track-eyebrow);
	text-transform: uppercase;
	color: var(--sq-text-tertiary);
}

.sq-account__stat dd {
	margin: 0;
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-heading);
	font-weight: var(--sq-weight-bold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.sq-account__stat a {
	color: inherit;
}

.sq-account__stat a:hover {
	color: var(--sq-accent);
}

.sq-account__actions {
	grid-area: actions;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sq-space-8);
}

/* ---- Rozloženie: navigácia vľavo, sekcie vpravo -------------------------- */

.sq-account {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: start;
	gap: var(--sq-space-32);
	padding-block: var(--sq-space-32) var(--sq-space-64);
}

.sq-account__nav {
	position: sticky;
	top: calc(var(--sq-sticky-top, 0px) + var(--sq-space-24));
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sq-account__navlink {
	display: block;
	padding: var(--sq-space-12) var(--sq-space-16);
	font-size: var(--sq-fs-ui);
	font-weight: var(--sq-weight-medium);
	color: var(--sq-text-secondary);
	border-left: 2px solid transparent;
	border-radius: 0 var(--sq-radius) var(--sq-radius) 0;
	transition: color var(--sq-duration) var(--sq-ease), background-color var(--sq-duration) var(--sq-ease);
}

.sq-account__navlink:hover {
	color: var(--sq-text);
	background: var(--sq-surface);
}

.sq-account__navlink[aria-current="true"] {
	color: var(--sq-text);
	background: var(--sq-surface);
	border-left-color: var(--sq-accent);
}

.sq-account__main {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-24);
	min-width: 0;
}

/* Blok pluginu so Steamom má vlastné odsadenie — v paneli by bolo dvojité. */
.sq-account__main .sqga-accounts {
	padding-block: var(--sq-space-24) 0;
}

/* Sekcie (aj z pluginov) sú panely — ich vnútorný kontajner sa zruší. */
.sq-account__main > .sq-container {
	max-width: none;
	margin: 0;
	padding: var(--sq-space-32);
	background: var(--sq-surface);
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
	scroll-margin-top: calc(var(--sq-sticky-top, 0px) + var(--sq-space-24));
}

.sq-account__main .sq-section-head {
	margin: 0;
	padding: 0;
	border: 0;
}

.sq-account__main .sq-section-head::after {
	display: none;
}

.sq-account__main .sq-section-head__title {
	display: flex;
	align-items: baseline;
	gap: var(--sq-space-8);
	font-size: var(--sq-fs-card);
}

.sq-account__desc {
	margin-top: var(--sq-space-4);
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
}

/* ---- Skupina sledovaného ------------------------------------------------ */

.sq-follows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sq-space-16);
	padding-top: var(--sq-space-24);
}

.sq-follows__group {
	padding: var(--sq-space-16);
	background: var(--sq-bg);
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
}

.sq-follows__empty {
	align-self: center;
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
}

.sq-follows__group-title {
	display: flex;
	align-items: baseline;
	gap: var(--sq-space-12);
	margin-bottom: var(--sq-space-12);
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-track-eyebrow);
	text-transform: uppercase;
	color: var(--sq-personal);
}

.sq-follows__count {
	color: var(--sq-text-tertiary);
	font-variant-numeric: tabular-nums;
}

.sq-follows__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-8);
}

/* Chip so zrušením — krížik je súčasťou chipu, nie samostatné tlačidlo. */
.sq-chip--removable {
	padding-right: var(--sq-space-8);
}

.sq-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: var(--sq-text-tertiary);
	font-size: 14px;
	line-height: 1;
}

.sq-chip--removable:hover .sq-chip__remove {
	color: var(--sq-live);
}

/* ---- Nastavenia --------------------------------------------------------- */

.sq-settings {
	padding-top: var(--sq-space-16);
}

.sq-setting:last-child {
	border-bottom: 0;
}

.sq-setting {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--sq-space-24);
	padding-block: var(--sq-space-16);
	border-bottom: 1px solid var(--sq-border);
}

.sq-setting__label {
	font-size: var(--sq-fs-base);
	font-weight: var(--sq-weight-medium);
}

.sq-setting__note {
	margin-top: var(--sq-space-4);
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
	line-height: 1.5;
}

/* ---- Prepínač ----------------------------------------------------------- */

.sq-switchbtn {
	position: relative;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
	border-radius: var(--sq-radius-pill);
	background: var(--sq-elevated-2);
	border: 1px solid var(--sq-border-strong);
	transition:
		background-color var(--sq-duration) var(--sq-ease),
		border-color var(--sq-duration) var(--sq-ease);
}

.sq-switchbtn::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--sq-text-secondary);
	transition:
		transform var(--sq-duration) var(--sq-ease),
		background-color var(--sq-duration) var(--sq-ease);
}

.sq-switchbtn[aria-pressed="true"] {
	background: var(--sq-accent-soft);
	border-color: var(--sq-accent);
}

.sq-switchbtn[aria-pressed="true"]::after {
	transform: translateX(20px);
	background: var(--sq-accent);
}

/* ---- Prepojené účty ----------------------------------------------------- */

.sq-linked {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--sq-space-24);
	padding-block: var(--sq-space-16);
	border-bottom: 1px solid var(--sq-border);
}

.sq-linked__name {
	display: flex;
	align-items: center;
	gap: var(--sq-space-12);
	font-size: var(--sq-fs-base);
}

.sq-linked__name svg {
	width: 18px;
	height: 18px;
}

.sq-linked__state {
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
}

.sq-account__danger {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-8) var(--sq-space-24);
	margin-top: var(--sq-space-16);
	padding-top: var(--sq-space-16);
	border-top: 1px solid var(--sq-border);
}

.sq-account__danger a {
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sq-account__danger a:hover {
	color: var(--sq-live);
}

/* Hodnota nastavenia, ktoré sa zatiaľ nedá meniť priamo tu. */
.sq-setting__value {
	font-size: var(--sq-fs-ui);
	color: var(--sq-text-secondary);
}

/* Chip so sledovaným je odkaz aj tlačidlo na zrušenie. */
.sq-chip--removable a {
	color: inherit;
}

/* ---- Moje hodnotenia ---------------------------------------------------- */

.sq-myrevs {
	padding-top: var(--sq-space-24);
}

.sq-myrevs__empty { color: var(--sq-text-secondary); }
.sq-myrevs__empty a { color: var(--sq-text); }

.sq-myrevs__list { margin: 0; padding: 0; list-style: none; }

.sq-myrev {
	display: grid;
	grid-template-columns: 48px 44px minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--sq-space-16);
	padding-block: var(--sq-space-16);
	border-top: 1px solid var(--sq-border);
}

.sq-myrev:first-child { border-top: 0; padding-top: 0; }

.sq-myrev__cover {
	display: block;
	width: 48px;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--sq-elevated);
	border-radius: var(--sq-radius);
}

.sq-myrev__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sq-myrev__score {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sq-radius);
	font-family: var(--sq-font-display);
	font-size: 18px;
	font-weight: var(--sq-weight-bold);
}

.sq-myrev__score--high { background: var(--sq-accent); color: var(--sq-accent-ink); }
.sq-myrev__score--mid { background: var(--sq-warning); color: #111; }
.sq-myrev__score--low { background: var(--sq-live); color: #fff; }

.sq-myrev__game {
	margin: 0;
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-ui);
	font-weight: var(--sq-weight-bold);
}

.sq-myrev__meta { margin: 2px 0 0; font-size: 12px; color: var(--sq-text-tertiary); }

.sq-myrev__text {
	margin: var(--sq-space-8) 0 0;
	font-size: var(--sq-fs-small);
	line-height: var(--sq-lh-base);
	color: var(--sq-text-secondary);
	overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
	.sq-account__hero {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"avatar who"
			"stats stats"
			"actions actions";
		gap: var(--sq-space-16) var(--sq-space-16);
		padding: var(--sq-space-24);
	}

	.sq-account__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.sq-account {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sq-space-16);
		padding-top: var(--sq-space-16);
	}

	/* Navigácia sa zmení na lištu so záložkami, ktorá sa dá posúvať. */
	.sq-account__nav {
		top: var(--sq-sticky-top, 0px);
		z-index: 20;
		flex-direction: row;
		gap: var(--sq-space-4);
		margin-inline: calc(var(--sq-space-16) * -1);
		padding: var(--sq-space-8) var(--sq-space-16);
		overflow-x: auto;
		scrollbar-width: none;
		background: var(--sq-bg);
		border-bottom: 1px solid var(--sq-border);
	}

	.sq-account__nav::-webkit-scrollbar {
		display: none;
	}

	.sq-account__navlink {
		flex: none;
		padding: var(--sq-space-8) var(--sq-space-12);
		font-size: var(--sq-fs-small);
		white-space: nowrap;
		border-left: 0;
		border-radius: var(--sq-radius-pill);
	}

	.sq-account__navlink[aria-current="true"] {
		color: var(--sq-accent-ink);
		background: var(--sq-accent);
	}
}

@media (max-width: 639px) {
	.sq-account__avatar {
		width: 64px;
		height: 64px;
		font-size: var(--sq-fs-lead);
	}

	.sq-account__main > .sq-container {
		padding: var(--sq-space-24) var(--sq-space-16);
	}

	.sq-account__stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sq-space-16);
	}

	.sq-follows {
		grid-template-columns: minmax(0, 1fr);
	}

	.sq-myrev { grid-template-columns: 40px 40px minmax(0, 1fr); gap: var(--sq-space-12); }

	.sq-myrev__cover { width: 40px; }

	.sq-myrev__score { width: 40px; height: 40px; font-size: 16px; }

	.sq-myrev__edit { grid-column: 3; justify-self: start; }
}

/* ---- Profil hráča -------------------------------------------------------- */

#profil .sq-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sq-space-16);
}

.sq-pform__view {
	font-size: var(--sq-fs-small);
	font-weight: var(--sq-weight-medium);
	white-space: nowrap;
}

.sq-pform {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-24);
	padding-top: var(--sq-space-24);
}

.sq-pform__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sq-space-16);
}

.sq-pform__field {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-8);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sq-pform__label {
	padding: 0;
	font-size: var(--sq-fs-small);
	font-weight: var(--sq-weight-medium);
	color: var(--sq-text-secondary);
}

.sq-pform__hint {
	margin: -4px 0 0;
	font-size: 12px;
	color: var(--sq-text-tertiary);
}

.sq-pform__error {
	font-size: 12px;
	color: var(--sq-live);
}

.sq-pform__error:empty {
	display: none;
}

.sq-pform__prefix {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--sq-border-strong);
	border-radius: var(--sq-radius);
	background: var(--sq-surface);
}

.sq-pform__prefix > span {
	display: flex;
	align-items: center;
	padding-inline: var(--sq-space-12) 2px;
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
	white-space: nowrap;
}

.sq-pform__prefix .sq-input {
	min-width: 0;
	padding-left: 2px;
	border: 0;
	background: transparent;
}

.sq-pform__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-8);
}

.sq-pchip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sq-pchip span {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding-inline: 14px;
	border: 1px solid var(--sq-border-strong);
	border-radius: 999px;
	font-size: var(--sq-fs-small);
	font-weight: var(--sq-weight-medium);
	color: var(--sq-text-secondary);
	cursor: pointer;
	transition:
		border-color var(--sq-duration) var(--sq-ease),
		color var(--sq-duration) var(--sq-ease);
}

.sq-pchip input:checked + span {
	border-color: var(--sq-accent);
	background: var(--sq-accent-soft);
	color: var(--sq-accent);
}

.sq-pchip input:focus-visible + span {
	outline: 2px solid var(--sq-accent);
	outline-offset: 2px;
}

.sq-pform__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sq-space-8) var(--sq-space-16);
}

.sq-plinkfield {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	gap: var(--sq-space-8);
}

.sq-plinkfield .sq-pform__error {
	grid-column: 2;
}

.sq-plinkfield__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
	color: var(--sq-text-secondary);
}

.sq-plinkfield__icon svg {
	width: 18px;
	height: 18px;
}

.sq-plinkfield .sq-input {
	padding-block: 9px;
	font-size: var(--sq-fs-small);
}

.sq-pcheck {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: var(--sq-space-12);
	align-items: start;
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
}

.sq-pcheck input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--sq-accent);
}

.sq-pcheck b {
	display: block;
	font-weight: var(--sq-weight-medium);
	color: var(--sq-text);
}

.sq-pform__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sq-space-16);
}

.sq-pform__status {
	font-size: var(--sq-fs-small);
	color: var(--sq-text-secondary);
}

.sq-pform__status.is-ok {
	color: var(--sq-positive);
}

.sq-pform__status.is-error {
	color: var(--sq-live);
}

@media (max-width: 767px) {
	.sq-pform__row,
	.sq-pform__links {
		grid-template-columns: minmax(0, 1fr);
	}
}