/* ==========================================================================
   IP for Her — Brand Boss game styles
   Namespaced under .ipfh-game to avoid theme/page-builder collisions.
   Colors are exposed as CSS custom properties so admin-configured
   Appearance settings (game.js sets these inline on load) can override
   the defaults below without touching this file.
   ========================================================================== */

.ipfh-game {
	--ipfh-primary: #8E2A6B;
	--ipfh-secondary: #F2A65A;
	--ipfh-ink: #2B1B2F;
	--ipfh-ink-soft: #6B5B6E;
	--ipfh-bg: #FDF3E7;
	--ipfh-card: #FFFFFF;
	--ipfh-success: #2F855A;
	--ipfh-error: #B5441F;
	--ipfh-radius: 18px;
	--ipfh-radius-btn: 999px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--ipfh-ink);
	max-width: 480px;
	margin: 0 auto;
	box-sizing: border-box;
}

.ipfh-game * {
	box-sizing: border-box;
}

.ipfh-game[data-button-style="pill"] .ipfh-game__button { --ipfh-radius-btn: 999px; }
.ipfh-game[data-button-style="rounded"] .ipfh-game__button { --ipfh-radius-btn: 14px; }
.ipfh-game[data-button-style="square"] .ipfh-game__button { --ipfh-radius-btn: 4px; }

.ipfh-game__loading {
	text-align: center;
	padding: 48px 16px;
	color: var(--ipfh-ink-soft);
	font-weight: 600;
}

/* --- HUD (progress / score / coins) -------------------------------- */

.ipfh-game__hud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 4px;
	font-size: 13px;
	font-weight: 700;
}

.ipfh-game__hud-pill {
	background: var(--ipfh-card);
	border: 2px solid var(--ipfh-bg);
	border-radius: var(--ipfh-radius-btn);
	padding: 6px 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.ipfh-game__hud-pill--coins { color: var(--ipfh-secondary); }
.ipfh-game__hud-pill--score { color: var(--ipfh-primary); }

.ipfh-game__progress-track {
	flex: 1;
	height: 8px;
	border-radius: 8px;
	background: var(--ipfh-bg);
	overflow: hidden;
	margin: 0 8px;
}

.ipfh-game__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ipfh-primary), var(--ipfh-secondary));
	border-radius: 8px;
	transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ipfh-game__progress-fill { transition: none; }
}

/* --- Card / signature zigzag accent --------------------------------- */

.ipfh-game__screen {
	background: var(--ipfh-card);
	border-radius: var(--ipfh-radius);
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(43, 27, 47, 0.10);
	margin-bottom: 16px;
}

/* Signature element: an abstract zigzag band in the two brand colors,
   used only here and on the badge — the one place we spend visual
   boldness, kept quiet everywhere else. */
.ipfh-game__accent-band {
	height: 14px;
	background:
		linear-gradient(135deg, var(--ipfh-secondary) 25%, transparent 25%) -7px 0/14px 14px,
		linear-gradient(225deg, var(--ipfh-secondary) 25%, transparent 25%) -7px 0/14px 14px,
		var(--ipfh-primary);
}

.ipfh-game__screen-body {
	padding: 22px 20px 24px;
}

.ipfh-game__eyebrow {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ipfh-secondary);
	margin: 0 0 6px;
}

.ipfh-game__title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 12px;
	color: var(--ipfh-primary);
}

.ipfh-game__body-text {
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 20px;
	color: var(--ipfh-ink);
}

.ipfh-game__scenario-image {
	width: 100%;
	border-radius: 12px;
	margin-bottom: 16px;
	display: block;
}

/* --- Answer options -------------------------------------------------- */

.ipfh-game__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.ipfh-game__option {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--ipfh-bg);
	border: 2px solid transparent;
	border-radius: 14px;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ipfh-ink);
	cursor: pointer;
	min-height: 48px;
	transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.ipfh-game__option:hover,
.ipfh-game__option:focus-visible {
	border-color: var(--ipfh-primary);
	transform: translateY(-1px);
}

.ipfh-game__option:focus-visible {
	outline: 3px solid var(--ipfh-secondary);
	outline-offset: 2px;
}

.ipfh-game__option[disabled] {
	cursor: default;
	transform: none;
}

.ipfh-game__option--correct {
	background: #E7F4EE;
	border-color: var(--ipfh-success);
	color: var(--ipfh-success);
}

.ipfh-game__option--incorrect {
	background: #FBEAE3;
	border-color: var(--ipfh-error);
	color: var(--ipfh-error);
}

@media (prefers-reduced-motion: reduce) {
	.ipfh-game__option { transition: none; }
}

/* --- Feedback panel --------------------------------------------------- */

.ipfh-game__feedback {
	border-radius: 14px;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 18px;
}

.ipfh-game__feedback--correct {
	background: #E7F4EE;
	color: var(--ipfh-success);
}

.ipfh-game__feedback--incorrect {
	background: #FBEAE3;
	color: var(--ipfh-error);
}

/* --- Buttons ------------------------------------------------------------ */

.ipfh-game__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 50px;
	background: var(--ipfh-primary);
	color: #fff;
	border: none;
	border-radius: var(--ipfh-radius-btn);
	font-size: 16px;
	font-weight: 700;
	padding: 14px 20px;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.ipfh-game__button:hover { transform: translateY(-1px); }
.ipfh-game__button:focus-visible { outline: 3px solid var(--ipfh-secondary); outline-offset: 2px; }
.ipfh-game__button:disabled { opacity: 0.5; cursor: default; transform: none; }

.ipfh-game__button--secondary {
	background: transparent;
	color: var(--ipfh-primary);
	border: 2px solid var(--ipfh-primary);
}

.ipfh-game__button--whatsapp {
	background: #25D366;
}

@media (prefers-reduced-motion: reduce) {
	.ipfh-game__button { transition: none; }
}

/* --- Boss challenge tap cards -------------------------------------- */

.ipfh-game__boss-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 18px;
}

.ipfh-game__boss-card {
	background: var(--ipfh-bg);
	border: 2px solid transparent;
	border-radius: 14px;
	padding: 18px 10px;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	min-height: 90px;
}

.ipfh-game__boss-card:focus-visible {
	outline: 3px solid var(--ipfh-secondary);
	outline-offset: 2px;
}

/* --- Simulation steps ------------------------------------------------ */

.ipfh-game__step-counter {
	font-size: 13px;
	font-weight: 700;
	color: var(--ipfh-ink-soft);
	margin-bottom: 8px;
}

.ipfh-game__sim-disclaimer {
	font-size: 12px;
	color: var(--ipfh-ink-soft);
	background: var(--ipfh-bg);
	border-radius: 10px;
	padding: 10px 12px;
	margin-top: 16px;
}

/* --- Badge -------------------------------------------------------------- */

.ipfh-game__badge-wrap {
	text-align: center;
	margin-bottom: 18px;
}

.ipfh-game__badge-canvas {
	max-width: 260px;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(43, 27, 47, 0.18);
}

.ipfh-game__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 18px 0;
}

.ipfh-game__stat {
	background: var(--ipfh-bg);
	border-radius: 12px;
	padding: 12px;
	text-align: center;
}

.ipfh-game__stat-value {
	font-size: 20px;
	font-weight: 800;
	color: var(--ipfh-primary);
	display: block;
}

.ipfh-game__stat-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ipfh-ink-soft);
}

.ipfh-game__share-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* --- Footer controls (audio toggle, home) --------------------------- */

.ipfh-game__footer {
	display: flex;
	justify-content: center;
	gap: 16px;
	padding: 4px 0 8px;
}

.ipfh-game__icon-btn {
	background: none;
	border: none;
	color: var(--ipfh-ink-soft);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px;
	min-height: 44px;
}

.ipfh-game__icon-btn:focus-visible {
	outline: 3px solid var(--ipfh-secondary);
	outline-offset: 2px;
}

/* --- Screen transitions ---------------------------------------------- */

.ipfh-game__screen {
	animation: ipfh-fade-in 0.25s ease;
}

@keyframes ipfh-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.ipfh-game__screen { animation: none; }
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 360px) {
	.ipfh-game__title { font-size: 19px; }
	.ipfh-game__screen-body { padding: 18px 14px 20px; }
}