/* Styles for startgame.html (moved from its <style> block). */

/* Prevent horizontal scrolling */
html, body {
	overflow-x: hidden;
}

/* Sticky Header Fix */
#header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: transparent;
}

.topnav {
	position: relative;
	z-index: var(--z-header-menu);
}

/* Email Input Container */
.marketing-optin {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: var(--space-2-5) 0 var(--space-1);
	font-size: var(--font-size-sm);
	line-height: 1.4;
	color: var(--color-text-slate);
	text-align: left;
	cursor: pointer;
}
.marketing-optin input { margin-top: var(--space-0-5); flex-shrink: 0; }
/* Flex items default to min-width:auto, which refuses to shrink
   below the longest word and pushes the Start Game button off a
   narrow screen. */
.marketing-optin span { min-width: 0; overflow-wrap: break-word; }

/* iPhone SE / older Androids: the label is three lines here, so
   buy the vertical space back rather than let it crowd the CTA. */
@media (max-width: 380px) {
	.marketing-optin {
		font-size: var(--font-size-xs);
		line-height: 1.35;
		gap: var(--space-1-5);
		margin: var(--space-2) 0 var(--space-1);
	}
}

.email-input-container {
	width: 100%;
	margin-bottom: 0;
}

.email-input-container .form-input {
	width: 100%;
	box-sizing: border-box;
}

/* Email Validation Styling */
.validation-message {
	padding: var(--space-3) var(--space-4);
	margin: var(--space-2) var(--space-7) 0 var(--space-7);
	border-radius: var(--radius-md);
	font-size: var(--font-size-base);
	line-height: 1.4;
	animation: slideDown 0.3s ease-out;
	max-width: calc(700px - 60px);
}

.validation-message.error {
	background: var(--color-danger-soft-a10);
	border: 1px solid var(--color-danger-soft-a30);
	color: var(--color-danger);
}

.validation-message.warning {
	background: var(--color-warning-soft-a10);
	border: 1px solid var(--color-warning-soft-a30);
	color: var(--color-warning);
}

.validation-message.suggestion {
	background: var(--color-accent-soft-a10);
	border: 1px solid var(--color-accent-soft-a30);
	color: var(--color-accent);
}

.validation-buttons {
	margin-top: var(--space-3);
	display: flex;
	gap: var(--space-2-5);
	justify-content: center;
}

.validation-btn {
	padding: var(--space-2) var(--space-5);
	border: none;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-base);
	cursor: pointer;
	font-weight: var(--font-weight-medium);
	transition: all 0.2s ease;
}

.validation-btn.primary {
	background: var(--color-accent-soft);
	color: var(--color-text-inverse);
}

.validation-btn.primary:hover {
	background: var(--color-accent);
}

.validation-btn.secondary {
	background: var(--color-surface-a90);
	color: var(--color-text-secondary);
	border: 1px solid var(--overlay-dark-20);
}

.validation-btn.secondary:hover {
	background: var(--color-surface);
	border-color: var(--overlay-dark-30);
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
	.validation-message {
		margin: var(--space-2) var(--space-5) 0 var(--space-5);
		max-width: calc(100% - 40px);
	}
}

/* ==== Moved from inline styles in startgame.html ==== */

/* "Save your Creator Code" popup, built by showCreatorCodePopup() */
.creator-code-popup {
  position: fixed;
  width: 90%;
  max-width: 480px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-surface);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-sheet-strong);
  z-index: var(--z-header);
  color: var(--color-text);
  overflow: hidden;
}

.creator-code-popup__title {
  background: var(--color-navy);
  color: var(--color-text-inverse);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.creator-code-popup__text {
  text-align: center;
  padding: var(--space-5) var(--space-6) 0;
  margin: 0;
  line-height: 1.55;
  font-size: var(--font-size-md);
  color: var(--color-text-tertiary);
}

.creator-code-popup__label {
  text-align: center;
  padding: 0 var(--space-6);
  margin: var(--space-5) 0 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.creator-code-popup__code {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-family: var(--font-code);
  font-size: var(--font-size-code);
  font-weight: var(--font-weight-bold);
  background: var(--color-surface-soft);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin: var(--space-2) var(--space-6) 0;
  color: var(--color-text);
  letter-spacing: 0.2em;
}

.creator-code-popup__note {
  margin: var(--space-5) var(--space-6) 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-primary-a10);
  border: 1px solid var(--color-primary-a35);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
}

.creator-code-popup__note strong {
  color: var(--color-primary);
}

.creator-code-popup__continue {
  display: block;
  width: calc(100% - 2 * var(--space-6));
  height: 52px;
  margin: var(--space-6) auto;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  cursor: pointer;
}

.creator-code-popup__continue:hover {
  background: var(--color-primary-hover);
}