/* Icon-only play control for the homepage showcase cards. */
.portal-play-showcase__icon-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;
	border: 1px solid rgba(255, 174, 0, .92);
	border-radius: 50%;
	background: rgba(11, 10, 15, .78);
	box-shadow: 0 9px 22px rgba(0, 0, 0, .45), 0 0 0 5px rgba(255, 147, 0, .12);
	color: #ffb000;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(.94);
	transition: transform .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.portal-play-showcase__icon-play .fa {
	margin-left: 3px;
	font-size: 17px;
}

.portal-play-showcase__card:hover .portal-play-showcase__icon-play,
.portal-play-showcase__card:focus-visible .portal-play-showcase__icon-play {
	background: #ff9700;
	box-shadow: 0 12px 25px rgba(0, 0, 0, .5), 0 0 0 7px rgba(255, 151, 0, .18);
	color: #1d1010;
	transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 620px) {
	.portal-play-showcase__icon-play {
		width: 46px;
		height: 46px;
	}
}

/* --------------------------------------------------------------------------
   Homepage colour-mode polish
   Keep the same hierarchy in both modes: a clean page surface, readable
   cards, and the orange gaming accent.  This stylesheet is loaded last on
   the front page, so these rules also cover older hard-coded dark sections.
   -------------------------------------------------------------------------- */
html {
	color-scheme: dark;
}

html.portal-light {
	color-scheme: light;
	--site-bg: #f5f3f7;
	--surface-1: #ffffff;
	--surface-2: #faf8fb;
	--surface-3: #f0edf3;
	--border: rgba(42, 33, 51, .13);
	--border-strong: rgba(42, 33, 51, .22);
	--text-primary: #241f29;
	--text-secondary: #625b69;
	--text-muted: #7f7786;
	--shadow-card: 0 12px 30px rgba(43, 32, 52, .11);
}

html:not(.portal-light) .portal-home {
	background:
		radial-gradient(circle at 90% 10%, rgba(255, 138, 0, .055), transparent 24rem),
		var(--site-bg);
}

html.portal-light body,
html.portal-light .bdcn,
html.portal-light .portal-main-shell,
html.portal-light .portal-home {
	background: var(--site-bg) !important;
	color: var(--text-primary);
}

html.portal-light .portal-app-header,
html.portal-light .portal-header-search {
	background: rgba(255, 255, 255, .94);
	border-color: var(--border);
	box-shadow: 0 5px 20px rgba(43, 32, 52, .07);
}

html.portal-light .portal-app-header.is-scrolled {
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(14px);
}

html.portal-light .portal-header-search .portal-search,
html.portal-light .portal-search__results {
	background: #fff;
	border-color: var(--border-strong);
}

html.portal-light .portal-icon-button,
html.portal-light .portal-header-actions .portal-action,
html.portal-light .portal-header-actions .portal-account {
	background: #fff;
	border-color: var(--border);
	color: #5e5665 !important;
}

html.portal-light .portal-icon-button:hover,
html.portal-light .portal-icon-button:focus-visible,
html.portal-light .portal-header-actions .portal-action:hover,
html.portal-light .portal-header-actions .portal-account:hover {
	background: #f2edf4;
	border-color: rgba(255, 138, 0, .55);
	color: #2a232d !important;
}

html.portal-light .portal-sidebar {
	background: #fff;
	border-color: var(--border);
	box-shadow: 8px 0 24px rgba(43, 32, 52, .05);
}

html.portal-light .portal-sidebar a {
	color: #635b69;
}

html.portal-light .portal-sidebar a:hover,
html.portal-light .portal-sidebar a:focus-visible {
	background: #f2edf4;
	color: #241f29;
}

html.portal-light .portal-sidebar a.is-active {
	background: rgba(255, 138, 0, .13);
	color: #7a3600;
}

html.portal-light .portal-home__title,
html.portal-light .portal-section__header h2,
html.portal-light .portal-home-panel h2,
html.portal-light .portal-home-promo h2,
html.portal-light .portal-home-cta h2,
html.portal-light .portal-article-hub > header h2,
html.portal-light .portal-faq > header h2 {
	color: #241f29;
	text-shadow: none;
}

/* The Game of the Day stays deliberately vivid in both modes. */
html.portal-light .portal-home .portal-day {
	border-color: rgba(180, 70, 0, .24);
	background: linear-gradient(105deg, #ff6b25 0%, #ff9700 55%, #ffb000 100%);
	box-shadow: 0 14px 28px rgba(206, 90, 0, .22);
}

html.portal-light .portal-day h3,
html.portal-light .portal-day h3 a,
html.portal-light .portal-day__label,
html.portal-light .portal-day p {
	color: #fff !important;
}

html.portal-light .portal-day__play {
	background: #fff;
	border-color: rgba(255, 255, 255, .86);
	color: #ad4800 !important;
	box-shadow: 0 7px 16px rgba(104, 42, 0, .16);
}

html.portal-light .portal-play-showcase {
	--showcase-accent: #e76f00;
	background:
		radial-gradient(circle at 90% 83%, rgba(255, 164, 30, .17), transparent 20rem),
		linear-gradient(135deg, #fff 0%, #fff9f2 51%, #eff6fc 100%);
	border-color: rgba(218, 111, 0, .29);
	box-shadow: 0 16px 34px rgba(56, 39, 45, .12);
}

html.portal-light .portal-play-showcase h2,
html.portal-light .portal-play-showcase__header h2 {
	color: #241f29;
	text-shadow: none;
}

html.portal-light .portal-play-showcase__header p,
html.portal-light .portal-play-showcase__copy,
html.portal-light .portal-section__description,
html.portal-light .portal-home-intro p,
html.portal-light .portal-home-promo p,
html.portal-light .portal-home-cta p,
html.portal-light .portal-article-card p,
html.portal-light .portal-faq p,
html.portal-light .portal-faq dd {
	color: #625b69 !important;
}

html.portal-light .portal-play-showcase__card,
html.portal-light .portal-game-card,
html.portal-light .portal-article-card {
	border-color: rgba(45, 35, 54, .15);
	box-shadow: 0 8px 18px rgba(45, 35, 54, .10);
}

html.portal-light .portal-game-card:hover,
html.portal-light .portal-play-showcase__card:hover,
html.portal-light .portal-play-showcase__card:focus-visible {
	border-color: rgba(230, 111, 0, .72);
	box-shadow: 0 13px 25px rgba(205, 90, 0, .17);
}

html.portal-light .portal-home-panel,
html.portal-light .portal-article-hub,
html.portal-light .portal-faq {
	border-color: var(--border);
	box-shadow: 0 10px 25px rgba(43, 32, 52, .07);
}

html.portal-light .portal-home-intro,
html.portal-light .portal-home-promo,
html.portal-light .portal-home-cta {
	border-color: rgba(211, 106, 0, .25);
	box-shadow: 0 10px 24px rgba(43, 32, 52, .07);
}

html.portal-light .portal-faq details {
	border-color: var(--border);
	background: rgba(255, 255, 255, .8);
}

html.portal-light .portal-faq details[open] {
	border-color: rgba(230, 111, 0, .45);
	background: #fff7ed;
}

html.portal-light .portal-faq summary,
html.portal-light .portal-article-card h3 a,
html.portal-light .portal-game-card h3 a {
	color: #241f29;
}

html.portal-light .portal-section__more,
html.portal-light .portal-article-hub__more {
	color: #625b69 !important;
}

html.portal-light .portal-section__more:hover,
html.portal-light .portal-section__more:focus-visible,
html.portal-light .portal-article-hub__more:hover,
html.portal-light .portal-article-hub__more:focus-visible {
	color: #b65000 !important;
}

html.portal-light .portal-home-promo__grid strong,
html.portal-light .portal-home-intro__highlights strong {
	color: #241f29;
}

/* Keep the light scheme genuinely light.  These use the full homepage
   selector because the showcase's arcade skin is intentionally specific. */
html.portal-light .portal-home .portal-home__title {
	color: #241f29 !important;
	text-shadow: none !important;
}

html.portal-light .portal-home .portal-home__title::before,
html.portal-light .portal-home .portal-home__title::after {
	background: linear-gradient(90deg, transparent, #e77a00, transparent) !important;
}

html.portal-light .portal-home .portal-play-showcase {
	background:
		radial-gradient(circle at 87% 76%, rgba(255, 157, 24, .20), transparent 21rem),
		linear-gradient(135deg, #ffffff 0%, #fff8ef 54%, #eef5fb 100%) !important;
	border-color: rgba(218, 111, 0, .32) !important;
	box-shadow: 0 16px 34px rgba(56, 39, 45, .12) !important;
}

html.portal-light .portal-home .portal-play-showcase::before,
html.portal-light .portal-home .portal-play-showcase::after {
	border-color: rgba(218, 111, 0, .14) !important;
}

html.portal-light .portal-home .portal-play-showcase__header h2 {
	color: #241f29 !important;
	text-shadow: none !important;
}

/* The footer used legacy body classes for its light skin.  The application
   switch puts portal-light on html, so mirror that state here. */
html.portal-light footer.portal-site-footer {
	background:
		radial-gradient(circle at 11% 12%, rgba(255, 138, 0, .13), transparent 25%),
		radial-gradient(circle at 91% 88%, rgba(50, 166, 255, .10), transparent 27%),
		#f7f6f8 !important;
	border-top-color: #dfdce2 !important;
	color: #35323b !important;
}

html.portal-light footer.portal-site-footer::before {
	background-image: linear-gradient(rgba(65, 54, 76, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(65, 54, 76, .045) 1px, transparent 1px) !important;
}

html.portal-light .portal-site-footer__brand,
html.portal-light .portal-site-footer__bottom {
	border-color: #dfdce2 !important;
}

html.portal-light .portal-site-footer__brand p,
html.portal-light .portal-site-footer__bottom p,
html.portal-light .portal-site-footer__play-card small {
	color: #686371 !important;
}

html.portal-light .portal-site-footer__links h2,
html.portal-light .portal-site-footer__links a,
html.portal-light .portal-site-footer__wordmark {
	color: #28242e !important;
}

html.portal-light .portal-site-footer__links a:hover,
html.portal-light .portal-site-footer__links a:focus-visible {
	color: #b65000 !important;
}

html.portal-light .portal-site-footer__play-card {
	border-color: rgba(240, 150, 30, .46) !important;
	background: linear-gradient(112deg, rgba(255, 138, 0, .13), #fff) !important;
	color: #2f2836 !important;
}

html.portal-light .portal-site-footer__bottom {
	background: rgba(255, 255, 255, .55) !important;
}

@media (max-width: 767px) {
	html.portal-light .portal-header-search {
		background: rgba(255, 255, 255, .96);
	}

	html.portal-light .portal-drawer-overlay {
		background: rgba(35, 28, 40, .35);
	}
}

/* WCAG AA contrast for the white Game of the Day button. */
html.portal-light .portal-day__play { color: #873600 !important; }