/**
 * Mobile side menu (2026-10-03) — inc/psp-mobile-drawer.php, js/cricket-drawer.js.
 * Phones and tablets only (≤991px). Motion is transform/opacity only, no
 * blur, so it opens instantly even on low-end phones.
 */

.psp-drawer {
	--pd-bg: #0b1b33;
	--pd-bg-2: #08142a;
	--pd-line: rgba( 255, 255, 255, 0.08 );
	--pd-text: #eaf4ff;
	--pd-muted: rgba( 234, 244, 255, 0.6 );
	--pd-row: rgba( 255, 255, 255, 0.04 );
	--pd-row-hover: rgba( 255, 176, 32, 0.12 );
	--pd-gold: #ffb020;
	--pd-gold-2: #ffd66b;
	--pd-ink: #1a1200;
	--pd-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
	display: none;
}

@media ( max-width: 991px ) {
	/* The old in-header drop-down never opens on phones now. */
	#masthead #navbarCollapse {
		display: none !important;
	}

	.psp-drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100050; /* Above the header, the dock and the chat button. */
		pointer-events: none;
	}

	.psp-drawer[hidden] {
		display: none;
	}

	.psp-drawer__scrim {
		position: absolute;
		inset: 0;
		background: rgba( 2, 8, 20, 0.6 );
		opacity: 0;
		transition: opacity 0.22s ease;
	}

	.psp-drawer__panel {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: min( 84vw, 340px );
		height: 100%;
		height: 100dvh;
		padding: max( 12px, env( safe-area-inset-top ) ) 14px max( 14px, env( safe-area-inset-bottom ) );
		overflow-y: auto;
		overscroll-behavior: contain;
		background:
			radial-gradient( 120% 40% at 0% 0%, rgba( 255, 176, 32, 0.12 ), transparent 60% ),
			linear-gradient( 180deg, var( --pd-bg ), var( --pd-bg-2 ) );
		box-shadow: 1px 0 0 var( --pd-line ), 24px 0 48px -24px rgba( 0, 0, 0, 0.8 );
		color: var( --pd-text );
		font-family: 'Outfit', 'PT Sans', sans-serif;
		transform: translate3d( -102%, 0, 0 );
		transition: transform 0.24s var( --pd-ease );
		outline: none;
	}

	.psp-drawer.is-open {
		pointer-events: auto;
	}

	.psp-drawer.is-open .psp-drawer__scrim {
		opacity: 1;
	}

	.psp-drawer.is-open .psp-drawer__panel {
		transform: translate3d( 0, 0, 0 );
	}

	html.psp-drawer-open,
	html.psp-drawer-open body {
		overflow: hidden;
	}

	/* Head: brand + close */
	.psp-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 2px 2px 12px;
	}

	.psp-drawer__brand {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.psp-drawer__logo {
		width: auto;
		max-width: 150px;
		height: 40px;
		object-fit: contain;
		padding: 4px 8px;
		border-radius: 10px;
		background: #fff;
	}

	.psp-drawer__name {
		font-size: 18px;
		font-weight: 800;
		color: var( --pd-text );
	}

	.psp-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: var( --pd-row );
		color: var( --pd-text );
		box-shadow: inset 0 0 0 1px var( --pd-line );
		cursor: pointer;
	}

	.psp-drawer__close svg {
		width: 20px;
		height: 20px;
	}

	.psp-drawer__close:active {
		transform: scale( 0.94 );
	}

	/* Account */
	.psp-drawer__me {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px;
		padding: 10px 12px;
		border-radius: 14px;
		background: rgba( 255, 176, 32, 0.08 );
		box-shadow: inset 0 0 0 1px rgba( 255, 176, 32, 0.3 );
		color: var( --pd-text );
		text-decoration: none;
	}

	.psp-drawer__avatar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: linear-gradient( 135deg, var( --pd-gold-2 ), var( --pd-gold ) );
		color: var( --pd-ink );
		font-size: 14px;
		font-weight: 800;
	}

	.psp-drawer__me-text {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-width: 0;
		line-height: 1.2;
	}

	.psp-drawer__me-text strong {
		color: var( --pd-text );
		overflow: hidden;
		font-size: 15.5px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.psp-drawer__me-text small {
		font-size: 12px;
		color: var( --pd-gold-2 );
	}

	.psp-drawer__chev {
		flex: none;
		width: 16px;
		height: 16px;
		opacity: 0.6;
	}

	.psp-drawer__auth {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		margin-bottom: 12px;
	}

	.psp-drawer__btn,
	.psp-drawer__btn:visited {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		border-radius: 12px;
		box-shadow: inset 0 0 0 1px rgba( 255, 214, 107, 0.45 );
		color: var( --pd-gold-2 );
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
	}

	.psp-drawer__btn--gold,
	.psp-drawer__btn--gold:visited {
		background: linear-gradient( 90deg, var( --pd-gold-2 ), var( --pd-gold ) );
		box-shadow: none;
		color: var( --pd-ink );
	}

	/* Links */
	.psp-drawer__list {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.psp-drawer__list li {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.psp-drawer__link,
	.psp-drawer__link:visited {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 46px;
		padding: 0 12px;
		border-radius: 12px;
		color: var( --pd-text );
		font-size: 16px;
		font-weight: 600;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.15s ease;
	}

	.psp-drawer__link:hover,
	.psp-drawer__link:focus-visible,
	.psp-drawer__link:active {
		background: var( --pd-row-hover );
	}

	.psp-drawer__ico {
		flex: none;
		width: 20px;
		height: 20px;
		color: var( --pd-gold );
	}

	.psp-drawer__link.is-current {
		background: linear-gradient( 90deg, var( --pd-gold-2 ), var( --pd-gold ) );
		color: var( --pd-ink );
	}

	.psp-drawer__link.is-current .psp-drawer__ico {
		color: var( --pd-ink );
	}

	.psp-drawer a:focus-visible,
	.psp-drawer button:focus-visible {
		outline: 2px solid var( --pd-gold );
		outline-offset: 2px;
	}

	/* Foot: small links + light/dark */
	.psp-drawer__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-top: auto;
		padding-top: 14px;
		border-top: 1px solid var( --pd-line );
	}

	.psp-drawer__small {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 8px;
		margin: 0;
		font-size: 13px;
		color: var( --pd-muted );
	}

	.psp-drawer__small a,
	.psp-drawer__small a:visited {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
		color: var( --pd-muted );
		text-decoration: none;
	}

	.psp-drawer__small a:hover,
	.psp-drawer__small a[aria-current] {
		color: var( --pd-gold-2 );
	}

	.psp-drawer__mode .cricket-theme-toggle {
		min-height: 36px;
	}

	/* Light mode */
	html[data-theme="light"] .psp-drawer {
		--pd-bg: #ffffff;
		--pd-bg-2: #f4f7fc;
		--pd-line: rgba( 15, 35, 70, 0.1 );
		--pd-text: #12233f;
		--pd-muted: #5b6b85;
		--pd-row: rgba( 15, 35, 70, 0.05 );
		--pd-row-hover: rgba( 255, 176, 32, 0.16 );
		--pd-gold: #c27c00;
		--pd-gold-2: #8a5a00;
	}

	html[data-theme="light"] .psp-drawer__scrim {
		background: rgba( 10, 24, 48, 0.4 );
	}

	html[data-theme="light"] .psp-drawer__logo {
		box-shadow: inset 0 0 0 1px var( --pd-line );
	}

	html[data-theme="light"] .psp-drawer__btn--gold,
	html[data-theme="light"] .psp-drawer__link.is-current,
	html[data-theme="light"] .psp-drawer__avatar {
		background: linear-gradient( 90deg, #ffd66b, #ffb020 );
		color: #1a1200;
	}

	html[data-theme="light"] .psp-drawer__link.is-current .psp-drawer__ico {
		color: #1a1200;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.psp-drawer__panel,
	.psp-drawer__scrim {
		transition: none !important;
	}
}