/* ---------------------------------------------------------------
   Glass
   Written by the Design tool in the admin area. Anything you type
   here is replaced the next time a design is applied — edit the
   design itself, or switch to "No design" and use style.css.
   Generated 28 Jul 2026, 16:56
   --------------------------------------------------------------- */

:root {
	--bg: #0a0b14;
	--bg-alt: rgba(255, 255, 255, 0.025);
	--bg-card: rgba(255, 255, 255, 0.055);
	--bg-card-hover: rgba(255, 255, 255, 0.09);
	--border: rgba(255, 255, 255, 0.14);
	--border-strong: rgba(255, 255, 255, 0.3);
	--text: #f2f4fb;
	--text-muted: #aeb6cf;
	--text-faint: #727a99;
	--accent: #6aa6ff;
	--accent-bright: #93c1ff;
	--accent-2: #bb90ff;
	--accent-2-bright: #d2b4ff;
	--radius-sm: 14px;
	--radius-md: 20px;
	--radius-lg: 26px;
	--radius-xl: 32px;
	--shadow-md: 0 10px 34px rgba(4, 6, 20, 0.5);
	--shadow-lg: 0 26px 70px rgba(4, 6, 20, 0.62);
	--shadow-glow: 0 24px 60px rgba(106, 166, 255, 0.24);
	--accent-dim: rgba(106, 166, 255, 0.14);
	--accent-glow: rgba(106, 166, 255, 0.45);
	--accent-2-dim: rgba(187, 144, 255, 0.14);
	--accent-2-glow: rgba(187, 144, 255, 0.4);
}

/* A soft aurora for the frost to pick up. Fixed, so it never scrolls away. */
body {
	background:
		radial-gradient(58% 44% at 10% 2%, rgba(58, 90, 200, 0.55) 0%, transparent 62%),
		radial-gradient(52% 40% at 92% 12%, rgba(150, 74, 190, 0.45) 0%, transparent 64%),
		radial-gradient(60% 50% at 50% 104%, rgba(40, 120, 180, 0.36) 0%, transparent 68%),
		var(--bg);
	background-attachment: fixed;
}

/* The violet pinstripe grid belongs to the original design. */
body::before { opacity: 0.35; background-image: none; }

/* Every surface becomes a frosted pane with a lit top edge. */
.navbar,
.bento-cell,
.project-card,
.game-card,
.contact-card,
.about-card,
.contact-form-wrap,
.hero-eyebrow,
.project-embed {
	background: var(--bg-card);
	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	border: 1px solid var(--border);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		var(--shadow-md);
}

.navbar,
.navbar.scrolled { background: rgba(255, 255, 255, 0.07); }

.bento-cell:hover,
.project-card:hover,
.game-card:hover,
.contact-card:hover {
	background: var(--bg-card-hover);
	border-color: var(--border-strong);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		var(--shadow-lg);
}

.btn-ghost {
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary { box-shadow: 0 6px 22px rgba(187, 144, 255, 0.35); }

.tag {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.site-footer {
	background: rgba(255, 255, 255, 0.035);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}