#homePage
{
	padding:0 50px 50px;
	position:relative;
}

#homePage #divGameFilters
{
    margin-top:10px;
}

#homePage #divRecentWins
{
	margin-bottom:10px;
}

#homePage #divLobbyGames, #homePage #divSlotGames, #homePage #divLiveDealerGames, #homePage #divTabFilterGames
{
    display:none;
    position:relative;
}

#homePage #divLobbyGames.show, #homePage #divSlotGames.show, #homePage #divLiveDealerGames.show, #homePage #divTabFilterGames.show
{
    display:block;
}

#homePage #divLobbyGames.loading
{
	min-height:400px;
}

#homePage #divLobbyGames.loading::after
{
	animation:homeSpin 0.8s linear infinite;
	border:3px solid rgba(255, 255, 255, 0.1);
	border-radius:50%;
	border-top-color:#cffdff;
	content:"";
	height:40px;
	left:50%;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	width:40px;
}

@keyframes homeSpin
{
	to { transform:translate(-50%, -50%) rotate(360deg); }
}

/* PROMOTION SECTION */
#homePage .divPromotionSection
{
	background-image:url('../../images/banners/home.webp?v=1');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	display:none;
	padding:0px 0px 37% 0px;
	position:relative;
}

#homePage.showPromotion .divPromotionSection
{
	display:block;
}

#homePage #btnJoinNow
{
	left:50%;
	position:absolute;
	top:70%;
	transform:translate(-50%, -50%);
	width:300px;
}

#homePage .divProviderStrip
{
	margin-bottom:10px;
}

/* TAB FILTER SECTION */
#homePage #txtSearchGames
{
	position:absolute;
	right:0;
	top:-10px;
	width:280px;
	z-index:1;
}

#homePage #divFilterGames
{
	margin-top:20px;
}

/* WINS AND CONTENT */
#homePage #divWinsFeed
{
	margin-top:30px;
}

#homePage #divReadMoreSection
{
	border-top:1px solid #555555;
    height:72px;
    margin-top:50px;
	overflow:hidden;
    padding-top:20px;
	position:relative;
	text-align:center;
}

#homePage #divReadMoreSection.show
{
	height:auto;
}

#homePage #btnReadMore
{
	left:50%;
	margin:30px 0;
	position:relative;
	transform:translateX(-50%);
}

#homePage #btnReadMore:before
{
    content:"Read More";
}

#homePage #btnReadMore.show:before
{
    content:"Read Less";
}

/* MEDIA QUERIES */
@media (max-width: 1200px)
{
	#homePage
	{
		padding:0 30px 50px;
	}
}

@media (max-width: 800px)
{
	#homePage
	{
		padding:0 20px 50px;
	}

	#homePage #divRecentWins
	{
		margin-bottom:0px;
	}

	#homePage #btnJoinNow
	{
		width:180px;
	}

	#homePage #btnJoinNow .magicButton
	{
		height:40px;
		line-height:40px;
	}

	/* TAB FILTER SECTION */
	#homePage #divFilterGames
	{
		margin-top:10px;
	}
}

@media (max-width: 600px)
{
	#homePage
	{
		padding:0 15px 50px;
	}

	#homePage #divGameFilters
	{
		margin-top:5px;
	}

	#homePage #btnJoinNow
	{
		width:160px;
	}

	#homePage #btnJoinNow .magicButton
	{
		height:36px;
		line-height:36px;
	}

	/* TAB FILTER SECTION */
	#homePage #txtSearchGames
	{
		top:0;
		width:200px;
	}

	#homePage #txtSearchGames .searchInput
	{
		height:40px;
		line-height:40px;
	}

	#homePage #txtSearchGames .btnSearchInput
	{
		height:36px;
		width:36px;
	}

	#homePage #txtSearchGames .txtSearchInput
	{
		left:55px;
	}

	#homePage #divFilterGames
	{
		margin-top:5px;
	}

	/* WINS AND CONTENT */
	#homePage #divWinsFeed
	{
		margin-top:10px;
	}
}

@media (max-width: 420px)
{
	/* TAB FILTER SECTION */
	#homePage #txtSearchGames
	{
		width:180px;
	}

	#homePage #divFilterGames
	{
		margin-top:0;
	}
}

@media (max-width: 380px)
{
	#homePage #txtSearchGames
	{
		width:160px;
	}
}

/* ---------------------------------------------------------------- Lucky Fruits intro */

/*
	The Lucky Fruits teaser, shown once per browser on the home page. Its markup is built by
	home.js only when it is going to be shown, so a player who has dismissed it pays for these
	rules and nothing else - no elements, no images.

	The block below the next banner is the Lucky Fruits logo scene, copied from the "header"
	section of pages/scratchCards/scratchCards.css with its selectors rescoped and its image paths
	pointed back at that page's folder. It is geometry only; the prose that explains it stays with
	the original, which is still the page header and is still the copy to edit first. Everything in
	it is a percentage of a 1992x1028 box, so the whole scene is one drawing at any size - that is
	why it can be lifted into a popup this way, and why the two copies cannot drift in layout
	without one of them being visibly wrong.
*/

/* ---------------------------------------------------------------- intro: the logo scene */

/*
	The lockup, and the space under it.

	"Reveal your Lucky Fruits!" used to sit here and it was saying twice what the artwork above it
	already says once - the logo reads SCRATCH & WIN, in letters four times the size. With it gone
	the gap it left goes too: this is now the only thing setting the distance from the artwork to
	the first thing the player has to read, and 20px is close enough that the two belong together.
*/
#homePage .divIntroHeader
{
	margin-bottom:30px;
	padding:10px 0px 0px 0px;
	text-align:center;
}

#homePage .divIntroHeader h2
{
	aspect-ratio:1992 / 1028;
	margin:0px auto;
	max-width:560px;
	position:relative;
	width:100%;
}

#homePage .divIntroHeader h2 span
{
	clip-path:inset(50%);
	height:1px;
	overflow:hidden;
	position:absolute;
	white-space:nowrap;
	width:1px;
}

#homePage .iHeaderScene
{
	bottom:0px;
	display:block;
	left:0px;
	position:absolute;
	right:0px;
	top:0px;
	transform-origin:50% 50%;
}

#homePage .iHeaderPiece
{
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	display:block;
	position:absolute;
	transform-origin:50% 50%;
	will-change:transform;
}

#homePage .iHeaderPiece.wordmark
{
	background-image:url('../scratchCards/images/header/wordmark.webp?v=1');
	height:54.183%;
	left:19.578%;
	top:16.148%;
	width:66.064%;
}

#homePage .iHeaderPiece.subtext
{
	background-image:url('../scratchCards/images/header/subtext.webp?v=1');
	height:25.389%;
	left:7.371%;
	top:74.611%;
	width:92.369%;
}

#homePage .iHeaderPiece.grapes
{
	background-image:url('../scratchCards/images/header/grapes.webp?v=1');
	height:27.918%;
	left:2.010%;
	top:14.650%;
	width:12.349%;
}

#homePage .iHeaderPiece.watermelon
{
	background-image:url('../scratchCards/images/header/watermelon.webp?v=1');
	height:21.887%;
	left:13.300%;
	top:17.980%;
	width:11.596%;
}

#homePage .iHeaderPiece.cherriesLeft
{
	background-image:url('../scratchCards/images/header/cherriesLeft.webp?v=1');
	height:37.354%;
	left:-2.500%;
	top:35.960%;
	width:16.968%;
}

#homePage .iHeaderPiece.cherriesRight
{
	background-image:url('../scratchCards/images/header/cherriesRight.webp?v=1');
	height:33.852%;
	left:80.550%;
	top:0.000%;
	width:12.450%;
}

#homePage .iHeaderPiece.strawberry
{
	background-image:url('../scratchCards/images/header/strawberry.webp?v=1');
	height:13.911%;
	left:12.450%;
	top:40.000%;
	width:6.526%;
}

#homePage .iHeaderPiece.orange
{
	background-image:url('../scratchCards/images/header/orange.webp?v=1');
	height:25.097%;
	left:85.380%;
	top:35.490%;
	width:12.952%;
}

#homePage .iHeaderPiece.banana
{
	background-image:url('../scratchCards/images/header/banana.webp?v=1');
	height:25.195%;
	left:88.600%;
	top:47.940%;
	width:13.755%;
}

#homePage .iHeaderPiece.star
{
	background-image:url('../scratchCards/images/header/star.webp?v=1');
	height:13.911%;
	left:18.860%;
	top:0.900%;
	width:6.727%;
}

#homePage .iHeaderPiece.coinRight
{
	background-image:url('../scratchCards/images/header/coinRight.webp?v=1');
	height:12.354%;
	left:94.500%;
	top:13.000%;
	width:7.380%;
}

#homePage .iHeaderPiece.coinLeft
{
	background-image:url('../scratchCards/images/header/coinLeft.webp?v=1');
	height:17.802%;
	left:8.580%;
	top:56.510%;
	width:8.685%;
}

#homePage .iHeaderPiece.fleck
{
	background-image:url('../scratchCards/images/header/flecks.webp?v=1');
	background-size:300% 300%;
	height:7.782%;
	width:4.016%;
}

#homePage .iHeaderPiece.fleck1 { background-position:0% 0%; left:28.170%; top:0.850%; }
#homePage .iHeaderPiece.fleck2 { background-position:50% 0%; left:16.240%; top:9.970%; }
#homePage .iHeaderPiece.fleck3 { background-position:100% 0%; left:7.290%; top:41.520%; }
#homePage .iHeaderPiece.fleck4 { background-position:0% 50%; left:91.120%; top:24.350%; }
#homePage .iHeaderPiece.fleck5 { background-position:50% 50%; left:81.730%; top:32.650%; }
#homePage .iHeaderPiece.fleck6 { background-position:100% 50%; left:96.500%; top:30.750%; }
#homePage .iHeaderPiece.fleck7 { background-position:0% 100%; left:86.980%; top:66.010%; }

@keyframes headerDriftA
{
	0% { transform:translate(0%, 0%) rotate(0deg); }
	35% { transform:translate(3.6%, -8.5%) rotate(3.2deg); }
	70% { transform:translate(-2.2%, -3.6%) rotate(-2deg); }
	100% { transform:translate(0%, 0%) rotate(0deg); }
}

@keyframes headerDriftB
{
	0% { transform:translate(0%, 0%) rotate(0deg); }
	33% { transform:translate(-4.3%, 6.4%) rotate(-3.7deg); }
	66% { transform:translate(2.2%, -4.3%) rotate(1.8deg); }
	100% { transform:translate(0%, 0%) rotate(0deg); }
}

@keyframes headerDriftC
{
	0% { transform:translate(0%, 0%) rotate(0deg); }
	30% { transform:translate(4.3%, 5%) rotate(-2.6deg); }
	65% { transform:translate(-3.6%, -7.2%) rotate(2.9deg); }
	100% { transform:translate(0%, 0%) rotate(0deg); }
}

@keyframes headerFleckDrift
{
	0% { transform:translate(0%, 0%) rotate(0deg); }
	30% { transform:translate(13%, -20%) rotate(13deg); }
	65% { transform:translate(-10%, 14%) rotate(-10deg); }
	100% { transform:translate(0%, 0%) rotate(0deg); }
}

#homePage .iHeaderPiece
{
	animation-duration:5.1s;
	animation-iteration-count:infinite;
	animation-name:headerDriftA;
	animation-timing-function:ease-in-out;
}

#homePage .iHeaderPiece.grapes { animation-delay:-0.8s; animation-duration:5.3s; }
#homePage .iHeaderPiece.watermelon { animation-delay:-2.4s; animation-duration:4.6s; animation-name:headerDriftC; }
#homePage .iHeaderPiece.cherriesLeft { animation-delay:-1.2s; animation-duration:5.9s; animation-name:headerDriftB; }
#homePage .iHeaderPiece.cherriesRight { animation-delay:-3.6s; animation-duration:5.6s; animation-name:headerDriftC; }
#homePage .iHeaderPiece.strawberry { animation-delay:-2.9s; animation-duration:4.3s; }
#homePage .iHeaderPiece.orange { animation-delay:-0.4s; animation-duration:4.9s; animation-name:headerDriftB; }
#homePage .iHeaderPiece.banana { animation-delay:-4.2s; animation-duration:6.3s; animation-name:headerDriftC; }
#homePage .iHeaderPiece.star { animation-delay:-1.7s; animation-duration:3.8s; }
#homePage .iHeaderPiece.coinRight { animation-delay:-3.1s; animation-duration:4.7s; animation-name:headerDriftB; }
#homePage .iHeaderPiece.coinLeft { animation-delay:-2.2s; animation-duration:5.7s; }

#homePage .iHeaderPiece.fleck { animation-name:headerFleckDrift; }
#homePage .iHeaderPiece.fleck1 { animation-delay:-0.3s; animation-duration:3.4s; }
#homePage .iHeaderPiece.fleck2 { animation-delay:-2.1s; animation-duration:4.2s; }
#homePage .iHeaderPiece.fleck3 { animation-delay:-3.4s; animation-duration:2.9s; }
#homePage .iHeaderPiece.fleck4 { animation-delay:-1.5s; animation-duration:4.5s; }
#homePage .iHeaderPiece.fleck5 { animation-delay:-4.0s; animation-duration:3.9s; }
#homePage .iHeaderPiece.fleck6 { animation-delay:-0.9s; animation-duration:3.1s; }
#homePage .iHeaderPiece.fleck7 { animation-delay:-2.7s; animation-duration:4.8s; }

@keyframes headerPulse
{
	from { transform:translateY(0.9%) scale(1) rotate(-0.35deg); }
	to { transform:translateY(-0.9%) scale(1.034) rotate(0.35deg); }
}

@keyframes headerPulseSubtext
{
	from { transform:translateY(0.7%) scale(1) rotate(0.22deg); }
	to { transform:translateY(-0.7%) scale(1.026) rotate(-0.22deg); }
}

#homePage .iHeaderPiece.wordmark,
#homePage .iHeaderPiece.subtext
{
	animation-direction:alternate;
	animation-name:headerPulse;
}

#homePage .iHeaderPiece.wordmark { animation-duration:3.1s; }
#homePage .iHeaderPiece.subtext { animation-delay:-1.3s; animation-duration:3.7s; animation-name:headerPulseSubtext; }

@keyframes headerBungeeIn
{
	0% { animation-timing-function:cubic-bezier(0.5, 0, 0.85, 0.4); transform:translateY(-26%) scale(0.52) rotate(-4deg); }
	34% { transform:translateY(4.5%) scale(1.075) rotate(1.8deg); }
	49% { transform:translateY(-2.8%) scale(0.972) rotate(-1.1deg); }
	63% { transform:translateY(2%) scale(1.032) rotate(0.65deg); }
	76% { transform:translateY(-1%) scale(0.989) rotate(-0.4deg); }
	87% { transform:translateY(1.1%) scale(1.012) rotate(0.2deg); }
	94% { transform:translateY(-0.3%) scale(0.996) rotate(-0.1deg); }
	100% { transform:translateY(0%) scale(1) rotate(0deg); }
}

@keyframes headerBungeeFade
{
	from { opacity:0; }
	to { opacity:1; }
}

#homePage .iHeaderScene
{
	animation:headerBungeeIn 1.25s ease-in-out,
	          headerBungeeFade 0.3s ease-out;
}

@keyframes headerSubtextRollIn
{
	0% { animation-timing-function:cubic-bezier(0.32, 0, 0.6, 0.42); transform:perspective(520px) translateY(-26%) rotateX(-90deg) scale(0.95); }
	46% { transform:perspective(520px) translateY(3.6%) rotateX(22deg) scale(1.03); }
	64% { transform:perspective(520px) translateY(-1.8%) rotateX(-9deg) scale(0.99); }
	79% { transform:perspective(520px) translateY(1.6%) rotateX(4.5deg) scale(1.008); }
	90% { transform:perspective(520px) translateY(-0.4%) rotateX(-2deg) scale(0.997); }
	100% { transform:perspective(520px) translateY(0.7%) rotateX(0deg) scale(1) rotate(0.22deg); }
}

#homePage .divIntroHeader .iHeaderPiece.subtext
{
	animation:headerSubtextRollIn 0.78s ease-in-out 0.95s both,
	          headerBungeeFade 0.24s ease-out 0.95s both,
	          headerPulseSubtext 3.7s ease-in-out 1.73s infinite alternate;
}

@keyframes subtextSheen
{
	0% { background-position:110% 0%; }
	23%, 100% { background-position:-10% 0%; }
}

#homePage .iHeaderPiece.subtext:after
{
	-webkit-mask-image:url('../scratchCards/images/header/subtext.webp?v=1');
	-webkit-mask-position:center center;
	-webkit-mask-repeat:no-repeat;
	-webkit-mask-size:100% 100%;
	background-image:linear-gradient(105deg, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0) 54%);
	background-position:110% 0%;
	background-repeat:no-repeat;
	background-size:220% 100%;
	bottom:0px;
	content:"";
	left:0px;
	mask-image:url('../scratchCards/images/header/subtext.webp?v=1');
	mask-position:center center;
	mask-repeat:no-repeat;
	mask-size:100% 100%;
	pointer-events:none;
	position:absolute;
	right:0px;
	top:0px;
}

#homePage .iHeaderPiece.subtext.sheen:after
{
	animation:subtextSheen 4s ease-in-out 1.5s infinite;
}

@media (prefers-reduced-motion:reduce)
{
	#homePage .iHeaderScene,
	#homePage .iHeaderPiece,
	#homePage .iHeaderPiece.subtext:after,
	#homePage .iHeaderPiece.subtext.sheen:after,
	#homePage .iHeaderPiece.wordmark,
	#homePage .divIntroHeader .iHeaderPiece.subtext
	{
		animation:none;
	}

		#homePage .iHeaderPiece.subtext:after
	{
		background-position:110% 0%;
	}
}

#homePage #btnMuteMusic, #homePage #btnInfo
{
	color:#edc967;
	cursor:pointer;
	filter:drop-shadow(0px 0px 5px #000000) drop-shadow(0px 0px 5px #000000) drop-shadow(0px 0px 1px #000000);
	font-size:20px;
	height:40px;
	line-height:40px;
	position:absolute;
	right:40px;
	text-align:center;
	top:6px;
	transition:color 0.25s;
	width:40px;
	z-index:2;
}

#homePage #btnInfo
{
	right:82px;
}

#homePage #btnMuteMusic.muted
{
	color:#888888;
}

#homePage #btnMuteMusic:hover, #homePage #btnMuteMusic:focus,
#homePage #btnInfo:hover, #homePage #btnInfo:focus
{
	color:#ffffff;
}

/* ---------------------------------------------------------------- intro: the popup */

/*
	The intro popup, shown once per browser before the page is played.

	It sits above the info popup (25), the opened card (20) and that card's overlay (19). Nothing
	else can be open behind it: it is shown before the cards are dealt and it is removed from the
	DOM the moment it closes, so the stack below it is never reachable while it is up.

	Unlike #divScratchCardsInfo the layer is NOT a click-away target. The panel fills most of the
	screen, the strip of dimmer around it is a few pixels at some widths, and a stray tap there
	would take the explanation away before it was read. The two deliberate exits are the button at
	the foot of the panel and the X, plus Escape on a keyboard.

	align-items:flex-start with an auto-margined panel, rather than center: on a short viewport the
	panel is taller than the layer, and a centred flex child overflows equally in both directions -
	the top of it, which is where the explanation starts, goes off screen and cannot be scrolled
	back to. Pushed from the top it can only ever overflow downwards, into the scroll.
*/
#homePage #divLuckyFruitsIntro
{
	align-items:flex-start;
	background-color:rgba(4, 2, 20, 0.88);
	bottom:0px;
	display:none;
	justify-content:center;
	left:0px;
	overflow-y:auto;
	padding:20px;
	position:fixed;
	right:0px;
	top:0px;
	z-index:30;
}

/*
	The panel wears the Scratch Cards backdrop, so the popup looks like the page it is the front door
	to. The layer behind it stays a plain dimmer - the home page is still there, this is a popup over
	it and not a takeover.

	The *portrait* crop of that backdrop, at every width, which is the part worth knowing. The
	landscape file is a wide scene whose neon rails run down the left and right edges of the screen:
	cropped to a 560px panel it shows only the dark middle and reads as a black card. The mobile
	crop is the same artwork composed for a tall box, so at panel proportions the rails land at the
	panel's own edges and the dark centre falls where the text goes - which is the composition this
	needs, whatever size screen it is on.

	The wash over it is light. The centre of the artwork is nearly black already; this is only for
	the two columns of neon the panel's edges pick up, so a line of copy that reaches them stays
	readable.
*/
#homePage #divLuckyFruitsIntroPopup
{
	background-color:#020226;
	background-image:linear-gradient(rgba(6, 3, 28, 0.35), rgba(6, 3, 28, 0.35)), url('../scratchCards/images/backgroundMobile.webp');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover, cover;
	border:1px solid rgba(148, 80, 236, 0.55);
	border-radius:18px;
	box-shadow:0px 0px 40px rgba(0, 0, 0, 0.65), 0px 0px 60px rgba(148, 80, 236, 0.18);
	box-sizing:border-box;
	color:#d5c9ea;
	font-size:14px;
	margin:auto;
	max-width:560px;
	padding:30px 34px 34px 34px;
	position:relative;
	width:100%;
}

/*
	display rather than the opacity fade the info popup uses, because this one is in the markup on
	every visit and is only shown on the first. Faded out it would still be painted over the page
	for the frames between the document arriving and the script deciding, which is a flash of a
	popup the returning player has already dismissed.
*/
#homePage #divLuckyFruitsIntro.show
{
	display:flex;
}

#homePage #divLuckyFruitsIntro.show #divLuckyFruitsIntroPopup
{
	animation:introPopupIn 0.3s ease-out both;
}

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

@media (prefers-reduced-motion:reduce)
{
	#homePage #divLuckyFruitsIntro.show #divLuckyFruitsIntroPopup
	{
		animation:none;
	}
}

/* Same control as the info popup's, one size up because this panel is twice the width. */
#homePage #btnCloseLuckyFruitsIntro
{
	background-color:rgba(0, 0, 0, 0.6);
	border:1px solid #b06bff;
	border-radius:50%;
	cursor:pointer;
	height:34px;
	position:absolute;
	right:16px;
	top:16px;
	transition:background-color 0.2s, border-color 0.2s;
	width:34px;
	z-index:2;
}

#homePage #btnCloseLuckyFruitsIntro:hover
{
	background-color:rgba(176, 107, 255, 0.35);
	border-color:#e0c2ff;
}

#homePage #btnCloseLuckyFruitsIntro:before,
#homePage #btnCloseLuckyFruitsIntro:after
{
	background-color:#ffffff;
	content:"";
	height:2px;
	left:50%;
	position:absolute;
	top:50%;
	width:15px;
}

#homePage #btnCloseLuckyFruitsIntro:before
{
	transform:translate(-50%, -50%) rotate(45deg);
}

#homePage #btnCloseLuckyFruitsIntro:after
{
	transform:translate(-50%, -50%) rotate(-45deg);
}

/* ---------------------------------------------------------------- intro: lockup */

#homePage .divIntroHeader
{
	text-align:center;
}

/*
	The page header's scene at a smaller size, and that is the whole rule: the ratio is the scene's
	own bounding box and every piece inside it is placed in percentages of that box, so this is the
	same drawing as #divScratchCardsHeader h1 with one number changed. It is held clear of the close
	button by the panel's padding plus this max-width.
*/
#homePage .divIntroHeader h2
{
	aspect-ratio:1992 / 1028;
	margin:0px auto;
	max-width:330px;
	position:relative;
	width:100%;
}

#homePage .divIntroHeader h2 span
{
	clip-path:inset(50%);
	height:1px;
	overflow:hidden;
	position:absolute;
	white-space:nowrap;
	width:1px;
}

/* ---------------------------------------------------------------- intro: the three steps */

/*
	The three steps are the whole body of the popup.

	It used to carry a sample card beside them and a panel of small print below, and both were
	answering questions nobody had asked yet: a player who has never seen a card learns nothing
	from a picture of one, and the terms of a free game are not what stands between them and
	playing it. The popup asks one question - what is this and what do I do - and now asks only
	that.

	The column is held to a readable measure and centred rather than stretched to the panel:
	three short paragraphs set to 430px read as a list, and set to the full width they read as a
	wall.
*/
#homePage .divIntroSteps
{
	margin:0px auto;
	max-width:430px;
}

#homePage .divIntroSteps h3
{
	color:#ffffff;
	font-size:19px;
	letter-spacing:1px;
	margin:0px 0px 14px 0px;
	text-transform:uppercase;
}

/*
	The three steps. The number is drawn by a counter rather than by the list, so it can carry the
	page purple and sit on the same line as the step's name.

	Each row is icon | text, and the icon column is a fixed width so the three names line up with
	each other whatever the icon inside it is.
*/
#homePage .divIntroSteps ol
{
	counter-reset:introStep;
	list-style:none;
	margin:0px;
	padding:0px;
}

#homePage .divIntroSteps li
{
	counter-increment:introStep;
	display:grid;
	gap:0px 16px;
	grid-template-columns:56px minmax(0, 1fr);
	margin-bottom:22px;
}

#homePage .divIntroSteps li:last-child
{
	margin-bottom:0px;
}

#homePage .divIntroSteps h4
{
	align-self:end;
	color:#e0a8ff;
	font-size:16px;
	letter-spacing:1px;
	margin:0px;
	text-transform:uppercase;
}

#homePage .divIntroSteps h4:before
{
	color:#b06bff;
	content:counter(introStep) ".";
	margin-right:6px;
}

#homePage .divIntroSteps p
{
	color:#d5c9ea;
	line-height:1.45;
	margin:2px 0px 0px 0px;
}

/* The icon spans both text rows, so it is centred against the pair rather than against the name. */
#homePage .iIntroStepIcon
{
	align-self:center;
	border-radius:50%;
	box-sizing:border-box;
	display:block;
	grid-row:1 / 3;
	height:56px;
	position:relative;
	width:56px;
}

/*
	Step 1 is the scratch panel itself - the foil the cards are scratched from, squared off rather
	than round so it reads as a card - with a pointing hand at its corner. It is the same file and
	the same "?v=" as the page's FOIL_IMAGE, so a player who goes on to the game has it cached.

	It is drawn at 160% of the icon rather than fitted to it. Shrinking the whole 512px texture into
	56px left the play marks too small to read as anything but noise; at 160% the icon shows a
	crop of the foil with the marks large enough to make out.
*/
#homePage .iIntroStepIcon.iconScratch
{
	background-image:url('../scratchCards/images/scratchFoil.webp?v=2');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:160% 160%;
	border:1px solid rgba(176, 107, 255, 0.8);
	border-radius:8px;
	box-shadow:0px 0px 14px rgba(176, 107, 255, 0.35);
}

#homePage .iIntroStepIcon.iconScratch:after
{
	bottom:-20px;
	content:"\261D\FE0F";
	font-size:32px;
	line-height:1;
	filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.6));
	position:absolute;
	right:-12px;
	transform:rotate(-60deg);
}

/*
	Step 2 holds a real symbol off the card's own sprite, not a drawing of one. The two rules under
	it are .divSymbolArt from pages/scratchCards/scratchCards.css, cut down to the one fruit this
	popup shows - the sheet is 3x2 and the cherry is its top left cell.
*/
#homePage .divSymbolArt
{
	background-image:url('../scratchCards/images/fruits.webp?v=1');
	background-repeat:no-repeat;
	background-size:300% 200%;
	bottom:8%;
	left:8%;
	position:absolute;
	right:8%;
	top:8%;
}

#homePage .divSymbolArt.cherry
{
	background-position:0% 0%;
}

#homePage .iIntroStepIcon.iconMatch
{
	background-color:rgba(176, 107, 255, 0.12);
	border:1px solid rgba(176, 107, 255, 0.8);
	box-shadow:0px 0px 14px rgba(176, 107, 255, 0.35);
}

/*
	Step 3 carries a coin off the page's own header artwork.

	It was an emoji, and an emoji is whatever the device decides it is: the money bag Apple draws is
	not the one Android draws, neither is round, and inside a thin gold ring an off-centre lumpy
	shape reads as a ring that has been knocked askew. This is a drawn gold coin, the same one that
	drifts past the logo above, and it is the same picture on every device - which is the whole
	argument for using the artwork that already exists rather than borrowing a glyph.
*/
#homePage .iIntroStepIcon.iconWin
{
	background-color:rgba(237, 201, 103, 0.12);
	border:1px solid rgba(237, 201, 103, 0.8);
	box-shadow:0px 0px 14px rgba(237, 201, 103, 0.3);
}

#homePage .iIntroCoin
{
	background-image:url('../scratchCards/images/header/coinLeft.webp?v=1');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	bottom:16%;
	display:block;
	left:16%;
	position:absolute;
	right:16%;
	top:16%;
}

/* ---------------------------------------------------------------- intro: call to action */

/*
	The button the popup exists to be tapped on. It is deliberately the largest thing in the panel:
	on a browser that blocks autoplay this tap is what starts the music and the voice-over, so the
	outcome to design against is a player who leaves from the X in the corner without noticing it.

	Deep purple with white on it rather than the gold-on-violet it wore. Gold lettering belongs to
	the artwork above - the logo owns that colour here - and repeating it on the button made the two
	compete. A darker field is also the one thing that can hold weight against a lockup this bright:
	the button has to be read after the logo, not alongside it.
*/
#homePage #btnStartScratching
{
	background-image:linear-gradient(180deg, #4a1a9e 0%, #2a0d5e 100%);
	border-radius:12px;
	box-shadow:0px 0px 24px rgba(176, 107, 255, 0.4), inset 0px 0px 18px rgba(176, 107, 255, 0.25);

	/* the cap is the button's whole width, padding included, rather than the text box inside it */
	box-sizing:border-box;
	color:#ffd97a;
	cursor:pointer;
	font-size:23px;
	font-weight:700;
	isolation:isolate;
	letter-spacing:2px;

	/* Held short of the panel and centred in what is left, rather than running its full width. */
	margin:40px auto 0px auto;
	max-width:330px;

	padding:16px 20px;
	position:relative;
	text-align:center;
	text-transform:uppercase;
	transition:transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	user-select:none;
}

/*
	The lettering takes the logo's gradient - the yellow into orange that "FRUITS" is painted in -
	rather than the flat white it wore. The two are the only warm things on the panel and they now
	rhyme.

	It is on a span rather than on the button because background-clip:text paints the element's own
	background into its glyphs, and the button's background is the purple field. The span has no
	background of its own to lose.

	The drop-shadow does the job text-shadow would: text-shadow draws under the text, and under text
	that has been turned transparent there is nothing to draw under. A filter works on what was
	actually painted.

	color is set on the button as well, in the same family, for anything that does not do
	background-clip - it inherits and the gradient simply never arrives.
*/
#homePage #btnStartScratching span
{
	background-image:linear-gradient(180deg, #fff0b0 0%, #ffc42e 42%, #ff8a15 76%, #f4611a 100%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	filter:drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.55));
}

/*
	The moving stroke, the same build as the Sport Predictor's "Make your picks" button
	(public/css/soccerPredictor.css, #btnMakeYourPicks::before): a conic gradient turned by an
	animated angle, masked down to a ring so only the border shows. The gold there is a gold and
	violet mix; this one is gold into orange, because on this button the violet would be the button.

	Two things carry it. --luckyCtaAngle is registered with @property, which is what makes an angle
	animatable at all - a plain custom property is a string to the animation engine and jumps from
	one value to the next. And the ring is a mask-composite cut-out rather than a border: a border
	cannot hold a gradient, so the pseudo-element is filled edge to edge and everything but its
	padding band is masked away.

	It replaces the solid gold border rather than sitting inside one. Two rings a pixel apart read
	as a mistake.
*/
@property --luckyCtaAngle
{
	syntax:'<angle>';
	initial-value:0deg;
	inherits:false;
}

@keyframes luckyCtaStrokeSpin
{
	to { --luckyCtaAngle:360deg; }
}

@keyframes luckyCtaStrokeGlow
{
	0% { opacity:0.85; }
	50% { opacity:1; }
	100% { opacity:0.85; }
}

#homePage #btnStartScratching:before
{
	animation:luckyCtaStrokeSpin 1.5s linear infinite, luckyCtaStrokeGlow 1.4s ease-in-out infinite;
	background:conic-gradient(from var(--luckyCtaAngle), #ffeaa7 0%, #f7a41d 18%, #ff6f0f 40%, #f7a41d 62%, #ffeaa7 100%);
	border-radius:12px;
	content:"";
	inset:-1px;
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask-composite:exclude;
	padding:3px;
	pointer-events:none;
	position:absolute;
}

/* Turned off rather than left spinning, and the ring stays - it is the button's edge. */
@media (prefers-reduced-motion:reduce)
{
	#homePage #btnStartScratching:before
	{
		animation:none;
	}
}

#homePage #btnStartScratching:hover,
#homePage #btnStartScratching:focus
{
	box-shadow:0px 0px 34px rgba(176, 107, 255, 0.65), inset 0px 0px 22px rgba(176, 107, 255, 0.5);
	transform:scale(1.02);
}

#homePage #btnStartScratching:active
{
	transform:scale(0.99);
}

@media (max-width:800px)
{
	#homePage #divLuckyFruitsIntroPopup
	{
		padding:26px 24px 28px 24px;
	}

	#homePage .divIntroHeader h2
	{
		max-width:300px;
	}
}

@media (max-width:600px)
{
	/*
		A phone. The icon column and the type come down a step together so the proportion between
		them holds, and the panel keeps a real gutter rather than running to the screen edges.
	*/
	#homePage #divLuckyFruitsIntroPopup
	{
		padding:22px 18px 24px 18px;
	}

	#homePage .divIntroHeader h2
	{
		max-width:230px;
	}

	#homePage .divIntroHeader
	{
		margin-bottom:24px;
	}

	#homePage .divIntroSteps h3
	{
		font-size:17px;
		margin-bottom:16px;
	}

	#homePage .divIntroSteps li
	{
		gap:0px 13px;
		grid-template-columns:46px minmax(0, 1fr);
		margin-bottom:18px;
	}

	#homePage .divIntroSteps h4
	{
		font-size:15px;
	}

	#homePage .iIntroStepIcon
	{
		height:46px;
		width:46px;
	}

	#homePage #btnStartScratching
	{
		font-size:19px;
		letter-spacing:1px;
		margin-top:32px;
		padding:14px 16px;
	}
}