/* ==========================================================================
   GKFC Core — Battalia Mini Games (Penalty Shootout + Crossbar Challenge)
   v1.22.0. Phone-only experience: cards for the dashboard block and the
   dedicated /fan-zone/mini-games/ page (3D tilt cards), the full-screen
   PORTRAIT stage the JS mounts (pause card, rotate overlay, safe-area
   padding), and the desktop "mobile only" panel. Tokens (--fz-*) come
   from fan-zone.css; this file only depends on gkfc-fan-zone.
   ========================================================================== */

/* ── 1. Cards (dashboard block + games page) ─────────────────────────────── */

.gkfc-fzd-mg .gkfc-mg-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem;
	perspective: 900px;
}

.gkfc-mg-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.05rem 1.1rem;
	border: 1px solid var(--fzd-line, var(--fz-line));
	border-radius: var(--gkfc-radius, var(--fz-r));
	background:
		radial-gradient(120% 90% at 100% 0%, var(--fz-gold-soft) 0%, rgba(255, 255, 255, 0) 55%),
		rgba(255, 255, 255, 0.03);
	text-decoration: none;
	color: inherit;
	transform-style: preserve-3d;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55);
	transition: border-color 0.2s var(--fz-ease), transform 0.25s var(--fz-ease), box-shadow 0.25s var(--fz-ease);
}

/* Sheen sweep — the "premium 3D" lift on hover/press. */
.gkfc-mg-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.10) 50%, transparent 58%);
	opacity: 0;
	transform: translateX(-40%);
	transition: opacity 0.3s var(--fz-ease), transform 0.45s var(--fz-ease);
	pointer-events: none;
}

/* Per-game accent (maroon for Penalty, pitch green for Crossbar). */
.gkfc-mg-card[data-gkfc-mg-card='penalty'] .gkfc-mg-card__icon {
	background: rgba(131, 29, 33, 0.30);
	border-color: rgba(201, 84, 90, 0.55);
}
.gkfc-mg-card[data-gkfc-mg-card='crossbar'] .gkfc-mg-card__icon {
	background: rgba(62, 207, 126, 0.14);
	border-color: rgba(62, 207, 126, 0.45);
}

a.gkfc-mg-card:hover,
a.gkfc-mg-card:focus-visible {
	border-color: var(--fz-gold-line);
	transform: rotateX(-4deg) rotateY(-3deg) translateY(-3px);
	box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.7);
}
a.gkfc-mg-card:hover::after,
a.gkfc-mg-card:focus-visible::after { opacity: 1; transform: translateX(40%); }

/* Touch press (the interactive article variant on phones). */
.gkfc-mg-card:active {
	transform: rotateX(3deg) scale(0.975);
	box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.6);
}
.gkfc-mg-card:active::after { opacity: 1; transform: translateX(40%); }

.gkfc-mg-card.is-disabled {
	opacity: 0.62;
	filter: grayscale(0.4);
}

.gkfc-mg-card__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--fz-gold-soft);
	border: 1px solid var(--fz-gold-line);
	font-size: 1.35rem;
	line-height: 1;
	transform: translateZ(18px);
}

.gkfc-mg-card__body { flex: 1 1 auto; min-width: 0; }

.gkfc-mg-card__title {
	margin: 0 0 0.25rem;
	color: #fff;
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.gkfc-mg-card__blurb {
	margin: 0 0 0.55rem;
	color: var(--fz-muted);
	font-size: 0.82rem;
	line-height: 1.45;
}

.gkfc-mg-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.8rem;
	color: var(--fz-faint);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.gkfc-mg-card__meta b { color: var(--fz-gold); font-weight: 700; }

.gkfc-mg-card__cta {
	flex: 0 0 auto;
	font-size: 0.74rem;
	white-space: nowrap;
}

.gkfc-mg-card__cta.is-off {
	padding: 0.55rem 1rem;
	border: 1px dashed var(--fz-line);
	border-radius: 999px;
	color: var(--fz-faint);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gkfc-mg-balance {
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--fz-gold-line);
	border-radius: 999px;
	background: var(--fz-gold-soft);
	color: var(--fz-gold);
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.05em;
}

.gkfc-mg-note {
	margin: 0.8rem 0 0;
	color: var(--fz-muted);
	font-size: 0.82rem;
}

/* v1.22.0 — desktop/tablet visitors see this instead of the play surface. */
.gkfc-mg-desk {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2.4rem 1.4rem;
	text-align: center;
	border: 1px dashed var(--fz-line);
	border-radius: var(--fz-r-xl, 18px);
	background:
		radial-gradient(120% 90% at 50% 0%, var(--fz-gold-soft) 0%, rgba(255, 255, 255, 0) 60%),
		rgba(255, 255, 255, 0.02);
}

.gkfc-mg-desk__icon {
	font-size: 2.6rem;
	line-height: 1;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

.gkfc-mg-desk__title {
	margin: 0.4rem 0 0;
	color: #fff;
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gkfc-mg-desk__text {
	margin: 0;
	max-width: 48ch;
	color: var(--fz-muted);
	font-size: 0.86rem;
	line-height: 1.55;
}

/* ── 2. Stage (v1.22.0 — full-screen PORTRAIT session) ──────────────────── */

html.gkfc-mg-open,
html.gkfc-mg-open body { overflow: hidden; }

/* Hide the app-shell chrome while a game runs (spec: no header/footer/
   nav during gameplay) — visibility keeps layout & scroll state intact. */
html.gkfc-mg-open .gkfc-app-bar,
html.gkfc-mg-open .gkfc-app-foot,
html.gkfc-mg-open .gkfc-app-nav,
html.gkfc-mg-open .gkfc-app-skip { visibility: hidden; }

.gkfc-mg-stage {
	position: fixed;
	inset: 0;
	z-index: 9100;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Full-bleed: the stage only ever mounts on phones (JS is gated
	   server-side by Games\Bootstrap::is_phone_like), so the panel IS
	   the screen. Safe areas via --fz-sat/--fz-sab (env() tokens). */
	padding: 0;
}

.gkfc-mg-stage[hidden] { display: none; }

.gkfc-mg-stage__scrim {
	position: absolute;
	inset: 0;
	/* Kept for the data-mg-exit target; fully covered by the panel. */
	display: none;
}

.gkfc-mg-stage__panel {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: none;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	padding: calc(0.9rem + var(--fz-sat, 0px)) 0.9rem calc(0.9rem + var(--fz-sab, 0px));
	border: 0;
	border-radius: 0;
	background:
		radial-gradient(130% 70% at 100% 0%, rgba(131, 29, 33, 0.38) 0%, rgba(255, 255, 255, 0) 60%),
		var(--fz-bg-elev);
	box-shadow: none;
	overflow: auto;
}

.gkfc-mg-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.8rem;
}

.gkfc-mg-eyebrow {
	margin: 0 0 0.15rem;
	color: var(--fz-gold);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.34em;
	text-transform: uppercase;
}

.gkfc-mg-top__id h2 {
	margin: 0;
	color: #fff;
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: clamp(1.1rem, 4vw, 1.35rem);
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.gkfc-mg-top__id { flex: 1 1 auto; min-width: 0; }
.gkfc-mg-top__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 0.45rem; }

.gkfc-mg-timer {
	min-width: 3.1rem;
	padding: 0.32rem 0.55rem;
	border: 1px solid var(--fz-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--fz-text);
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: 0.78rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.gkfc-mg-icon {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--fz-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	color: var(--fz-text);
	font-size: 1rem;
	cursor: pointer;
	transition: border-color 0.18s var(--fz-ease), background 0.18s var(--fz-ease);
}

.gkfc-mg-icon:hover { border-color: var(--fz-gold-line); background: var(--fz-gold-soft); }
.gkfc-mg-icon.is-muted { opacity: 0.45; text-decoration: line-through; }
.gkfc-mg-icon--close { font-size: 1.35rem; line-height: 1; }

/* HUD */
.gkfc-mg-hud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.gkfc-mg-hud__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.34rem;
	padding: 0.36rem 0.7rem;
	border: 1px solid var(--fz-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
}

.gkfc-mg-hud__chip b {
	color: var(--fz-text);
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: 0.86rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.gkfc-mg-hud__chip i {
	color: var(--fz-faint);
	font-size: 0.62rem;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gkfc-mg-hud__chip--gold { border-color: var(--fz-gold-line); background: var(--fz-gold-soft); }
.gkfc-mg-hud__chip--gold b { color: var(--fz-gold); }

/* Field, loading, message */
.gkfc-mg-field {
	min-height: 120px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.gkfc-mg-field[hidden] { display: none; }

.gkfc-mg-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: 1.6rem 0.6rem;
	color: var(--fz-muted);
	font-size: 0.86rem;
	text-align: center;
}

.gkfc-mg-loading p { margin: 0; }
.gkfc-mg-loading--err p { color: var(--fz-bad); max-width: 34ch; }
.gkfc-mg-loading--err { gap: 1rem; }

.gkfc-mg-spinner {
	width: 34px;
	height: 34px;
	border: 3px solid var(--fz-line);
	border-top-color: var(--fz-gold);
	border-radius: 50%;
	animation: gkfc-mg-spin 0.8s linear infinite;
}

@keyframes gkfc-mg-spin { to { transform: rotate(360deg); } }

.gkfc-mg-msg {
	margin: 0;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--fz-gold-line);
	border-radius: var(--fz-r-sm, 10px);
	background: var(--fz-gold-soft);
	color: var(--fz-gold);
	font-size: 0.8rem;
	text-align: center;
}

.gkfc-mg-instr {
	margin: 0.8rem 0 0;
	min-height: 2.4em;
	color: var(--fz-muted);
	font-size: 0.82rem;
	line-height: 1.45;
	text-align: center;
}

.gkfc-mg-shoot {
	display: block;
	width: min(320px, 100%);
	margin: 0.5rem auto 0;
	min-height: 48px;
}

.gkfc-mg-shoot:disabled { opacity: 0.55; cursor: not-allowed; }

.gkfc-mg-btn-ghost {
	background: transparent !important;
	border: 1px solid var(--fz-line) !important;
	color: var(--fz-text) !important;
}

/* v1.22.0 — Pause card (covers the whole panel while paused). */
.gkfc-mg-pause {
	position: absolute;
	inset: 0;
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 1.4rem 1.2rem;
	text-align: center;
	background: rgba(10, 8, 9, 0.95);
	backdrop-filter: blur(5px);
}

.gkfc-mg-pause[hidden] { display: none; }

.gkfc-mg-pause__title {
	margin: 0 0 0.15rem;
	color: #fff;
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: clamp(1.3rem, 6vw, 1.7rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.gkfc-mg-pause__note {
	margin: 0 0 1rem;
	max-width: 34ch;
	color: var(--fz-muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

/* End card */
.gkfc-mg-end {
	padding: 0.6rem 0.2rem 0.2rem;
	text-align: center;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gkfc-mg-end[hidden] { display: none; }

.gkfc-mg-end__kicker {
	margin: 0 0 0.5rem;
	color: var(--fz-gold);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.gkfc-mg-end__score {
	margin: 0 0 0.35rem;
	color: #fff;
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: clamp(1.6rem, 7vw, 2.2rem);
	font-weight: 800;
	letter-spacing: 0.04em;
}

.gkfc-mg-end__pts {
	margin: 0 0 0.5rem;
	color: var(--fz-gold);
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: clamp(1.3rem, 5.5vw, 1.7rem);
	font-weight: 800;
}

.gkfc-mg-end__note {
	margin: 0 0 0.7rem;
	color: var(--fz-muted);
	font-size: 0.78rem;
}

.gkfc-mg-end__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1rem;
	margin: 0 0 1.1rem;
	color: var(--fz-faint);
	font-size: 0.75rem;
}

.gkfc-mg-end__meta b { color: var(--fz-text); font-weight: 700; }

.gkfc-mg-end__acts {
	display: flex;
	justify-content: center;
	gap: 0.7rem;
	flex-wrap: wrap;
}

/* ── 3. Shared goal-frame visuals ───────────────────────────────────────── */

.gkfc-pen__goal,
.gkfc-cb__goal {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 42vh;
	border: 5px solid rgba(255, 255, 255, 0.9);
	border-bottom-width: 5px;
	border-radius: 6px 6px 4px 4px;
	background:
		linear-gradient(rgba(10, 12, 16, 0.35), rgba(10, 12, 16, 0.55)),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 9%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 17%),
		linear-gradient(#1d2733, #131a23);
	box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.5);
	overflow: visible;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	cursor: crosshair;
}

/* Pitch in front of the goal. */
.gkfc-pen::before,
.gkfc-cb::before,
.gkfc-fk::before {
	content: '';
	display: block;
	height: 54px;
	margin-top: -5px;
	border-radius: 0 0 14px 14px;
	background:
		linear-gradient(180deg, rgba(246, 197, 29, 0.16), rgba(246, 197, 29, 0) 40%),
		repeating-linear-gradient(90deg, #17351f 0 22px, #1b3d25 22px 44px);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-top: 0;
}

.gkfc-mg-ball {
	position: absolute;
	width: 7.5%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 30%, #ffffff 0 46%, #d9d9de 60%, #9ea3ad 100%);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
	z-index: 4;
	pointer-events: none;
}

.gkfc-mg-flash {
	position: absolute;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	z-index: 6;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: clamp(1.1rem, 5vw, 1.6rem);
	font-weight: 900;
	letter-spacing: 0.06em;
	white-space: nowrap;
	text-transform: uppercase;
	pointer-events: none;
	animation: gkfc-mg-pop 0.34s var(--fz-ease) both;
	background: rgba(8, 6, 7, 0.86);
	border: 2px solid var(--fz-gold);
	color: var(--fz-gold);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.gkfc-mg-flash[data-outcome='goal'],
.gkfc-mg-flash[data-outcome='hit'] {
	background: rgba(10, 40, 24, 0.92);
	border-color: var(--fz-ok);
	color: #d8ffe9;
}

.gkfc-mg-flash[data-outcome='save'],
.gkfc-mg-flash[data-outcome='wall'],
.gkfc-mg-flash[data-outcome='wide'],
.gkfc-mg-flash[data-outcome='over'],
.gkfc-mg-flash[data-outcome='under'],
.gkfc-mg-flash[data-outcome='miss'] {
	background: rgba(52, 10, 12, 0.92);
	border-color: var(--fz-bad);
	color: #ffe1e1;
}

@keyframes gkfc-mg-pop {
	from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
	to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ── 4. Penalty Shootout ────────────────────────────────────────────────── */

.gkfc-pen__ball { transform: translate(-50%, -50%); }

.gkfc-pen__aim {
	position: absolute;
	width: 26px;
	height: 26px;
	transform: translate(-50%, -50%);
	border: 3px solid var(--fz-gold);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(246, 197, 29, 0.18), 0 0 18px rgba(246, 197, 29, 0.4);
	z-index: 5;
	pointer-events: none;
	animation: gkfc-mg-aim 1.6s ease-in-out infinite;
}

@keyframes gkfc-mg-aim {
	0%, 100% { box-shadow: 0 0 0 4px rgba(246, 197, 29, 0.18), 0 0 14px rgba(246, 197, 29, 0.35); }
	50%      { box-shadow: 0 0 0 8px rgba(246, 197, 29, 0.08), 0 0 26px rgba(246, 197, 29, 0.55); }
}

.gkfc-pen__keeper {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 13%;
	height: 44%;
	transform: translateX(-50%);
	transform-origin: 50% 100%;
	border-radius: 12px 12px 5px 5px;
	background: linear-gradient(180deg, var(--fz-maroon) 0%, var(--fz-maroon-deep) 100%);
	border: 2px solid rgba(255, 255, 255, 0.35);
	z-index: 3;
	pointer-events: none;
}

.gkfc-pen__keeper::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -34%;
	width: 62%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #f2d3b8 0 55%, #d9b497 100%);
	border: 2px solid rgba(255, 255, 255, 0.35);
}

.gkfc-pen__keeper[data-dive='left']  { background: linear-gradient(180deg, #a3272d, var(--fz-maroon-deep)); }
.gkfc-pen__keeper[data-dive='right'] { background: linear-gradient(180deg, #a3272d, var(--fz-maroon-deep)); }

/* ── 5. Crossbar Challenge ──────────────────────────────────────────────── */

.gkfc-cb__goal { cursor: grab; }
.gkfc-cb__goal:active { cursor: grabbing; }

/* The ±0.055 hit band straddling the bar (y = 1 → top of frame). */
.gkfc-cb__band {
	position: absolute;
	left: -2%;
	width: 104%;
	top: -5.5%;
	height: 11%;
	border-radius: 4px;
	background: linear-gradient(90deg, rgba(246, 197, 29, 0.05), rgba(246, 197, 29, 0.32) 25% 75%, rgba(246, 197, 29, 0.05));
	border-top: 2px dashed var(--fz-gold-line);
	border-bottom: 2px dashed var(--fz-gold-line);
	z-index: 2;
	pointer-events: none;
}

.gkfc-cb__target {
	position: absolute;
	width: 18px;
	height: 18px;
	transform: translate(-50%, -50%);
	border: 3px solid var(--fz-gold);
	border-radius: 50%;
	background: rgba(246, 197, 29, 0.2);
	z-index: 5;
	pointer-events: none;
}

.gkfc-cb__target[data-outcome='hit'] {
	background: var(--fz-ok);
	border-color: #d8ffe9;
	box-shadow: 0 0 22px rgba(62, 207, 126, 0.8);
}

.gkfc-cb__power {
	position: relative;
	height: 12px;
	margin-top: 0.7rem;
	border: 1px solid var(--fz-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
}

.gkfc-cb__power span {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--fz-ok), var(--fz-gold) 65%, var(--fz-bad));
	transition: width 0.06s linear;
}

.gkfc-mg-stage .gkfc-cb__goal.is-hit {
	animation: gkfc-mg-shake 0.5s var(--fz-ease);
	border-color: var(--fz-gold);
}

@keyframes gkfc-mg-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

/* ── 5b. Free-Kick Master — wall + curve control (shared by both engines) ── */

/* Four-man wall — flat stand-in for the 3D buildWall() group. JS writes
   top/height per attempt: standing (feet 0, head FK.WALL_TOP) or the
   seed-derived freekickWall() leap line; transition animates the jump. */
.gkfc-fk__wall {
	position: absolute;
	left: 25%;
	width: 50%;
	top: 22%;
	height: 78%;
	z-index: 3;
	pointer-events: none;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px 6px 3px 3px;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 25%),
		linear-gradient(180deg, #46618a 0 62%, #17223a 62% 86%, #d9dee8 86% 100%);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
	transition: top 0.24s ease-out, height 0.24s ease-out;
}

/* CURVE row — the range slider both engines render (2D fallback + 3D
   shell in mg-3d.js); accent-color paints the thumb/fill. */
.gkfc-fk__curve {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 0.65rem;
}

.gkfc-fk__curve-lbl {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.65);
}

.gkfc-fk__curve-slider {
	flex: 1;
	height: 22px;
	margin: 0;
	accent-color: var(--fz-gold);
	cursor: pointer;
}

.gkfc-fk__curve-val {
	min-width: 3.4ch;
	text-align: right;
	font-size: 0.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--fz-gold);
}

/* ── 6. Rotate-to-portrait overlay (fallback when orientation lock is
       unavailable — spec: friendly message asking the user to rotate) ──── */

.gkfc-mg-rotate { display: none; }

@media (orientation: landscape) and (max-height: 540px) {
	html.gkfc-mg-open .gkfc-mg-rotate {
		display: flex;
		position: absolute;
		inset: 0;
		z-index: 20;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;
		padding: 1.6rem;
		text-align: center;
		background:
			radial-gradient(120% 80% at 50% 0%, rgba(131, 29, 33, 0.5) 0%, rgba(255, 255, 255, 0) 65%),
			var(--fz-bg-elev, #121014);
	}

	/* Block gameplay while landscape. */
	html.gkfc-mg-open .gkfc-mg-stage__panel { visibility: hidden; }
	html.gkfc-mg-open .gkfc-mg-rotate { visibility: visible; }
}

.gkfc-mg-rotate__ico {
	font-size: 2.6rem;
	line-height: 1;
	animation: gkfc-mg-tilt 2s ease-in-out infinite;
}

@keyframes gkfc-mg-tilt {
	0%, 55%, 100% { transform: rotate(0deg); }
	70%, 85%      { transform: rotate(-90deg); }
}

.gkfc-mg-rotate__t {
	margin: 0;
	color: #fff;
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: clamp(1.2rem, 6vw, 1.6rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gkfc-mg-rotate__s {
	margin: 0;
	max-width: 34ch;
	color: var(--fz-muted);
	font-size: 0.86rem;
	line-height: 1.5;
}

/* ── 7. Responsive & reduced motion ─────────────────────────────────────── */

@media (max-width: 640px) {
	.gkfc-fzd-mg .gkfc-mg-cards { grid-template-columns: 1fr; }
	.gkfc-mg-card { flex-wrap: wrap; }
	.gkfc-mg-card__cta { margin-left: auto; }
	.gkfc-pen__goal,
	.gkfc-cb__goal { max-height: 36vh; }
}

@media (prefers-reduced-motion: reduce) {
	.gkfc-mg-card,
	.gkfc-mg-icon,
	.gkfc-mg-spinner,
	.gkfc-mg-flash,
	.gkfc-pen__aim,
	.gkfc-fk__wall,
	.gkfc-mg-rotate__ico,
	.gkfc-mg-stage .gkfc-cb__goal.is-hit {
		animation: none !important;
		transition: none !important;
	}
}

/* ── v1.22.1 — experimental mode notices ── */

.gkfc-mg-exp {
	margin: 0.55rem 0 0.15rem;
	padding: 0.55rem 0.75rem;
	border: 1px dashed var(--fz-gold-line);
	border-radius: 10px;
	background: var(--fz-gold-soft);
	color: var(--fz-gold);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.gkfc-mg-exp-chip {
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--fz-gold-line);
	border-radius: 999px;
	background: var(--fz-gold-soft);
	color: var(--fz-gold);
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.09em;
}

.gkfc-mg-hud__chip[hidden] { display: none; }

.gkfc-mg-end__pts.is-exp {
	color: var(--fz-muted);
	font-size: clamp(1rem, 4.5vw, 1.3rem);
	letter-spacing: 0.03em;
}

/* ── v1.23.0 — 3D engine shell (Three.js) ───────────────────────────────────
   mg-3d.js renders a WebGL canvas that fills the field; the shared
   instruction/shoot-button/power-bar chrome below is the SAME markup the
   CSS-2D engines use, so only the stage area changes between engines. */

.gkfc-mg-3d {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
}

.gkfc-mg-3d__view {
	position: relative;
	flex: 1 1 auto;
	min-height: 42vh;
	overflow: hidden;
	border: 1px solid var(--fz-line);
	border-radius: var(--fz-r-md, 14px);
	background: #101c14;
	touch-action: none;
	overscroll-behavior: contain;
}

.gkfc-mg-3d__cv {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
}

/* Outcome flash — mirrors .gkfc-mg-flash colors per outcome. */
.gkfc-mg-3d__flash {
	position: absolute;
	left: 50%;
	top: 34%;
	z-index: 2;
	transform: translate(-50%, -50%);
	max-width: 92%;
	color: #fff;
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: clamp(1.3rem, 7vw, 2rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1.15;
	text-align: center;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

.gkfc-mg-3d__flash[hidden] { display: none; }

.gkfc-mg-3d__flash[data-outcome='goal'],
.gkfc-mg-3d__flash[data-outcome='hit'] { color: var(--fz-gold); }

.gkfc-mg-3d__flash[data-outcome='save'] { color: #8fd0ff; }

.gkfc-mg-3d__flash[data-outcome='miss'],
.gkfc-mg-3d__flash[data-outcome='over'],
.gkfc-mg-3d__flash[data-outcome='under'],
.gkfc-mg-3d__flash[data-outcome='wide'] { color: var(--fz-bad); }

/* The shared power bar sits directly under the canvas in 3D crossbar. */
.gkfc-mg-3d .gkfc-cb__power { margin-top: 0.65rem; }

/* --- v1.25.0 - Leaderboard block (section page, phone-only) ------------- */

.gkfc-mg-lb {
	margin: 1rem 0 0;
	padding: 0.9rem 0.85rem 1rem;
	border: 1px solid var(--fz-line);
	border-radius: var(--fz-r-md, 14px);
	background:
		radial-gradient(120% 90% at 50% 0%, var(--fz-gold-soft) 0%, rgba(255, 255, 255, 0) 65%),
		rgba(255, 255, 255, 0.02);
}

.gkfc-mg-lb__head h4 {
	margin: 0;
	color: #fff;
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gkfc-mg-lb__head p {
	margin: 0.25rem 0 0;
	color: var(--fz-muted);
	font-size: 0.78rem;
	line-height: 1.45;
}

.gkfc-mg-lb__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.75rem 0 0.6rem;
}

.gkfc-mg-lb__tab {
	appearance: none;
	padding: 0.38rem 0.75rem;
	border: 1px solid var(--fz-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--fz-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.gkfc-mg-lb__tab.is-on,
.gkfc-mg-lb__tab[aria-selected='true'] {
	border-color: var(--fz-gold);
	background: var(--fz-gold-soft);
	color: var(--fz-gold);
}

.gkfc-mg-lb__list { min-height: 2.4rem; }

.gkfc-mg-lb__empty {
	margin: 0.4rem 0 0;
	color: var(--fz-faint);
	font-size: 0.78rem;
	line-height: 1.5;
}

.gkfc-mg-lb__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.gkfc-mg-lb__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.42rem 0.55rem;
	border: 1px solid transparent;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.025);
	font-size: 0.82rem;
}

.gkfc-mg-lb__row.is-me {
	border-color: var(--fz-gold);
	background: var(--fz-gold-soft);
}

.gkfc-mg-lb__rank {
	flex: 0 0 1.6rem;
	color: var(--fz-faint);
	font-size: 0.72rem;
	font-weight: 800;
	text-align: center;
}

.gkfc-mg-lb__row:nth-child(1) .gkfc-mg-lb__rank { color: var(--fz-gold); }
.gkfc-mg-lb__row:nth-child(2) .gkfc-mg-lb__rank { color: #cfd6de; }
.gkfc-mg-lb__row:nth-child(3) .gkfc-mg-lb__rank { color: #d9a066; }

.gkfc-mg-lb__name {
	flex: 1 1 auto;
	overflow: hidden;
	color: var(--fz-text, #fff);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gkfc-mg-lb__name i {
	color: var(--fz-gold);
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 700;
}

.gkfc-mg-lb__best {
	flex: 0 0 auto;
	color: var(--fz-gold);
	font-size: 0.8rem;
	font-weight: 800;
}

.gkfc-mg-lb__me {
	margin: 0.65rem 0 0;
	color: var(--fz-muted);
	font-size: 0.75rem;
	text-align: center;
}

.gkfc-mg-lb__me b { color: var(--fz-gold); font-weight: 800; }

/* --- v1.25.0 - First-play tutorial card (stage overlay) ---------------- */

.gkfc-mg-tut {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.4rem 1.2rem;
	background: rgba(10, 8, 9, 0.95);
	backdrop-filter: blur(5px);
}

.gkfc-mg-tut[hidden] { display: none; }

.gkfc-mg-tut__card {
	width: 100%;
	max-width: 24rem;
	text-align: center;
}

.gkfc-mg-tut__title {
	margin: 0 0 0.9rem;
	color: #fff;
	font-family: var(--gkfc-font-heading, var(--fz-font-head));
	font-size: clamp(1.25rem, 6vw, 1.6rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.gkfc-mg-tut__steps {
	list-style: none;
	margin: 0 0 1.2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	text-align: left;
}

.gkfc-mg-tut__steps li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	color: var(--fz-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.gkfc-mg-tut__ico {
	flex: 0 0 auto;
	font-size: 1.25rem;
	line-height: 1.2;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}