@layer components {
	.sidebar {
		display: grid;
		gap: 1.25rem;
		padding: 1.25rem;
		border: var(--border-width-hairline) solid var(--color-border);
		border-radius: var(--radius-corner);
		background: var(--color-bg-surface);
		box-shadow: 0 1.25rem 3rem var(--color-shadow-soft);
	}

	.sidebar__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-width: 0;
	}

	.sidebar-ad-slot {
		display: grid;
		gap: 0;
		min-width: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	.sidebar-advertisement {
		display: grid;
		justify-items: center;
		min-width: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
	}

	.sidebar-advertisement a,
	.sidebar-advertisement img,
	.sidebar-advertisement .adsbygoogle {
		border-radius: 0;
	}

	.sidebar-comments-card {
		display: grid;
		gap: 1.125rem;
		padding: 1.25rem;
		border: 0.0625rem solid var(--color-shadow-soft);
		border-radius: var(--radius-corner);
		background: var(--color-bg-surface-translucent);
		box-shadow: 0 0.125rem 0.5rem var(--color-shadow-soft);
		backdrop-filter: none;
	}

	.sidebar-comments-card__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.sidebar-comment-box {
		display: grid;
		grid-template-columns: 4rem minmax(0, 1fr);
		gap: 1rem;
		align-items: start;
		color: inherit;
	}

	.sidebar-comment-box .avatar.medium {
		display: block;
		width: 4rem;
		height: 4rem;
		min-width: 4rem;
		border-radius: var(--radius-corner);
		object-fit: cover;
		box-shadow: 0 0.25rem 0.75rem var(--color-shadow-medium);
	}

	.sidebar-comment-box-comment {
		display: grid;
		gap: 0.25rem;
		min-width: 0;
	}

	.sidebar-comment-box-comment .comment {
		display: block;
		margin: 0;
		font-size: var(--text-xl);
		font-weight: var(--font-weight-extrabold);
		line-height: var(--leading-snug);
		color: var(--color-text-strong);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sidebar-comment-box-meta {
		display: block;
		margin: 0;
		font-size: var(--text-lg);
		line-height: var(--leading-normal);
		color: var(--color-text-strong);
	}
	
	.sidebar-comments-list {
		display: grid;
		gap: 0;
	}

	.sidebar-comments-card__item {
		border-radius: var(--radius-corner);
		background: transparent;
		transition: border-color 0.2s ease;
	}

	.sidebar-comments-card__item:not(:last-child) {
		border-bottom: 0.0625rem solid var(--color-shadow-medium);
	}

	.sidebar-comment__link {
		display: grid;
		grid-template-columns: 4rem minmax(0, 1fr);
		gap: 1rem;
		align-items: start;
		padding: 1rem 0;
		border-radius: var(--radius-corner);
		color: inherit;
		transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	}

	.sidebar-comments-card__item:first-child .sidebar-comment__link {
		padding-top: 0;
	}

	.sidebar-comments-card__item:last-child .sidebar-comment__link {
		padding-bottom: 0;
	}

	.sidebar-comment__link:hover,
	.sidebar-comment__link:focus-visible {
		background: var(--color-bg-surface-soft);
		color: inherit;
		outline: none;
		transform: translateY(-2px);
		box-shadow: 0 0.75rem 1.5rem var(--color-shadow-soft);
	}

	.sidebar-comment__link:focus-visible {
		box-shadow: 0 0 0 0.125rem var(--color-focus-gold), 0 0.75rem 1.5rem var(--color-shadow-soft);
	}

	.sidebar-comment__avatar {
		display: block;
		flex-shrink: 0;
	}

	.sidebar-comment__avatar img {
		display: block;
		inline-size: 4rem;
		block-size: 4rem;
		min-inline-size: 4rem;
		object-fit: cover;
		border-radius: var(--radius-round);
		box-shadow: 0 0.25rem 0.75rem var(--color-shadow-medium);
		transition: box-shadow 0.18s ease;
	}

	.sidebar-comment__link:hover .sidebar-comment__avatar img,
	.sidebar-comment__link:focus-visible .sidebar-comment__avatar img {
		box-shadow: 0 0.25rem 0.75rem var(--color-shadow-medium);
	}

	.sidebar-comment__content {
		display: grid;
		gap: .25rem;
		min-width: 0;
	}

	.sidebar-comment__text {
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-snug);
		color: var(--color-text-strong);

		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;

		overflow: hidden;
		text-overflow: ellipsis;
		overflow-wrap: break-word;
	}

	.sidebar-comment__meta {
		margin: 0;
		color: var(--color-text-subtle);
		font-size: var(--text-base);
		line-height: var(--leading-normal);
	}

	.sidebar-comments-card__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
	}

	.sidebar-comments-card__title {
		margin: 0;
		flex: 1 1 auto;
		min-width: 0;
	}

	.sidebar-comments-card__actions[hidden] {
		display: none !important;
	}

	.sidebar-comments-card__actions {
		flex: 0 0 auto;
		margin-left: 0.5rem;
	}

	.sidebar-comments-card__toggle {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 1.75rem;
		height: 1.75rem;
		overflow: hidden;
		border-radius: var(--radius-corner);
		padding: 0 0.28rem;
		background-color: var(--color-scrollbar-track);
		font-size: var(--text-xs);
		font-weight: var(--font-weight-extrabold);
		line-height: var(--leading-none);
		cursor: pointer;
		transition: width 0.3s ease-out, background-color 0.3s ease-out;
	}

	.sidebar-comments-card__toggle:hover,
	.sidebar-comments-card__toggle:focus-visible {
		width: 4.4rem;
		background-color: var(--color-scrollbar-thumb);
	}

	.sidebar-comments-card__count {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 1.15rem;
		height: 100%;
		flex-shrink: 0;
		text-align: center;
		padding-bottom: 0.0625rem;
	}

	.sidebar-comments-card__load {
		pointer-events: none;
		display: flex;
		align-items: center;
		height: 100%;
		max-width: 0;
		margin-left: 0.1rem;
		overflow: hidden;
		white-space: nowrap;
		font-size: var(--text-xs);
		font-weight: var(--font-weight-extrabold);
		opacity: 0;
		transition: max-width 0.3s ease-out, opacity 0.3s ease-out;
	}

	.sidebar-comments-card__toggle:hover .sidebar-comments-card__load,
	.sidebar-comments-card__toggle:focus-visible .sidebar-comments-card__load {
		max-width: 2.3rem;
		opacity: 1;
	}

	.sidebar--releases {
		gap: 1.125rem;
		padding: 1.25rem;
		border: 0.0625rem solid var(--color-shadow-soft);
		border-radius: var(--radius-corner);
		background: var(--color-bg-surface-translucent);
		box-shadow: 0 0.125rem 0.5rem var(--color-shadow-soft);
		backdrop-filter: none;
	}

	.sidebar__title {
		margin: 0;
		flex: 1 1 auto;
		min-width: 0;
		font-size: var(--text-lg);
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-compact);
		color: var(--color-text-strong);
	}

	.sidebar-releases {
		display: grid;
		gap: 0;
		list-style: none;
	}

	.sidebar-releases__item {
		border-radius: var(--radius-corner);
		background: transparent;
		transition: border-color 0.2s ease;
	}

	.sidebar-releases__item:not(:last-child) {
		border-bottom: 0.0625rem solid var(--color-shadow-medium);
	}

	.sidebar-release-game-box {
		display: grid;
		grid-template-columns: 4rem minmax(0, 1fr);
		gap: 1rem;
		align-items: start;
		padding: 1rem 0;
		border-radius: var(--radius-corner);
		color: inherit;
		transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	}

	.sidebar-releases__item:first-child .sidebar-release-game-box {
		padding-top: 0;
	}

	.sidebar-releases__item:last-child .sidebar-release-game-box {
		padding-bottom: 0;
	}

	.sidebar-release-game-box:hover,
	.sidebar-release-game-box:focus-visible {
		background: var(--color-bg-surface-soft);
		color: inherit;
		outline: none;
		transform: translateY(-2px);
		box-shadow: 0 0.75rem 1.5rem var(--color-shadow-soft);
	}

	.sidebar-release-game-box:focus-visible {
		box-shadow: 0 0 0 0.125rem var(--color-focus-gold), 0 0.75rem 1.5rem var(--color-shadow-soft);
	}

	.sidebar-release-game-box__image {
		display: block;
		inline-size: 4rem;
		block-size: 4rem;
		min-inline-size: 4rem;
		border-radius: var(--radius-corner-m);
		object-fit: cover;
		box-shadow: 0 0.25rem 0.75rem var(--color-shadow-medium);
		transition: box-shadow 0.18s ease;
	}

	.sidebar-release-game-box:hover .sidebar-release-game-box__image,
	.sidebar-release-game-box:focus-visible .sidebar-release-game-box__image {
		box-shadow: 0 0.25rem 0.75rem var(--color-shadow-medium);
	}

	.sidebar-release-game-box__content {
		display: grid;
		gap: 0.5rem;
		min-width: 0;
	}

	.sidebar-release-game-box__title {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-title);
		color: var(--color-text-strong);
		transition: color 0.2s ease;
	}

	.sidebar-release-game-box__platforms {
		display: flex;
		flex-wrap: wrap;
		gap: 0.375rem;
	}

.sidebar-release-game-box__platform {
	min-width: 2.375rem;
	max-width: none;
	min-height: 1.5rem;
	padding-inline: 0.625rem;
	border-radius: var(--radius-round);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-none);
color: var(--color-badge-platform-text);
box-shadow: inset 0 -0.0625rem 0 var(--color-black-alpha-12);
	transition: filter 0.18s ease;
}

	.sidebar-release-game-box__date {
		font-size: var(--text-sm);
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-snug);
		color: var(--color-text-faint);
	}

	:root[data-theme="dark"] .sidebar--releases {
		background: var(--color-bg-overlay-strong);
		border-color: var(--color-border-on-dark);
		box-shadow: 0 1rem 2rem color-mix(in oklch, var(--color-black) 22%, transparent);
	}

	:root[data-theme="dark"] .sidebar__title,
	:root[data-theme="dark"] .sidebar-release-game-box__title {
		color: var(--color-text-on-image);
	}

	:root[data-theme="dark"] .sidebar-releases__item:not(:last-child) {
		border-bottom-color: var(--color-border-on-dark);
	}

	:root[data-theme="dark"] .sidebar-release-game-box:hover,
	:root[data-theme="dark"] .sidebar-release-game-box:focus-visible {
		background: var(--color-bg-on-dark-subtle);
		box-shadow: 0 0.75rem 1.5rem color-mix(in oklch, var(--color-black) 20%, transparent);
	}

	:root[data-theme="dark"] .sidebar-release-game-box:focus-visible {
		box-shadow: 0 0 0 0.125rem color-mix(in oklch, var(--color-brand-primary) 34%, transparent), 0 0.75rem 1.5rem color-mix(in oklch, var(--color-black) 20%, transparent);
	}

	:root[data-theme="dark"] .sidebar-release-game-box__date {
		color: var(--color-text-on-image-subtle);
	}

	:root[data-theme="dark"] .sidebar-comments-card {
		background: var(--color-bg-overlay-strong);
		border-color: var(--color-border-on-dark);
		box-shadow: 0 1rem 2rem color-mix(in oklch, var(--color-black) 22%, transparent);
	}

	:root[data-theme="dark"] .sidebar-comments-card__title,
	:root[data-theme="dark"] .sidebar-comment__text {
		color: var(--color-text-on-image);
	}

	:root[data-theme="dark"] .sidebar-comments-card__item:not(:last-child) {
		border-bottom-color: var(--color-border-on-dark);
	}

	:root[data-theme="dark"] .sidebar-comment__link:hover,
	:root[data-theme="dark"] .sidebar-comment__link:focus-visible {
		background: var(--color-bg-on-dark-subtle);
		box-shadow: 0 0.75rem 1.5rem color-mix(in oklch, var(--color-black) 20%, transparent);
	}

	:root[data-theme="dark"] .sidebar-comment__link:focus-visible {
		box-shadow: 0 0 0 0.125rem color-mix(in oklch, var(--color-brand-primary) 34%, transparent), 0 0.75rem 1.5rem color-mix(in oklch, var(--color-black) 20%, transparent);
	}

	:root[data-theme="dark"] .sidebar-comment__meta {
		color: var(--color-text-on-image-subtle);
	}
}