/* Pinball background layer: behind everything, never intercepts the pointer. */
#vp-game-canvas {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .25; /* preview: whole game layer at quarter strength */
}

/* quick full-screen pulses when the ball drains */
#vp-drain-flash {
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
	background: #8b5cf6; /* site violet, not white */
	opacity: 0;
	transition: opacity 45ms linear;
}

/* Page content rides above the ball; the flippers sit higher than the footer
   physically (game.js measures the footer and lifts them), not via stacking. */
.wrap, footer { position: relative; z-index: 1; }

/* Hit-glow overlay: full-opacity twin of the game canvas; items that were just
   hit are redrawn here so they composite more opaque than the dimmed layer. */
#vp-game-glow {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Ambient halo: a soft violet bloom hugging every drawn shape's silhouette.
   One GPU pass on the whole layer — NOT per-item canvas shadows (too slow). */
#vp-game-canvas, #vp-game-glow {
	filter: drop-shadow(0 0 8px rgba(139, 92, 246, .35));
}

/* Nudge: the whole cabinet jolts — content and playfield move as one. */
header, .wrap, footer, #vp-game-canvas, #vp-game-glow {
	transform: translate(var(--vp-nudge-x, 0px), var(--vp-nudge-y, 0px));
}

/* The sticky sort bar floats over rows while scrolling — translucency reads as a
   glitch there, so it keeps its original opaque colors. */
.sortbar { background: #1a1927; border-color: #26243a; }
.sortbar .sb-scores button { border-color: #26243a; }
.sortbar .viewtoggle { background: #08070d; border-color: #26243a; }
.sortbar .vbtn.on { background: #1a1927; }

/*
 * See-through playfield: every surface color is re-derived as
 * C_new = 2*C_old - bg at 50% alpha, so composited over the page background each
 * element looks EXACTLY the color it was before — but the ball now shows through.
 * Loaded only on the front page (this stylesheet is front-page-only), so the rest
 * of the site keeps its opaque originals.
 */
:root {
	--surface: rgba(28, 27, 40, .5);     /* was #14131d */
	--surface-2: rgba(40, 39, 60, .5);   /* was #1a1927 */
	--line: rgba(64, 61, 98, .5);        /* was #26243a */
	--line-lit: rgba(106, 99, 174, .5);  /* was #3b3760 */
	--bg-deep: rgba(4, 3, 8, .5);        /* was #08070d */
}

/* List rows (both views) and the letter rail read better a touch more solid:
   72% alpha, with the fill colors pulled ~10% darker than the exact
   brightness-preserving math — the glowing game art behind them adds light,
   so exact preservation still read as brighter. */
.row, .card, nav.rail {
	--surface: rgba(20, 19, 29, .72);
	--surface-2: rgba(28, 27, 42, .72);
	--line: rgba(42, 40, 65, .72);
	--line-lit: rgba(68, 63, 111, .72);
}


/* H-key game mode: the listing steps aside, the machine steps forward.
   opacity — NOT visibility, NOT display. display collapses the page height
   (the machine is anchored to it) and visibility forces a style recalc of
   every descendant of the huge listing (seconds of stall). opacity keeps
   layout identical and just composites the prebuilt layer away. */
.wrap.vp-wrap-hidden { opacity: 0; pointer-events: none; }
/* the machine's outline takes the listing's place — same border color as the rows */
#vp-game-frame {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 1;
	pointer-events: none;
	border: 1px solid var(--line);
	display: none;
}
#vp-game-frame.vp-on { display: block; }
#vp-game-canvas.vp-game-on { opacity: .38; }

/* E-key editor mode: the canvas comes forward and takes the mouse.
 * Classes sit on the elements themselves, NOT on body — a body class flip
 * invalidates styling for the entire page and can stall for seconds. */
#vp-game-canvas.vp-edit-on {
	pointer-events: auto;
	z-index: 5;
	opacity: .9;
	cursor: move;
}

/* Header flipper button + game-controls modal. */
#vp-keys-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
	cursor: pointer;
}
/* hover glow matches the Advanced button */
#vp-keys-btn:hover { background: #8b5cf62a; border-color: #8b5cf680; }
#vp-keys-btn img {
	width: 20px;
	height: auto;
	display: block;
	/* the raw art is dull (#232330/#6a64a4) — push it into the bright violet
	   family the Advanced button lives in */
	filter: brightness(1.5) saturate(1.8) hue-rotate(8deg);
	transform-origin: 15% 55%; /* the flipper's pivot */
	transition: transform .12s ease-out;
}
#vp-keys-btn:hover img { transform: rotate(-25deg); } /* flick it up */
#vp-keys-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(5, 4, 10, .55);
	cursor: pointer; /* the whole overlay is one big "close" target */
}
#vp-keys-modal.on { display: flex; align-items: center; justify-content: center; }
#vp-keys-modal .vp-km-box {
	width: 320px;
	padding: 14px 18px 12px;
	background: rgba(18, 18, 28, .96);
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 13px;
	color: #cfcfe0;
}
#vp-keys-modal .vp-ep-head { font-weight: 600; color: #8b5cf6; margin-bottom: 8px; }
#vp-keys-modal .vp-eh-row { display: flex; gap: 10px; margin: 5px 0; }
#vp-keys-modal .vp-eh-k { color: #8b5cf6; font-weight: 600; min-width: 64px; flex-shrink: 0; }
#vp-keys-modal .vp-km-hint { margin-top: 10px; font-size: 11px; color: #5d5a75; text-align: center; }

/* Save toast, bottom-center. */
#vp-toast {
	position: fixed;
	left: 50%;
	bottom: 34px;
	transform: translate(-50%, 12px);
	z-index: 130;
	max-width: 480px;
	padding: 10px 18px;
	background: rgba(18, 18, 28, .96);
	border: 1px solid #8b5cf680;
	border-radius: 9px;
	font-size: 13px;
	color: #e6e2f7;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
#vp-toast.on { opacity: 1; transform: translate(-50%, 0); }
#vp-toast.bad { border-color: #e2574c; color: #ffd9d5; }

/* Editor physics panel, top right. */
#vp-editor-panel {
	display: none;
	position: fixed;
	top: 26px;
	right: 14px;
	z-index: 60;
	width: 300px;
	padding: 10px 14px 12px;
	background: rgba(18, 18, 28, .92);
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 12px;
	color: #cfcfe0;
}
#vp-editor-panel.vp-edit-on { display: block; }
#vp-editor-panel .vp-ep-head {
	font-weight: 600;
	color: #8b5cf6;
	margin-bottom: 8px;
}
#vp-editor-panel .vp-ep-row {
	display: grid;
	grid-template-columns: 92px 1fr 58px;
	gap: 8px;
	align-items: center;
	margin: 5px 0;
}
#vp-editor-panel .vp-ep-row input[type="range"] {
	accent-color: #8b5cf6;
	min-width: 0;
}
#vp-editor-panel .vp-ep-row input[type="number"] {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--line);
	border-radius: 5px;
	color: inherit;
	font-size: 11px;
	padding: 2px 4px;
}

#vp-ep-restore {
	margin-top: 8px;
	width: 100%;
	padding: 4px 0;
	background: rgba(139, 92, 246, .18);
	border: 1px solid var(--line);
	border-radius: 6px;
	color: inherit;
	font-size: 11px;
	cursor: pointer;
}
#vp-ep-restore:hover { background: rgba(139, 92, 246, .35); }

/* Editor key (legend), left side — same styling family as the panel. */
#vp-editor-help {
	display: none;
	position: fixed;
	top: 26px;
	left: 14px;
	z-index: 60;
	width: 264px;
	padding: 10px 14px 12px;
	background: rgba(18, 18, 28, .92);
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 12px;
	color: #cfcfe0;
}
#vp-editor-help.vp-edit-on { display: block; }

/* Parts palette, bottom-left — click a row to drop that part mid-screen. */
#vp-editor-parts {
	display: none;
	position: fixed;
	bottom: 26px;
	left: 14px;
	z-index: 60;
	width: 264px;
	padding: 10px 14px 12px;
	background: rgba(18, 18, 28, .92);
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 12px;
	color: #cfcfe0;
}
#vp-editor-parts.vp-edit-on { display: block; }
#vp-editor-parts .vp-pp-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 3px 0;
	padding: 2px 0;
}
#vp-editor-parts .vp-pp-row img {
	width: 30px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}
#vp-editor-parts .vp-pp-row span { flex: 1; }
#vp-editor-parts .vp-pp-add {
	min-width: 34px;
	padding: 2px 6px;
	background: rgba(139, 92, 246, .18);
	border: 1px solid var(--line);
	border-radius: 6px;
	color: #cfcfe0;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
}
#vp-editor-parts .vp-pp-add:hover { background: rgba(139, 92, 246, .4); }
#vp-editor-help .vp-eh-row {
	display: flex;
	gap: 8px;
	margin: 4px 0;
}
#vp-editor-help .vp-eh-k {
	color: #8b5cf6;
	font-weight: 600;
	min-width: 38px;
	flex-shrink: 0;
}