/* @tunnel-grandfather: legacy/admin/game CSS — selectors are stable and page-scoped; registry conflicts are cross-page false positives; ID selectors intentional and working; refactor risk exceeds value. W3 2026-10-08. */
/* B"H — awp-polish.css
 * Awtsmoos Pages cinematic polish layer (additive only).
 * Every rule below is a NEW `.awp-*` class pages opt into; nothing here
 * restyles existing selectors. Load AFTER page stylesheets so the
 * cinematic treatments win where applied.
 *
 * Physics: 120ms controls / 220ms surfaces. All motion is gated behind
 * prefers-reduced-motion; blur is softened under prefers-reduced-transparency.
 */

:root {
	--awp-bg-0: #050914;
	--awp-bg-1: #0a1322;
	--awp-cyan: #7bdcff;
	--awp-cyan-soft: rgba(123, 220, 255, .85);
	--awp-amber: #ffc46b;
	--awp-glass: rgba(255, 255, 255, .055);
	--awp-line: rgba(255, 255, 255, .08);
	--awp-line-strong: rgba(255, 255, 255, .14);
	--awp-text: #eef6ff;
	--awp-muted: rgba(214, 232, 248, .62);
	--awp-ease-control: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- page backdrop ---------- */
.awp-page {
	min-height: 100dvh;
	color: var(--awp-text);
	background:
		radial-gradient(52rem 30rem at 12% -6%, rgba(123, 220, 255, .09), transparent 60%),
		radial-gradient(44rem 28rem at 88% 108%, rgba(38, 92, 168, .16), transparent 62%),
		radial-gradient(120% 90% at 50% 0%, #0b1526 0%, var(--awp-bg-0) 58%, #03060c 100%);
	background-color: var(--awp-bg-0);
}

/* ultra-low-opacity grain + vignette, non-interactive */
.awp-page::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.awp-page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147482999;
	pointer-events: none;
	background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, .42) 100%);
}

/* centered narrow flow (donate / logout style pages) */
.awp-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: max(1.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}
.awp-narrow {
	width: min(26rem, 100%);
	text-align: center;
}

/* ---------- glass panels ---------- */
.awp-panel,
.awp-hero {
	position: relative;
	border: 1px solid var(--awp-line);
	border-radius: 1.1rem;
	background: linear-gradient(165deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02) 46%, rgba(10, 20, 38, .32));
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .09),
		0 18px 48px rgba(0, 0, 0, .5),
		0 3px 10px rgba(0, 0, 0, .38);
}
.awp-hero {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	overflow: clip;
}
.awp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background:
		radial-gradient(26rem 14rem at 18% 0%, rgba(123, 220, 255, .14), transparent 65%),
		radial-gradient(20rem 12rem at 85% 110%, rgba(255, 196, 107, .06), transparent 60%);
}
.awp-panel {
	padding: clamp(1.1rem, 3vw, 1.75rem);
}

/* ---------- type ---------- */
.awp-eyebrow {
	margin: 0 0 .6rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--awp-cyan-soft);
}
.awp-eyebrow-amber { color: rgba(255, 196, 107, .9); }
.awp-title-glow {
	text-shadow:
		0 0 26px rgba(123, 220, 255, .42),
		0 2px 14px rgba(0, 0, 0, .65);
	letter-spacing: .01em;
}
.awp-muted { color: var(--awp-muted); }

/* ---------- tactile-glass inputs ---------- */
.awp-input,
.awp-select,
.awp-textarea {
	min-height: 44px;
	width: 100%;
	padding: .65rem .9rem;
	color: var(--awp-text);
	font: inherit;
	border: 1px solid var(--awp-line-strong);
	border-radius: .7rem;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
		rgba(6, 12, 24, .55);
	box-shadow:
		inset 0 2px 8px rgba(0, 0, 0, .42),
		inset 0 1px 0 rgba(255, 255, 255, .06);
	transition: border-color 120ms var(--awp-ease-control), box-shadow 120ms var(--awp-ease-control);
}
.awp-input::placeholder { color: rgba(214, 232, 248, .38); }
.awp-input:focus-visible,
.awp-select:focus-visible,
.awp-textarea:focus-visible {
	outline: none;
	border-color: var(--awp-cyan);
	box-shadow:
		inset 0 2px 8px rgba(0, 0, 0, .42),
		0 0 0 2px rgba(123, 220, 255, .28),
		0 0 20px rgba(123, 220, 255, .28);
}

/* ---------- buttons ---------- */
.awp-btn,
.awp-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;
	padding: .7rem 1.35rem;
	border-radius: .8rem;
	font: inherit;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform 120ms var(--awp-ease-control),
		box-shadow 120ms var(--awp-ease-control),
		background-color 120ms var(--awp-ease-control),
		border-color 120ms var(--awp-ease-control);
}
.awp-btn {
	color: #051019;
	border: 1px solid rgba(255, 255, 255, .35);
	background: linear-gradient(135deg, #a8ecff 0%, var(--awp-cyan) 55%, #4fb8e8 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 6px 22px rgba(123, 220, 255, .32),
		0 2px 6px rgba(0, 0, 0, .4);
}
.awp-btn:hover {
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 10px 30px rgba(123, 220, 255, .45),
		0 3px 8px rgba(0, 0, 0, .4);
}
.awp-btn:active { transform: translateY(0); }
.awp-btn-ghost {
	color: var(--awp-text);
	border: 1px solid var(--awp-line-strong);
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
	-webkit-backdrop-filter: blur(12px) saturate(130%);
	backdrop-filter: blur(12px) saturate(130%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 14px rgba(0, 0, 0, .35);
}
.awp-btn-ghost:hover {
	transform: translateY(-1px);
	border-color: rgba(123, 220, 255, .5);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .1),
		0 0 18px rgba(123, 220, 255, .22),
		0 6px 18px rgba(0, 0, 0, .4);
}
.awp-btn:focus-visible,
.awp-btn-ghost:focus-visible {
	outline: 2px solid var(--awp-cyan);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(123, 220, 255, .22), 0 0 22px rgba(123, 220, 255, .35);
}

/* ---------- avatar glow ring (profile) ---------- */
.awp-avatar-ring {
	position: relative;
	box-shadow:
		0 0 0 2px rgba(123, 220, 255, .55),
		0 0 26px rgba(123, 220, 255, .35),
		inset 0 2px 10px rgba(255, 255, 255, .18);
}

/* ---------- staggered entrances ---------- */
@keyframes awp-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}
.awp-entrance {
	opacity: 0;
	animation: awp-rise .5s var(--awp-ease-control) forwards;
	animation-delay: var(--awp-d, 0s);
}

/* ---------- ambient glow blob (opt-in decor) ---------- */
.awp-ambient {
	position: absolute;
	inset: auto;
	width: 22rem;
	height: 22rem;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(70px);
	opacity: .5;
	background: radial-gradient(circle, rgba(123, 220, 255, .22), transparent 70%);
}

/* ---------- reduced motion / transparency ---------- */
@media (prefers-reduced-motion: reduce) {
	.awp-entrance { opacity: 1; animation: none; transform: none; }
	.awp-btn, .awp-btn-ghost,
	.awp-input, .awp-select, .awp-textarea { transition: none; }
	.awp-btn:hover, .awp-btn-ghost:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
	.awp-panel, .awp-hero, .awp-btn-ghost {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: #0a1424;
	}
	.awp-page::after { display: none; }
}

/* @tunnel-interactive-states: auto-generated by css-guarantee */
.awp-btn-ghost:active {
	transform: scale(0.98);
}
