/*
 * WELLFALL - "SIGNAL BREACH" intermission minigame skin.
 *
 * Owned by the minigame package. Deliberately self-contained:
 *
 *  - it declares its own palette on `:root` with `--wfmg-` prefixed names, so
 *    loading or dropping this file cannot shift a single variable that
 *    `styles.css` or `ui.css` depends on;
 *  - every rule is scoped under `.wf-minigame`, the class of the overlay
 *    wrapper this package mounts. Nothing here can reach `#game-canvas`,
 *    `#app`, `#ui-root` or any other element the 3D game owns;
 *  - it never sets `width`, `height`, `max-width` or `max-height` on the
 *    canvas. That last point is not cosmetic: melonJS' `onresize` does
 *    `parseInt(getComputedStyle(canvas).maxWidth, 10) || Infinity`, so a
 *    `max-width: 100%` here would be read as an absurd 100px cap and squash the
 *    rendered playfield. melonJS owns the canvas' inline `style.width/height`;
 *    this file only positions that box.
 *
 * The wrapper is absolutely positioned with `inset: 0` inline by
 * `src/minigame/index.js`, so it fills whichever host it was mounted into
 * (`#minigame-root` in the real game, a plain `<div>` in the dev harness) and
 * the minigame is legible even if this stylesheet is absent.
 */

:root {
	--wfmg-bg: #05060a;
	/* The panel shade. Contract v1 (research/17-wellfall-round2-contract.md section 5)
	   freezes five hex values plus #000/#fff, so the ink is derived: the background with
	   a 2% cyan trace, lifted 4% toward the violet - the same expression
	   styles.css:--ink and src/minigame/sim.js:PALETTE.ink compute. = rgb(11, 14, 24). */
	--wfmg-ink: color-mix(in srgb, color-mix(in srgb, var(--wfmg-cyan) 2%, var(--wfmg-bg)) 96%, var(--wfmg-violet));
	--wfmg-cyan: #38f2e0;
	--wfmg-magenta: #ff3ea5;
	--wfmg-amber: #ffc24a;
	--wfmg-violet: #7a5cff;
	--wfmg-glow: 0 0 24px rgba(56, 242, 224, 0.22), 0 0 64px rgba(122, 92, 255, 0.16);
}

/*
 * The layer itself. Geometry that must survive a missing stylesheet lives
 * inline in JS; this only adds paint and isolation. `contain` keeps the
 * minigame's paint and layout from invalidating the 3D game's layers.
 */
.wf-minigame {
	contain: layout paint style;
	background: var(--wfmg-bg);
	pointer-events: none;
}

.wf-minigame[hidden] {
	display: none;
}

/*
 * Centring without a flex container: a full-bleed inset plus `margin: auto`
 * centres the box at its own inline width/height and - unlike a flex item with
 * the default `flex-shrink: 1` - can never squash it by a rounding pixel.
 */
.wf-minigame > canvas {
	position: absolute;
	inset: 0;
	margin: auto;
	display: block;
	border-radius: 3px;
	box-shadow: var(--wfmg-glow);
	/* the minigame is keyboard-only; never steal pointer input from the game */
	pointer-events: none;
}

/* A quiet fallback notice, used only if the harness ever mounts without JS. */
.wf-minigame.noscript-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wfmg-cyan);
	font: 600 14px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}