/**
 * Mobile bottom dock + mobile header effects (2026-09-30).
 * Markup: inc/psp-mobile-dock.php · behaviour: js/cricket-dock.js
 *
 *   1. Dock shell (≤991px only; desktop never shows it)
 *   2. Tabs, active indicator, badge, live dot
 *   3. Chat tab: pulsing gold disc + "Join the discussion" tip
 *   4. Motion: entrance, tap ripple, icon pop, top-edge shimmer
 *   5. Mobile header: stuck-bar drop-in, sheen sweep, scroll-progress line
 *   6. Room for the dock (footer, back-to-top, toasts); old Chat FAB hidden
 *   7. Homepage "Today's predictions" strip
 *   8. Light mode
 *   9. Reduced motion
 */

:root {
	--dock-h: 66px;
	--dock-bg: rgba( 5, 14, 28, 0.94 );
	--dock-solid: #050e1c;
	--dock-line: rgba( 255, 255, 255, 0.09 );
	--dock-shadow: rgba( 0, 0, 0, 0.45 );
	--dock-idle: #9fb0c8;
	--dock-on: #ffb020;
	--dock-gold: #ffb020;
	--dock-navy: #0a1830;
	--dock-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
	--dock-spring: cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.cricket-dock,
.cricket-today-strip {
	display: none;
}

@media ( max-width: 991px ) {

	/* =================================================================
	 * 1. Dock shell
	 * ============================================================== */

	.cricket-dock {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99990;
		padding-bottom: env( safe-area-inset-bottom, 0px );
		background: var( --dock-bg );
		border-top: 1px solid var( --dock-line );
		box-shadow: 0 -10px 30px var( --dock-shadow );
		backdrop-filter: blur( 16px ) saturate( 160% );
		-webkit-backdrop-filter: blur( 16px ) saturate( 160% );
		font-family: 'Outfit', 'PT Sans', sans-serif;
		animation: dockRise 0.6s var( --dock-ease ) both;
	}

	/* A gold glint that runs along the top edge every few seconds */
	.cricket-dock::before {
		content: '';
		position: absolute;
		top: -1px;
		left: 0;
		width: 38%;
		height: 1px;
		background: linear-gradient( 90deg, transparent, var( --dock-gold ), #3a86e0, transparent );
		opacity: 0.9;
		animation: dockGlint 6s ease-in-out 1.2s infinite;
		pointer-events: none;
	}

	.cricket-dock__list {
		display: grid;
		grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
		height: var( --dock-h );
		margin: 0 auto;
		padding: 0 4px;
		max-width: 640px;
		list-style: none;
	}

	.cricket-dock__item {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
		min-width: 0;
		animation: dockItemIn 0.5s var( --dock-spring ) both;
	}

	.cricket-dock__item:nth-child( 1 ) { animation-delay: 0.12s; }
	.cricket-dock__item:nth-child( 2 ) { animation-delay: 0.17s; }
	.cricket-dock__item:nth-child( 3 ) { animation-delay: 0.22s; }
	.cricket-dock__item:nth-child( 4 ) { animation-delay: 0.27s; }
	.cricket-dock__item:nth-child( 5 ) { animation-delay: 0.32s; }
	.cricket-dock__item:nth-child( 6 ) { animation-delay: 0.37s; }

	/* =================================================================
	 * 2. Tabs
	 * ============================================================== */

	.cricket-dock__link,
	.cricket-dock__link:visited {
		position: relative;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		overflow: hidden;
		color: var( --dock-idle );
		text-decoration: none !important;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.25s ease;
	}

	.cricket-dock__link:hover,
	.cricket-dock__link:focus {
		color: #eaf4ff;
		text-decoration: none;
	}

	.cricket-dock__link:focus-visible {
		outline: 2px solid var( --dock-gold );
		outline-offset: -4px;
		border-radius: 12px;
	}

	/* Active indicator: a gold notch that springs open along the top */
	.cricket-dock__link::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 28px;
		height: 3px;
		margin-left: -14px;
		border-radius: 0 0 4px 4px;
		background: var( --dock-gold );
		box-shadow: 0 0 12px rgba( 255, 176, 32, 0.7 );
		transform: scaleX( 0 );
		transition: transform 0.35s var( --dock-spring );
	}

	.cricket-dock__link.is-active,
	.cricket-dock__link.is-active:visited {
		color: var( --dock-on );
	}

	.cricket-dock__link.is-active::before {
		transform: scaleX( 1 );
	}

	/* Soft glow puddle under the active icon */
	.cricket-dock__link.is-active::after {
		content: '';
		position: absolute;
		top: 8px;
		left: 50%;
		width: 44px;
		height: 30px;
		margin-left: -22px;
		border-radius: 50%;
		background: radial-gradient( closest-side, rgba( 255, 176, 32, 0.22 ), transparent );
		pointer-events: none;
	}

	.cricket-dock__icon {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 28px;
		transition: transform 0.3s var( --dock-spring );
	}

	.cricket-dock__icon svg {
		position: relative;
		display: block;
	}

	.cricket-dock__link.is-active .cricket-dock__icon {
		transform: translateY( -1px ) scale( 1.06 );
	}

	.cricket-dock__label {
		max-width: 100%;
		overflow: hidden;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.1;
		letter-spacing: 0.01em;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.cricket-dock__link.is-active .cricket-dock__label {
		font-weight: 700;
	}

	/* Predict: gold count badge, pops in then nudges every few seconds */
	.cricket-dock__badge {
		position: absolute;
		top: -6px;
		left: 21px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		box-sizing: border-box;
		border: 2px solid var( --dock-solid );
		border-radius: 9px;
		background: var( --dock-gold );
		color: var( --dock-navy );
		font: 700 10px/14px 'JetBrains Mono', ui-monospace, monospace;
		text-align: center;
		animation: dockBadgePop 0.55s var( --dock-spring ) 0.6s both, dockBadgeNudge 5s ease-in-out 3s infinite;
	}

	.cricket-dock.has-open .cricket-dock__link--pred:not( .is-active ) {
		color: #ffd27a;
	}

	/* Live: red dot, only while a match is live */
	.cricket-dock__live {
		position: absolute;
		top: 1px;
		right: 4px;
		width: 9px;
		height: 9px;
		border: 2px solid var( --dock-solid );
		border-radius: 50%;
		background: #ff4757;
		opacity: 0;
		transform: scale( 0 );
		transition: opacity 0.3s ease, transform 0.35s var( --dock-spring );
	}

	.cricket-dock.is-live .cricket-dock__live {
		opacity: 1;
		transform: scale( 1 );
		animation: dockBlink 1.2s ease-in-out infinite;
	}

	/* =================================================================
	 * 3. Chat tab
	 * ============================================================== */

	.cricket-dock__ping,
	.cricket-dock__disc {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 32px;
		height: 32px;
		margin: -16px 0 0 -16px;
		border-radius: 50%;
		background: var( --dock-gold );
		opacity: 0;
		transform: scale( 0.4 );
		transition: opacity 0.3s ease, transform 0.4s var( --dock-spring );
	}

	.cricket-dock__dots {
		transition: opacity 0.25s ease;
	}

	/* On a post with a discussion: gold disc + expanding ring */
	.cricket-dock.is-chat-here .cricket-dock__link--chat {
		color: var( --dock-on );
	}

	.cricket-dock.is-chat-here .cricket-dock__link--chat .cricket-dock__disc {
		opacity: 1;
		transform: scale( 1 );
		box-shadow: 0 0 16px rgba( 255, 176, 32, 0.55 );
	}

	.cricket-dock.is-chat-here .cricket-dock__link--chat svg {
		color: var( --dock-navy );
		width: 19px;
		height: 19px;
		stroke-width: 2.4;
	}

	.cricket-dock.is-chat-here .cricket-dock__link--chat .cricket-dock__dots {
		opacity: 0;
	}

	.cricket-dock.is-chat-here:not( .is-chat-seen ) .cricket-dock__ping {
		animation: dockPing 1.8s cubic-bezier( 0, 0, 0.2, 1 ) 0.9s infinite;
	}

	.cricket-dock.is-chat-here:not( .is-chat-seen ) .cricket-dock__link--chat .cricket-dock__icon {
		animation: dockWiggle 4s ease-in-out 1.4s infinite;
	}

	.cricket-dock.is-chat-here:not( .is-chat-seen ) .cricket-dock__link--chat .cricket-dock__label {
		font-weight: 800;
	}

	/* Once the reader is at the discussion: calm, marked as the current tab */
	.cricket-dock.is-chat-seen .cricket-dock__link--chat::before {
		transform: scaleX( 1 );
	}

	/* The tip bubble above the Chat tab (4th of 6 columns) */
	.cricket-dock__tip {
		position: absolute;
		bottom: calc( 100% + 12px );
		left: 50%;
		width: 200px;
		margin-left: -100px;
		padding: 9px 12px;
		box-sizing: border-box;
		border-radius: 12px;
		background: var( --dock-gold );
		color: var( --dock-navy );
		box-shadow: 0 10px 26px rgba( 0, 0, 0, 0.4 );
		line-height: 1.25;
		pointer-events: none;
		opacity: 0;
		transform: translateY( 8px ) scale( 0.96 );
		transition: opacity 0.35s ease, transform 0.45s var( --dock-spring );
	}

	.cricket-dock__tip[hidden] {
		display: block;
		visibility: hidden;
	}

	.cricket-dock__tip.is-on {
		visibility: visible;
		opacity: 1;
		transform: none;
		animation: dockBob 2.4s ease-in-out 0.5s infinite;
	}

	.cricket-dock__tip strong {
		display: block;
		font: 700 13px/1.25 'Outfit', sans-serif;
	}

	.cricket-dock__tip span {
		display: block;
		margin-top: 2px;
		font: 400 12px/1.3 'PT Sans', sans-serif;
	}

	/* Arrow: points at the Chat tab (centre of column 4 of 6) */
	.cricket-dock__tip::after {
		content: '';
		position: absolute;
		bottom: -6px;
		left: var( --dock-tip-arrow, 50% );
		width: 12px;
		height: 12px;
		margin-left: -6px;
		background: var( --dock-gold );
		transform: rotate( 45deg );
	}

	/* =================================================================
	 * 4. Motion
	 * ============================================================== */

	/* Tap ripple (span added by cricket-dock.js) */
	.cricket-dock__ripple {
		position: absolute;
		width: 60px;
		height: 60px;
		margin: -30px 0 0 -30px;
		border-radius: 50%;
		background: radial-gradient( closest-side, rgba( 255, 176, 32, 0.45 ), rgba( 255, 176, 32, 0 ) );
		pointer-events: none;
		animation: dockRipple 0.55s var( --dock-ease ) forwards;
	}

	.cricket-dock__link.is-pressed .cricket-dock__icon {
		animation: dockPop 0.45s var( --dock-spring );
	}

	.cricket-dock__link.is-pressed::before {
		transform: scaleX( 1 );
	}

	@keyframes dockRise {
		from { transform: translateY( 100% ); opacity: 0; }
		to { transform: none; opacity: 1; }
	}

	@keyframes dockItemIn {
		from { transform: translateY( 14px ) scale( 0.9 ); opacity: 0; }
		to { transform: none; opacity: 1; }
	}

	@keyframes dockGlint {
		0% { transform: translateX( -100% ); opacity: 0; }
		10% { opacity: 0.9; }
		45% { transform: translateX( 270% ); opacity: 0; }
		100% { transform: translateX( 270% ); opacity: 0; }
	}

	@keyframes dockBadgePop {
		from { transform: scale( 0 ); }
		to { transform: scale( 1 ); }
	}

	@keyframes dockBadgeNudge {
		0%, 88%, 100% { transform: scale( 1 ); }
		92% { transform: scale( 1.25 ); }
		96% { transform: scale( 0.95 ); }
	}

	@keyframes dockBlink {
		0%, 100% { box-shadow: 0 0 0 0 rgba( 255, 71, 87, 0.6 ); }
		50% { box-shadow: 0 0 0 5px rgba( 255, 71, 87, 0 ); }
	}

	@keyframes dockPing {
		0% { transform: scale( 1 ); opacity: 0.7; }
		80%, 100% { transform: scale( 1.9 ); opacity: 0; }
	}

	@keyframes dockWiggle {
		0%, 84%, 100% { transform: rotate( 0 ); }
		87% { transform: rotate( -12deg ) scale( 1.08 ); }
		90% { transform: rotate( 10deg ) scale( 1.08 ); }
		93% { transform: rotate( -6deg ); }
		96% { transform: rotate( 3deg ); }
	}

	@keyframes dockBob {
		0%, 100% { transform: translateY( 0 ); }
		50% { transform: translateY( -4px ); }
	}

	@keyframes dockRipple {
		from { transform: scale( 0.2 ); opacity: 1; }
		to { transform: scale( 1.6 ); opacity: 0; }
	}

	@keyframes dockPop {
		0% { transform: scale( 1 ); }
		35% { transform: scale( 0.82 ); }
		70% { transform: scale( 1.14 ) translateY( -2px ); }
		100% { transform: scale( 1.06 ) translateY( -1px ); }
	}

	/* =================================================================
	 * 5. Mobile header effects (the stuck app-bar)
	 * ============================================================== */

	/* Anchor for the sheen/progress spans (jquery.sticky sets fixed inline) */
	#sticky-navigation-bar {
		position: relative;
	}

	/* Drops in with a spring when it sticks */
	.sticky-wrapper.is-sticky #sticky-navigation-bar {
		animation: hdrDrop 0.45s var( --dock-ease ) both;
	}

	/* Sheen that sweeps across the bar every few seconds */
	.psp-hdr-sheen {
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
		z-index: 1;
	}

	.psp-hdr-sheen::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: -40%;
		width: 35%;
		background: linear-gradient( 100deg, transparent, rgba( 255, 214, 107, 0.13 ), transparent );
		transform: skewX( -18deg );
		animation: hdrSheen 7s ease-in-out 2s infinite;
	}

	/* Reading-progress line along the bottom of the stuck bar */
	.psp-hdr-progress {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background: linear-gradient( 90deg, var( --dock-gold ), #ff7a45, #3a86e0 );
		box-shadow: 0 0 10px rgba( 255, 176, 32, 0.6 );
		transform-origin: 0 50%;
		transform: scaleX( var( --psp-scroll, 0 ) );
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
		z-index: 2;
	}

	.sticky-wrapper.is-sticky .psp-hdr-progress {
		opacity: 1;
	}

	/* Menu / search buttons: springy press */
	#masthead .navigation-icons-wrap .navbar-toggler,
	#masthead .navigation-icons-wrap .search-toggle {
		transition: transform 0.3s var( --dock-spring ), box-shadow 0.3s ease;
	}

	#masthead .navigation-icons-wrap .navbar-toggler:active,
	#masthead .navigation-icons-wrap .search-toggle:active {
		transform: scale( 0.88 );
	}

	.sticky-wrapper.is-sticky #masthead .navigation-icons-wrap .search-toggle,
	.sticky-wrapper.is-sticky .navigation-icons-wrap .search-toggle {
		box-shadow: 0 0 0 1px rgba( 255, 176, 32, 0.35 ), 0 0 14px rgba( 255, 176, 32, 0.25 );
	}

	@keyframes hdrDrop {
		from { transform: translateY( -100% ); }
		to { transform: none; }
	}

	@keyframes hdrSheen {
		0% { left: -40%; }
		35%, 100% { left: 130%; }
	}

	/* =================================================================
	 * 6. Room for the dock
	 * ============================================================== */

	body.has-psp-dock {
		padding-bottom: calc( var( --dock-h ) + env( safe-area-inset-bottom, 0px ) );
	}

	body.has-psp-dock .back-to-top {
		bottom: calc( var( --dock-h ) + 14px + env( safe-area-inset-bottom, 0px ) ) !important;
	}

	/* The Chat tab replaces the floating "Chat now" button on small screens */
	body.has-psp-dock .cricket-chat-fab {
		display: none !important;
	}

	body.has-psp-dock .proace-toast {
		bottom: calc( var( --dock-h ) + 16px + env( safe-area-inset-bottom, 0px ) );
	}

	body.has-psp-dock .proace-ask {
		bottom: calc( var( --dock-h ) + 12px + env( safe-area-inset-bottom, 0px ) );
	}

	body.has-psp-dock .cricket-toast {
		bottom: calc( var( --dock-h ) + 16px + env( safe-area-inset-bottom, 0px ) );
	}

	/* "Ads section — go to comments" pill docks above the dock */
	body.has-psp-dock .cricket-ads-hint--dock {
		bottom: calc( var( --dock-h ) + 12px + env( safe-area-inset-bottom, 0px ) );
	}

	/* =================================================================
	 * 7. Homepage "Today's predictions" strip
	 * ============================================================== */

	.cricket-today-strip,
	.cricket-today-strip:visited {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		width: calc( 100% - 30px );
		flex: 0 0 calc( 100% - 30px );
		margin: 6px 15px 18px;
		padding: 14px 16px;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 14px;
		background: var( --dock-gold );
		color: var( --dock-navy );
		text-decoration: none !important;
		box-shadow: 0 10px 28px rgba( 255, 176, 32, 0.25 );
		animation: dockItemIn 0.6s var( --dock-spring ) 0.3s both;
		transition: transform 0.25s var( --dock-spring );
	}

	.cricket-today-strip:hover,
	.cricket-today-strip:focus {
		color: var( --dock-navy );
	}

	.cricket-today-strip:active {
		transform: scale( 0.98 );
	}

	.cricket-today-strip::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: -40%;
		width: 30%;
		background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, 0.55 ), transparent );
		transform: skewX( -18deg );
		animation: hdrSheen 5s ease-in-out 1.5s infinite;
		pointer-events: none;
	}

	.cricket-today-strip__icon {
		flex: 0 0 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var( --dock-navy );
		color: var( --dock-gold );
	}

	.cricket-today-strip__text {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.cricket-today-strip__text strong {
		font: 800 16px/1.2 'Outfit', sans-serif;
	}

	.cricket-today-strip__text span {
		overflow: hidden;
		font: 400 13px/1.3 'PT Sans', sans-serif;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.cricket-today-strip__go {
		flex: 0 0 auto;
		animation: stripNudge 2.2s ease-in-out infinite;
	}

	@keyframes stripNudge {
		0%, 100% { transform: translateX( 0 ); }
		50% { transform: translateX( 4px ); }
	}
}

/* =====================================================================
 * 8. Light mode
 * ================================================================== */

html[data-theme="light"] {
	--dock-bg: rgba( 255, 255, 255, 0.96 );
	--dock-solid: #ffffff;
	--dock-line: rgba( 19, 33, 59, 0.1 );
	--dock-shadow: rgba( 19, 33, 59, 0.1 );
	--dock-idle: #56657d;
	--dock-on: #a15c00;
}

@media ( max-width: 991px ) {
	html[data-theme="light"] .cricket-dock__link:hover,
	html[data-theme="light"] .cricket-dock__link:focus {
		color: #13213b;
	}

	html[data-theme="light"] .cricket-dock.has-open .cricket-dock__link--pred:not( .is-active ) {
		color: #a15c00;
	}

	html[data-theme="light"] .cricket-dock__link::before {
		background: #e59a00;
	}
}

/* =====================================================================
 * 9. Reduced motion
 * ================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.cricket-dock,
	.cricket-dock::before,
	.cricket-dock__item,
	.cricket-dock__badge,
	.cricket-dock__ping,
	.cricket-dock__icon,
	.cricket-dock__tip,
	.cricket-dock__tip.is-on,
	.cricket-dock.is-live .cricket-dock__live,
	.cricket-today-strip,
	.cricket-today-strip::after,
	.cricket-today-strip__go,
	.psp-hdr-sheen::before,
	.sticky-wrapper.is-sticky #sticky-navigation-bar {
		animation: none !important;
	}

	.cricket-dock::before,
	.psp-hdr-sheen,
	.cricket-dock__ripple {
		display: none;
	}
}