/* =========================================================
   The playground: alien hide and seek, plus the destroy
   sequence and its deeply unhurried loading bar.
   Prefix: .gc-
   ========================================================= */

/* ---------- Icons ---------- */
.gc-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	color: inherit;
	image-rendering: pixelated;
}

/* ---------- The alien ---------- */
.gc-alien {
	position: absolute;
	z-index: 400;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fp-lime, #39ff14);
	--gc-icon-accent: var(--fp-yellow, #ffee00);
	cursor: crosshair;
	opacity: 0.34;
	filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.5));
	transition: opacity 0.2s;
	animation: gc-alien-idle 2.4s steps(2) infinite;
}
.gc-alien .gc-icon { width: 100%; height: 100%; display: block; }
.gc-alien:hover,
.gc-alien:focus-visible { opacity: 1; outline: none; }
.gc-alien:focus-visible { outline: 2px dashed var(--fp-yellow, #ffee00); outline-offset: 3px; }

@keyframes gc-alien-idle {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}

/* Caught: flash, spin off, vanish. */
.gc-alien.is-caught {
	animation: gc-alien-caught 0.55s steps(6) forwards;
	pointer-events: none;
}
@keyframes gc-alien-caught {
	0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
	20%  { transform: translate(0, -14px) scale(1.5) rotate(20deg); opacity: 1; color: #fff; }
	100% { transform: translate(70px, -90px) scale(0.2) rotate(220deg); opacity: 0; }
}

/* ---------- Hunt counter ---------- */
.gc-hud {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 8500;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	background: #000;
	border-left: 1px solid var(--fp-lime, #39ff14);
	border-bottom: 1px solid var(--fp-lime, #39ff14);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 18px;
	letter-spacing: 0.08em;
	color: var(--fp-lime, #39ff14);
	text-transform: uppercase;
}
.gc-hud.is-on { display: flex; }
.gc-hud .gc-icon { width: 16px; height: 16px; --gc-icon-accent: var(--fp-yellow, #ffee00); }
.gc-hud .count { color: #fff; }
.gc-hud button {
	background: none;
	border: 1px solid currentColor;
	color: inherit;
	font: inherit;
	padding: 0 6px;
	cursor: pointer;
}
.gc-hud button:hover { color: var(--fp-yellow, #ffee00); }
.admin-bar .gc-hud { top: 32px; }
@media (max-width: 782px) { .admin-bar .gc-hud { top: 46px; } }

/* ---------- Shared Win95 dialog ---------- */
.gc-dlg {
	position: fixed;
	z-index: 9600;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(460px, 90vw);
	background: #c0c0c0;
	color: #000;
	border: 2px solid #fff;
	border-right-color: #000;
	border-bottom-color: #000;
	box-shadow: 0 0 0 1px #000, 10px 10px 0 rgba(0, 0, 0, 0.6);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 20px;
}
.gc-dlg[hidden] { display: none !important; }
.gc-dlg .title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3px 4px 3px 8px;
	background: linear-gradient(90deg, #000080, #1084d0);
	color: #fff;
	letter-spacing: 0.05em;
}
.gc-dlg .title.danger { background: linear-gradient(90deg, #aa0000, #ff4400); }
.gc-dlg .title .btn {
	width: 20px; height: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #c0c0c0; color: #000;
	border: 1px solid #fff; border-right-color: #000; border-bottom-color: #000;
	font-size: 15px; line-height: 1; cursor: pointer;
}
.gc-dlg .body { display: flex; gap: 14px; padding: 18px; align-items: flex-start; line-height: 1.3; }
.gc-dlg .icon {
	flex: none; width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	background: #000080; color: #fff; border-radius: 50%; font-weight: 700;
}
.gc-dlg .icon.err { background: #ff2b2b; }
.gc-dlg .icon.alien { background: #000; color: #39ff14; border-radius: 0; }
.gc-dlg .icon.alien .gc-icon { width: 26px; height: 26px; --gc-icon-accent: #ffee00; }
.gc-dlg .msg strong { display: block; font-size: 23px; margin-bottom: 4px; }
.gc-dlg .actions { display: flex; gap: 10px; padding: 0 18px 18px; flex-wrap: wrap; }
.gc-dlg .actions button,
.gc-dlg .actions a {
	padding: 5px 20px;
	background: #c0c0c0; color: #000; text-decoration: none;
	border: 2px solid #fff; border-right-color: #000; border-bottom-color: #000;
	font-family: inherit; font-size: 19px; cursor: pointer;
}
.gc-dlg .actions button:active,
.gc-dlg .actions a:active { border-color: #000 #fff #fff #000; }

/* Progress checklist inside the "found one" dialog.
   The theme's global list styling is assertive, so this resets hard:
   without it the marker keeps its own line and a stray bullet shows. */
.gc-found-list,
.gc-found-list li { list-style: none !important; }
.gc-found-list {
	margin: 10px 0 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.35;
}
.gc-found-list li {
	display: flex;
	gap: 8px;
	align-items: baseline;
	margin: 0;
	padding: 0;
	text-indent: 0;
}
.gc-found-list li::before,
.gc-found-list li.done::before {
	position: static;
	flex: none;
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	color: inherit;
	font: inherit;
}
.gc-found-list li::before { content: '[ ]'; }
.gc-found-list li.done::before { content: '[x]'; }
.gc-found-list li.done { color: #555; }
.gc-found-list li::marker { content: ''; }
.gc-found-list a { color: #000080; }
.gc-found-list a:hover { color: #ff00d4; }

/* ---------- Destruction ---------- */
.gc-doomed {
	animation: gc-shake 0.11s steps(4) infinite;
	overflow: hidden !important;
}
@keyframes gc-shake {
	0%, 100% { transform: translate(0, 0); }
	25%  { transform: translate(-7px, 4px); }
	50%  { transform: translate(6px, -5px); }
	75%  { transform: translate(-4px, -3px); }
}
.gc-doomed .fp-shell,
.gc-doomed .svc-shell {
	animation: gc-hue 0.7s steps(5) infinite;
}
@keyframes gc-hue {
	0%   { filter: hue-rotate(0deg); }
	50%  { filter: hue-rotate(180deg) invert(0.15); }
	100% { filter: hue-rotate(360deg); }
}

/* The falling debris: characters torn off the page */
.gc-debris {
	position: fixed;
	z-index: 9400;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 22px;
	color: var(--fp-lime, #39ff14);
	pointer-events: none;
	animation: gc-fall linear forwards;
}
@keyframes gc-fall {
	to { transform: translateY(110vh) rotate(220deg); opacity: 0; }
}

/* ---------- BSOD ---------- */
.gc-bsod {
	position: fixed;
	inset: 0;
	z-index: 9700;
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: 8vh clamp(20px, 8vw, 120px);
	background: #0000aa;
	color: #fff;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: clamp(15px, 2vw, 21px);
	line-height: 1.45;
}
.gc-bsod.is-on { display: flex; }
.gc-bsod h2 {
	align-self: center;
	margin: 0 0 10px;
	padding: 0 14px;
	background: #c0c0c0;
	color: #0000aa;
	font-family: inherit;
	font-size: clamp(18px, 2.4vw, 26px);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
.gc-bsod p { margin: 0; }
.gc-bsod .err { color: #ffee00; }
.gc-bsod .key { margin-top: 14px; }
.gc-bsod .key::after { content: '_'; animation: gc-blink 1s steps(2) infinite; }
@keyframes gc-blink { 50% { opacity: 0; } }

/* ---------- Reboot / loading bar ---------- */
.gc-boot {
	position: fixed;
	inset: 0;
	z-index: 9800;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 22px;
	padding: 20px;
	background: #000;
	color: var(--fp-lime, #39ff14);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 20px;
	text-align: center;
}
.gc-boot.is-on { display: flex; }

.gc-boot .brand { letter-spacing: 0.2em; text-transform: uppercase; color: #fff; }
.gc-boot .task { min-height: 1.4em; letter-spacing: 0.04em; }
.gc-boot .file {
	min-height: 1.4em;
	color: #6f9e6f;
	font-size: 17px;
	max-width: 90vw;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* The bar itself: chunky segments in a sunken well, as intended */
.gc-boot .well {
	width: min(560px, 86vw);
	padding: 3px;
	background: #000;
	border: 2px solid #808080;
	border-right-color: #fff;
	border-bottom-color: #fff;
}
.gc-boot .bar {
	display: flex;
	gap: 2px;
	height: 22px;
	overflow: hidden;
}
.gc-boot .bar i {
	flex: 0 0 14px;
	background: #000080;
	box-shadow: inset -1px -1px 0 #000040, inset 1px 1px 0 #4040c0;
}
.gc-boot .pct { color: #fff; font-size: 22px; }
.gc-boot .hint { color: #4a6a4a; font-size: 16px; letter-spacing: 0.08em; }

/* The stall at 97%: everything holds its breath */
.gc-boot.is-stalled .task { color: var(--fp-yellow, #ffee00); }
.gc-boot.is-stalled .pct { animation: gc-blink 1.1s steps(2) infinite; }

@media (max-width: 640px) {
	.gc-boot .bar i { flex-basis: 10px; }
	.gc-alien { width: 28px; height: 28px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.gc-alien,
	.gc-doomed,
	.gc-doomed .fp-shell,
	.gc-doomed .svc-shell,
	.gc-debris,
	.gc-bsod .key::after,
	.gc-boot.is-stalled .pct {
		animation: none !important;
	}
	.gc-alien.is-caught { opacity: 0; transition: opacity 0.2s; }
}

/* ---------- Icon placement in the layouts ---------- */
.fp-do__icon {
	width: 40px;
	height: 40px;
	margin: 8px 0 2px;
	color: var(--fp-lime, #39ff14);
	--gc-icon-accent: var(--fp-magenta, #ff00d4);
}
.fp-do li:hover .fp-do__icon { color: var(--fp-cyan, #00f0ff); }

.fp-card__icon,
.svc-card__icon {
	display: block;
	width: 34px;
	height: 34px;
	margin: 10px 0 0;
	color: var(--fp-lime, #39ff14);
	--gc-icon-accent: var(--fp-yellow, #ffee00);
	transition: color 0.15s;
}
.fp-card:hover .fp-card__icon,
.svc-card:hover .svc-card__icon { color: var(--fp-magenta, #ff00d4); }

.svc-hero__icon {
	display: block;
	width: 56px;
	height: 56px;
	margin: 6px 0 10px;
	color: var(--svc-lime, #39ff14);
	--gc-icon-accent: var(--svc-magenta, #ff00d4);
	filter: drop-shadow(0 0 10px rgba(57, 255, 20, 0.4));
}

/* ---------- Classified ---------- */
.gc-classified .svc-window > .title { background: linear-gradient(90deg, #aa0000, #ff4400); }
.gc-classified .svc-eyebrow { color: var(--svc-red, #ff2b2b); }