@font-face {
  font-family: "Poppins";
  src: url("./poppins.regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* =====================================================================
   LEAD COLLECTION SCREEN
   Emirates Islamic brand colours:
     Purple  #461E57  · Teal  #63BFB5  · White  #FFFFFF
   ===================================================================== */

/* ── Root screen ── */
.lead-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  /* rich diagonal gradient background */
  background: linear-gradient(135deg, #2e1240 0%, #461E57 45%, #3a1a4d 100%);
  /* subtle dot-grid overlay */
  background-image:
    radial-gradient(rgba(99,191,181,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #2e1240 0%, #461E57 45%, #3a1a4d 100%);
  background-size: 28px 28px, 100% 100%;
  padding: 1.5rem;
  transition: opacity 0.6s ease, transform 0.6s ease;
  overflow: hidden;
}

.lead-screen--exit {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* ── Animated background cubes ── */
.lead-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-cube { position: absolute; }

.bc1 { width: 100px; top: 6%;  left: 4%;  animation: floatA 7s ease-in-out infinite; }
.bc2 { width: 64px;  top: 70%; left: 2%;  animation: floatB 9s ease-in-out infinite; }
.bc3 { width: 48px;  top: 18%; right: 5%; animation: floatC 6s ease-in-out infinite; }
.bc4 { width: 80px;  top: 60%; right: 3%; animation: floatA 8s 1s ease-in-out infinite; }
.bc5 { width: 36px;  top: 85%; right: 22%;animation: floatB 5s 0.5s ease-in-out infinite; }

@keyframes floatA {
  0%,100% { transform: translateY(0)   rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(6deg); }
}
@keyframes floatB {
  0%,100% { transform: translateY(0)   rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-5deg); }
}
@keyframes floatC {
  0%,100% { transform: translateY(0)   rotate(0deg); }
  50%      { transform: translateY(-22px) rotate(8deg); }
}

/* ── Card shell ── */
.lead-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,191,181,0.2);
}

/* Teal top accent bar */
.lead-card__top {
  height: 5px;
  background: linear-gradient(90deg, #63BFB5 0%, #a8ddd9 50%, #63BFB5 100%);
  background-size: 200% 100%;
  animation: shimmerBar 3s linear infinite;
}
@keyframes shimmerBar {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Card body */
.lead-card__body {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 2.4rem 2.2rem 2rem;
  text-align: center;
}

/* Logo */
.lead-logo {
  width: 200px;
  height: auto;
  margin: 0 auto 1.4rem;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* "PLAY IT & WIN IT" badge */
.lead-badge {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #461E57;
  background: #63BFB5;
  border-radius: 100px;
  padding: 0.28rem 0.9rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.lead-form-title {
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  margin: 0 0 0.3rem;
  letter-spacing: 0.01em;
}

.lead-form-sub {
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0 0 1.8rem;
}

/* ── Fields ── */
.lead-field {
  text-align: left;
  margin-bottom: 0.95rem;
}

.lead-field label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 0.67rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #63BFB5;
  margin-bottom: 0.38rem;
}

/* Input wrapper — icon sits inside */
.lead-input-wrap {
  position: relative;
}

.lead-input-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: rgba(99,191,181,0.7);
  pointer-events: none;
  transition: color 0.2s;
}

.lead-input-wrap:focus-within .lead-input-icon {
  color: #63BFB5;
}

.lead-field input {
  width: 100%;
  padding: 0.78rem 1rem 0.78rem 2.5rem;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  box-sizing: border-box;
}

.lead-field input::placeholder { color: rgba(255,255,255,0.25); }

.lead-field input:focus {
  border-color: #63BFB5;
  background: rgba(99,191,181,0.08);
  box-shadow: 0 0 0 3px rgba(99,191,181,0.18), inset 0 0 0 1px rgba(99,191,181,0.1);
}

.lead-field input.has-error { border-color: #e05252; }

.lead-error {
  display: none;
  font-family: "Poppins", sans-serif;
  font-size: 0.7rem;
  color: #ff8080;
  margin-top: 0.3rem;
  padding-left: 0.2rem;
}

.lead-server-error {
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  color: #ff8080;
  min-height: 1em;
  margin-top: 0.4rem;
  text-align: center;
}

/* ── CTA button ── */
.lead-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  background: #63BFB5;
  border: none;
  border-radius: 10px;
  color: #461E57;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 6px 22px rgba(99,191,181,0.4);
}

/* Shimmer sweep on button */
.lead-btn__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: btnShimmer 2.4s ease-in-out infinite;
}
@keyframes btnShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.lead-btn:hover    { background: #51b0a6; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,191,181,0.5); }
.lead-btn:active   { transform: translateY(0); box-shadow: 0 3px 10px rgba(99,191,181,0.3); }
.lead-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.lead-btn:disabled .lead-btn__shimmer { display: none; }

.lead-btn__text,.lead-btn__arrow { position: relative; z-index: 1; }
.lead-btn__arrow { font-size: 1.15rem; transition: transform 0.2s; }
.lead-btn:hover .lead-btn__arrow { transform: translateX(5px); }

/* ── Success overlay ── */
.lead-success {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #461E57;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-align: center;
  padding: 2rem;
}

.lead-success--visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.lead-success__icon {
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
  animation: popIn 0.5s 0.1s both;
}
.lead-success__icon svg { width: 100%; height: 100%; }

.check-path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck 0.6s 0.4s ease forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
@keyframes popIn {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1);   opacity: 1; }
}

.lead-success__title {
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  margin: 0 0 0.75rem;
  animation: fadeUp 0.5s 0.5s both;
}

.lead-success__msg {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin: 0 0 2rem;
  animation: fadeUp 0.5s 0.65s both;
}
.lead-success__msg strong { color: #63BFB5; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lead-success__bar {
  width: 220px;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 99px;
  overflow: hidden;
  animation: fadeUp 0.4s 0.8s both;
}
.lead-success__fill {
  height: 100%;
  width: 0;
  background: #63BFB5;
  border-radius: 99px;
  transition: width 2.4s linear;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .lead-card  { padding: 2rem 1.4rem 1.6rem; }
  .lead-logo  { width: 170px; }
}

body {
	margin: 0;
	background-color: #461E57;
	height: 100vh;
	overflow: hidden;
	font-family: "Poppins", sans-serif;
	font-weight: bold;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.75);
}

#c {
	display: block;
	touch-action: none;
	transform: translateZ(0);
}


/*/////////////////////
//        HUD        //
/////////////////////*/


.hud__score,
.pause-btn {
	position: fixed;
	font-size: calc(14px + 2vw + 1vh);
}

.hud__score {
	top: 0.65em;
	left: 0.65em;
	pointer-events: none;
	user-select: none;
}

.cube-count-lbl {
	font-size: 0.46em;
}

.timer-lbl {
	font-size: 0.60em;
	font-weight: 700;
	color: #63BFB5;
	letter-spacing: 0.05em;
	margin-top: 0.15em;
	transition: color 0.3s;
}

.timer-lbl.timer--urgent {
	color: #ff6b6b;
	animation: timerPulse 0.5s ease-in-out infinite alternate;
}

@keyframes timerPulse {
	from { opacity: 1; }
	to   { opacity: 0.5; }
}

.pause-btn {
	position: fixed;
	top: 0;
	right: 0;
	padding: 0.8em 0.65em;
}

.pause-btn > div {
	position: relative;
	width: 0.8em;
	height: 0.8em;
	opacity: 0.75;
}

.pause-btn > div::before,
.pause-btn > div::after {
	content: '';
	display: block;
	width: 34%;
	height: 100%;
	position: absolute;
	background-color: #fff;
}

.pause-btn > div::after {
	right: 0;
}

.slowmo {
	position: fixed;
	bottom: 0;
	width: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s;
	will-change: opacity;
}

.slowmo::before {
	content: 'SLOW-MO';
	display: block;
	font-size: calc(8px + 1vw + 0.5vh);
	margin-left: 0.5em;
	margin-bottom: 8px;
}

.slowmo::after {
	content: '';
	display: block;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 1.5vh;
	background-color: rgba(0, 0, 0, 0.25);
	z-index: -1;
}

.slowmo__bar {
	height: 1.5vh;
	background-color: rgba(255, 255, 255, 0.75);
	transform-origin: 0 0;
}



/*/////////////////////
//       MENUS       //
/////////////////////*/

.menus::before {
	content: '';
	pointer-events: none;
	position: fixed;
	inset: 0;
	background-color: #000;
	opacity: 0;
	transition: opacity 0.2s ease-in;
}

.menus.has-active::before {
	opacity: 0.55;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}

.menus.interactive-mode::before {
	opacity: 0.12;
}

/* Menu containers */
.menu {
	pointer-events: none;
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	user-select: none;
	text-align: center;
	color: rgba(255, 255, 255, 0.9);
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px);
	transition-property: opacity, visibility, transform;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}

.menu.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-duration: 0.45s;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.menus.interactive-mode .menu.active { opacity: 0.6; }
.menus:not(.interactive-mode) .menu.active > * { pointer-events: auto; }

/* ── Logo ── */
#logo1 {
	width: 320px;
	height: auto;
	margin-bottom: 0.6rem;
	filter: drop-shadow(0 0 18px rgba(99,191,181,0.45)) drop-shadow(0 6px 24px rgba(0,0,0,0.4));
	animation: logoPulse 3.5s ease-in-out infinite;
}

@keyframes logoPulse {
	0%,100% { filter: drop-shadow(0 0 14px rgba(99,191,181,0.35)) drop-shadow(0 6px 24px rgba(0,0,0,0.4)); }
	50%      { filter: drop-shadow(0 0 32px rgba(99,191,181,0.7))  drop-shadow(0 6px 30px rgba(0,0,0,0.5)); }
}

#logo2 {
	width: 200px;
	margin: -4px;
}

/* ── Headings ── */
h1 {
	font-size: 2.6rem;
	line-height: 1;
	text-align: center;
	font-weight: bold;
	font-family: "Poppins", sans-serif;
	margin: 0 0.5em 0.2em;
	letter-spacing: 0.03em;
	/* animated shimmer text */
	background: linear-gradient(100deg,
		#ffffff 0%,
		#ffffff 35%,
		#63BFB5 50%,
		#ffffff 65%,
		#ffffff 100%);
	background-size: 220% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: titleShimmer 4s linear infinite;
}

@keyframes titleShimmer {
	0%   { background-position: 220% center; }
	100% { background-position: -20% center; }
}

/* Teal accent bar under h1 */
.menu--main h1::after,
.menu--pause h1::after {
	content: '';
	display: block;
	width: 52px;
	height: 3px;
	background: linear-gradient(90deg, #63BFB5, #a8ddd9, #63BFB5);
	background-size: 200% 100%;
	border-radius: 99px;
	margin: 0.55em auto 0;
	animation: barShimmer 2.5s linear infinite;
	-webkit-text-fill-color: initial;
}

@keyframes barShimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

h2 {
	font-size: 1rem;
	line-height: 1;
	text-align: center;
	font-weight: bold;
	font-family: "Poppins", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
	margin: 0.2em 0.65em 0.6em;
}

/* Score labels */
.final-score-lbl {
	font-size: 5.5rem;
	line-height: 1;
	color: #fff;
	text-shadow: 0 0 40px rgba(99,191,181,0.5);
	margin: 0 0 0.1em;
}

.high-score-lbl {
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: #63BFB5;
	margin: 0 0 2em;
}

/* Reset ::before on lead-btn so menu ripple doesn't bleed in */
.lead-btn::before { display: none; }

/* ── Menu buttons — base ── */
button {
	display: block;
	position: relative;
	width: 220px;
	padding: 13px 20px;
	background: transparent;
	border: none;
	outline: none;
	overflow: hidden;
	user-select: none;
	font-family: "Poppins", sans-serif;
	font-weight: bold;
	font-size: 1.15rem;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.78);
	cursor: pointer;
	margin: 0.35rem 0;
	opacity: 1;
	border-radius: 8px;
	transition: color 0.25s, text-shadow 0.25s, transform 0.2s, background 0.25s, box-shadow 0.25s;
}

/* Ripple fill on press */
button::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center,
		rgba(99,191,181,0.22) 0%,
		rgba(99,191,181,0.07) 55%,
		transparent 75%);
	transform: scale(0);
	opacity: 0;
	border-radius: 8px;
	transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.35s;
}

button:active { transform: scale(0.96); }
button:active::before { transform: scale(1); opacity: 1; }

/* ── PLAY GAME — solid teal pill with pulse ring ── */
.play-normal-btn {
	color: #461E57;
	background: #63BFB5;
	font-size: 1.2rem;
	letter-spacing: 0.14em;
	border-radius: 50px;
	width: 240px;
	padding: 15px 28px;
	box-shadow:
		0 0 0 0   rgba(99,191,181,0.55),
		0 8px 28px rgba(99,191,181,0.35);
	animation: playPulse 2.2s ease-out infinite;
	margin-bottom: 0.6rem;
}

@keyframes playPulse {
	0%   { box-shadow: 0 0 0 0px  rgba(99,191,181,0.55), 0 8px 28px rgba(99,191,181,0.35); }
	60%  { box-shadow: 0 0 0 14px rgba(99,191,181,0),    0 8px 28px rgba(99,191,181,0.35); }
	100% { box-shadow: 0 0 0 0px  rgba(99,191,181,0),    0 8px 28px rgba(99,191,181,0.35); }
}

/* CASUAL MODE — ghost outline */
/*.play-casual-btn {*/
/*	color: rgba(255,255,255,0.65);*/
/*	border: 1.5px solid rgba(255,255,255,0.22);*/
/*	border-radius: 50px;*/
/*	width: 220px;*/
/*	padding: 12px 24px;*/
/*	transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s;*/
/*}*/

/* ── Credits ── */
.credits {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 20px;
	font-family: "Poppins", sans-serif;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.28);
	font-weight: normal;
}

a { color: white; }

/* ── Staggered entry animations ── */
.menu.active #logo1           { animation: logoPulse 3.5s ease-in-out infinite, fadeSlideIn 0.55s 0.05s both; }
.menu.active h1               { animation: titleShimmer 4s linear infinite, fadeSlideIn 0.55s 0.15s both; }
.menu.active .play-normal-btn { animation: playPulse 2.2s ease-out infinite, fadeSlideIn 0.55s 0.28s both; }
.menu.active .play-casual-btn { animation: fadeSlideIn 0.55s 0.38s both; }

@keyframes fadeSlideIn {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Hover states (large screens only) ── */
@media (min-width: 1025px) {
	button:hover { transform: translateY(-2px); }

	.play-normal-btn:hover {
		background: #72cec4;
		box-shadow: 0 0 0 0px rgba(99,191,181,0), 0 12px 36px rgba(99,191,181,0.55);
		color: #3a1648;
		transform: translateY(-3px) scale(1.03);
	}

	.play-casual-btn:hover {
		color: #63BFB5;
		border-color: #63BFB5;
		box-shadow: 0 0 18px rgba(99,191,181,0.25);
		transform: translateY(-2px);
	}
}