/* Status143 — Classic Aquarium site-wide live wallpaper (Option A) */

html {
	min-height: 100%;
	background: linear-gradient(#073b4c 0%, #118ab2 45%, #06d6a0 100%);
	background-attachment: fixed;
}

body {
	background: transparent !important;
	position: relative;
}

.s143-site-wallpaper {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	isolation: isolate;
}

.s143-aqua {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
		radial-gradient(ellipse 60% 40% at 75% 10%, rgba(180, 255, 240, 0.14), transparent 50%),
		linear-gradient(#073b4c 0%, #118ab2 45%, #06d6a0 100%);
}

/* Soft underwater light shafts */
.s143-aqua::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.07) 42%, transparent 48%),
		linear-gradient(118deg, transparent 50%, rgba(255, 255, 255, 0.05) 56%, transparent 62%),
		linear-gradient(95deg, transparent 18%, rgba(255, 255, 255, 0.06) 24%, transparent 30%);
	animation: s143-rays 14s ease-in-out infinite alternate;
	pointer-events: none;
}

.s143-aqua .s143-bubble {
	position: absolute;
	bottom: -24px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0.1));
	border: 1px solid rgba(255, 255, 255, 0.65);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
	animation: s143-rise 9s linear infinite;
	will-change: transform, opacity;
}

.s143-aqua .s143-b1 { left: 8%; animation-duration: 7s; }
.s143-aqua .s143-b2 { left: 22%; width: 10px; height: 10px; animation-duration: 10s; animation-delay: -2s; }
.s143-aqua .s143-b3 { left: 38%; width: 18px; height: 18px; animation-duration: 6.5s; animation-delay: -1s; }
.s143-aqua .s143-b4 { left: 55%; width: 11px; height: 11px; animation-duration: 9s; animation-delay: -3.5s; }
.s143-aqua .s143-b5 { left: 72%; width: 15px; height: 15px; animation-duration: 8s; animation-delay: -4.5s; }
.s143-aqua .s143-b6 { left: 88%; width: 9px; height: 9px; animation-duration: 11s; animation-delay: -1.5s; }
.s143-aqua .s143-b7 { left: 15%; width: 8px; height: 8px; animation-duration: 8.5s; animation-delay: -6s; }
.s143-aqua .s143-b8 { left: 45%; width: 12px; height: 12px; animation-duration: 7.2s; animation-delay: -3s; }
.s143-aqua .s143-b9 { left: 63%; width: 7px; height: 7px; animation-duration: 12s; animation-delay: -7s; }
.s143-aqua .s143-b10 { left: 80%; width: 13px; height: 13px; animation-duration: 6.8s; animation-delay: -2.5s; }

.s143-aqua .s143-fish {
	position: absolute;
	font-size: 36px;
	line-height: 1;
	animation: s143-swim 14s ease-in-out infinite;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
	opacity: 0.92;
	will-change: transform, left;
}

.s143-aqua .s143-f1 { top: 18%; animation-duration: 13s; }
.s143-aqua .s143-f2 {
	top: 42%;
	font-size: 30px;
	animation-name: s143-swim-flip;
	animation-duration: 16s;
	animation-delay: -5s;
}
.s143-aqua .s143-f3 {
	top: 68%;
	font-size: 26px;
	animation-duration: 18s;
	animation-delay: -8s;
}

.s143-aqua .s143-weed {
	position: absolute;
	bottom: -6px;
	font-size: 52px;
	line-height: 1;
	opacity: 0.92;
	animation: s143-weed 3.5s ease-in-out infinite;
	transform-origin: bottom center;
	filter: drop-shadow(0 4px 8px rgba(0, 40, 30, 0.35));
	will-change: transform;
}

.s143-aqua .s143-w1 { left: 4%; }
.s143-aqua .s143-w2 { left: 14%; animation-delay: -1s; font-size: 34px; }
.s143-aqua .s143-w3 { left: 78%; animation-delay: -1.8s; }
.s143-aqua .s143-w4 { left: 90%; animation-delay: -0.6s; font-size: 36px; }

@keyframes s143-rise {
	0% { transform: translateY(0) scale(0.8); opacity: 0; }
	12% { opacity: 0.9; }
	100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}

@keyframes s143-rays {
	0% { opacity: 0.55; transform: translateX(-1%); }
	100% { opacity: 1; transform: translateX(1.5%); }
}

@keyframes s143-swim {
	0% { left: -12%; transform: translateY(0) scaleX(1); }
	45% { left: 88%; transform: translateY(-14px) scaleX(1); }
	50% { left: 88%; transform: translateY(-14px) scaleX(-1); }
	95% { left: -12%; transform: translateY(10px) scaleX(-1); }
	100% { left: -12%; transform: translateY(0) scaleX(1); }
}

@keyframes s143-swim-flip {
	0% { left: 105%; transform: translateY(0) scaleX(-1); }
	45% { left: -12%; transform: translateY(12px) scaleX(-1); }
	50% { left: -12%; transform: translateY(12px) scaleX(1); }
	95% { left: 105%; transform: translateY(-10px) scaleX(1); }
	100% { left: 105%; transform: translateY(0) scaleX(-1); }
}

@keyframes s143-weed {
	0%, 100% { transform: rotate(-4deg); }
	50% { transform: rotate(5deg); }
}

/* Keep page content above the aquarium */
.main,
.footer,
.games-shell,
.games-play-shell {
	position: relative;
	z-index: 1;
}

.navbar.navbar-fixed-top {
	z-index: 1030;
}

.loader,
.s143-games-intro,
.games-howto-overlay {
	z-index: 2000;
}

/* Let aquarium show through games page chrome */
.games-shell,
.games-play-shell {
	background: transparent !important;
}

@media (max-width: 768px) {
	.s143-aqua .s143-b4,
	.s143-aqua .s143-b5,
	.s143-aqua .s143-b6,
	.s143-aqua .s143-b8,
	.s143-aqua .s143-b9,
	.s143-aqua .s143-b10,
	.s143-aqua .s143-f3,
	.s143-aqua .s143-w4 {
		display: none;
	}

	.s143-aqua .s143-fish {
		font-size: 28px;
	}

	.s143-aqua .s143-f2 {
		font-size: 24px;
	}

	.s143-aqua .s143-weed {
		font-size: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.s143-aqua .s143-bubble,
	.s143-aqua .s143-fish,
	.s143-aqua .s143-weed,
	.s143-aqua::before {
		animation: none !important;
	}

	.s143-aqua .s143-fish {
		left: 20%;
	}

	.s143-aqua .s143-f2 {
		left: 60%;
	}

	.s143-aqua .s143-f3 {
		left: 40%;
	}
}

/* ===== Glass polish + text contrast ===== */

.recommended-info {
	margin-bottom: 6px;
}

.recommended-info h1,
.recommended-info h2,
.recommended-info h3,
.resent-info h3,
.song-info h3,
.main .recommended-info h1,
.main .recommended-info h2 {
	color: #ffffff !important;
	text-shadow:
		0 0 18px rgba(120, 255, 230, 0.45),
		0 2px 12px rgba(0, 20, 40, 0.55);
	letter-spacing: 0.01em;
	position: relative;
	display: inline-block;
	padding-bottom: 8px;
}

.recommended-info h1::after,
.recommended-info h2::after,
.recommended-info h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56%;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, #7dffd4, rgba(125, 255, 212, 0));
	box-shadow: 0 0 12px rgba(125, 255, 212, 0.65);
}

.recommended-info a,
.recommended-info a:visited,
.recommended-info a:hover,
.recommended-info a:focus {
	color: #ffffff !important;
}

.recommended-info a:hover,
.recommended-info a:focus {
	color: #d7fff4 !important;
	text-decoration: none;
}

/* Full video card as one glass unit */
.resent-grid.recommended-grid,
.resent-grid {
	transition: transform 0.25s ease, filter 0.25s ease;
}

.resent-grid.recommended-grid:hover,
.resent-grid:hover {
	transform: translateY(-4px);
	filter: drop-shadow(0 14px 22px rgba(0, 30, 50, 0.28));
}

.resent-grid-img,
.recommended-grid-img {
	border-radius: 14px 14px 0 0;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.resent-grid-info,
.resent-grid-info.recommended-grid-info,
.recommended-grid-info.video-info-grid {
	background: rgba(255, 255, 255, 0.34) !important;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-top: 0;
	border-radius: 0 0 14px 14px;
	box-shadow:
		0 12px 28px rgba(0, 30, 50, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
	backdrop-filter: blur(14px) saturate(1.25);
	-webkit-backdrop-filter: blur(14px) saturate(1.25);
	padding: 8px 10px 10px !important;
}

.recommended-grid-info h2,
.recommended-grid-info h3,
.recommended-grid-info h5,
.resent-grid-info h2,
.resent-grid-info h3,
.video-info-grid h2,
.video-info-grid h3 {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	overflow: hidden;
	line-height: 1.3 !important;
}

.video-info-grid .video-title-ellipsis,
.recommended-grid-info .video-title-ellipsis {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal !important;
	line-height: 1.3 !important;
}

.video-info-grid [id^="download_section_"],
.recommended-grid-info [id^="download_section_"] {
	margin-top: 2px !important;
	line-height: 1 !important;
}

.video-info-grid [id^="download_section_"] button,
.recommended-grid-info [id^="download_section_"] button {
	padding: 0 !important;
	vertical-align: middle;
}

.resent-grid-info a.title,
.recommended-grid-info a.title,
.resent-grid-info a.title:visited,
.recommended-grid-info a.title:visited {
	color: #062830 !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.resent-grid-info a.title:hover,
.recommended-grid-info a.title:hover {
	color: #045c68 !important;
}

.recommended-grids footer a,
.resent-grid > footer a {
	color: #ffffff !important;
	text-shadow: 0 1px 6px rgba(0, 20, 40, 0.45);
}

.recommended-grids footer a:hover,
.resent-grid > footer a:hover {
	color: #d7fff4 !important;
}

.breadcrumb-wrapper,
nav[aria-label="Breadcrumb"] {
	background: rgba(255, 255, 255, 0.28) !important;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 10px;
	padding: 6px 12px !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 20px rgba(0, 30, 50, 0.12);
}

.games-dash-hero h1,
.games-dash-kicker,
.games-play-bar h1 {
	color: #ffffff !important;
	text-shadow:
		0 0 18px rgba(120, 255, 230, 0.45),
		0 2px 12px rgba(0, 20, 40, 0.55);
}

.games-dash-sub {
	color: rgba(255, 255, 255, 0.92) !important;
	text-shadow: 0 2px 10px rgba(0, 20, 40, 0.4);
}

/* ===== Inner pages: titles on water + glass content panels ===== */

:root {
	--s143-glass: rgba(255, 255, 255, 0.38);
	--s143-glass-border: rgba(255, 255, 255, 0.45);
	--s143-ink: #062830;
	--s143-muted: #1f4a55;
}

/* Shared glass panel */
.s143-glass,
article.recommended-info,
.recommended-info:has(.history-text),
.recommended-info:has(.terms-info),
.recommended-info.copy-info,
.news-main-grids > .recommended-info,
.about-main-grids > .recommended-info,
.main .show-top-grids .main-grids > article,
.single-right,
.published,
.all-categories-section,
.web-stories-page-header,
.songs-main-grids .recommended-info {
	background: var(--s143-glass) !important;
	border: 1px solid var(--s143-glass-border);
	border-radius: 16px;
	box-shadow:
		0 12px 28px rgba(0, 30, 50, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	padding: 22px 24px !important;
	color: var(--s143-ink);
}

/* Detail page title + meta — light on water */
.song-info h1,
.song-info h1[itemprop="name"] {
	color: #ffffff !important;
	text-shadow:
		0 0 18px rgba(120, 255, 230, 0.45),
		0 2px 12px rgba(0, 20, 40, 0.55) !important;
}

.song-info .video-meta,
.song-info .video-meta span,
.song-info .video-meta time {
	color: rgba(255, 255, 255, 0.92) !important;
}

.song-info .video-meta .glyphicon {
	color: #b8fff0 !important;
}

/* Category / search / stories page titles on water */
#category-title,
#search-heading,
.recommended > header > h1,
.web-stories-header h1,
.main .recommended > header > h1,
.main-grids > header > h1 {
	color: #ffffff !important;
	text-shadow:
		0 0 18px rgba(120, 255, 230, 0.45),
		0 2px 12px rgba(0, 20, 40, 0.55);
	position: relative;
	display: inline-block;
	padding-bottom: 8px;
}

#category-title::after,
#search-heading::after,
.recommended > header > h1::after,
.web-stories-header h1::after,
.main-grids > header > h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56%;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, #7dffd4, rgba(125, 255, 212, 0));
	box-shadow: 0 0 12px rgba(125, 255, 212, 0.65);
}

.web-stories-header p,
.main .web-stories-header p,
.main-grids > header > p {
	color: rgba(255, 255, 255, 0.9) !important;
	text-shadow: 0 2px 8px rgba(0, 20, 40, 0.4);
}

/* Content panels: dark readable text (override water-white headings) */
article.recommended-info h1,
article.recommended-info h2,
article.recommended-info h3,
.recommended-info:has(.history-text) h1,
.recommended-info:has(.history-text) h2,
.recommended-info:has(.history-text) h3,
.recommended-info:has(.terms-info) h1,
.recommended-info:has(.terms-info) h2,
.recommended-info:has(.terms-info) h3,
.recommended-info.copy-info h1,
.recommended-info.copy-info h2,
.recommended-info.copy-info h3,
.news-main-grids > .recommended-info h1,
.news-main-grids > .recommended-info h2,
.news-main-grids > .recommended-info h3,
.about-main-grids > .recommended-info h1,
.about-main-grids > .recommended-info h2,
.about-main-grids > .recommended-info h3,
.main .show-top-grids .main-grids > article h1,
.main .show-top-grids .main-grids > article h2,
.main .show-top-grids .main-grids > article h3,
.published h2,
.published h3,
.all-categories-section h4,
.single-right h2,
.single-right h3,
.related-videos h2 {
	color: var(--s143-ink) !important;
	text-shadow: none !important;
}

article.recommended-info h1::after,
article.recommended-info h2::after,
article.recommended-info h3::after,
.recommended-info:has(.history-text) h1::after,
.recommended-info:has(.history-text) h2::after,
.recommended-info:has(.terms-info) h1::after,
.recommended-info:has(.terms-info) h3::after,
.news-main-grids > .recommended-info h1::after,
.about-main-grids > .recommended-info h1::after,
.main .show-top-grids .main-grids > article h1::after {
	background: linear-gradient(90deg, #0aa08c, rgba(10, 160, 140, 0));
}

article.recommended-info a,
.recommended-info:has(.history-text) a,
.recommended-info:has(.terms-info) a,
.news-main-grids > .recommended-info a,
.about-main-grids > .recommended-info a,
.main .show-top-grids .main-grids > article a {
	color: #067a8a !important;
}

article.recommended-info a:hover,
.recommended-info:has(.history-text) a:hover,
.recommended-info:has(.terms-info) a:hover,
.main .show-top-grids .main-grids > article a:hover {
	color: #045c68 !important;
}

.history-text,
.history-text p,
.terms-info p,
.terms-info-grid p,
.published p,
.main .show-top-grids .main-grids > article p,
.main .show-top-grids .main-grids > article label {
	color: var(--s143-muted) !important;
}

.history-text strong,
.terms-info strong {
	color: var(--s143-ink) !important;
}

/* Detail sidebar Up Next — glass already; keep titles dark */
.single-right {
	background: rgba(255, 255, 255, 0.42) !important;
	padding: 18px 16px !important;
}

.single-right-grid-right a.title,
.single-right-grid-right a.title:visited {
	color: var(--s143-ink) !important;
}

.single-right-grid-right a.title:hover {
	color: #067a8a !important;
}

/* Category badges on detail */
.all-categories-section .category-badge {
	background: rgba(255, 255, 255, 0.75) !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
	color: var(--s143-ink) !important;
}

/* Contact form inputs stay solid white for typing */
.main .show-top-grids .main-grids > article input,
.main .show-top-grids .main-grids > article textarea,
.main .show-top-grids .main-grids > article select {
	background: #fff !important;
	color: #222 !important;
}

/* Web stories empty state / header */
.web-stories-header {
	margin-bottom: 18px;
}

.no-stories {
	background: var(--s143-glass) !important;
	border: 1px solid var(--s143-glass-border);
	border-radius: 16px;
	padding: 28px !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	text-align: center;
}

.no-stories h2 {
	color: var(--s143-ink) !important;
}

.no-stories p {
	color: var(--s143-muted) !important;
}

.story-card {
	background: rgba(255, 255, 255, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 10px 24px rgba(0, 30, 50, 0.18) !important;
}

.story-card-title {
	color: var(--s143-ink) !important;
}

.story-card-meta {
	color: var(--s143-muted) !important;
}

/* Breadcrumb: force glass even when inline white bg exists */
.breadcrumb-wrapper,
nav[aria-label="Breadcrumb"] {
	background: rgba(255, 255, 255, 0.42) !important;
}

.breadcrumb-wrapper .breadcrumb,
nav[aria-label="Breadcrumb"] .breadcrumb {
	background: transparent !important;
}