/* Error pages (404, unauthorized, missing action/view): sad poring, one message, helpful links */

.fy-oops { display: grid; gap: var(--sp-10); max-width: 860px; margin: 0 auto; padding-top: var(--sp-4); }
.fy-oops__main { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.fy-oops__poring { width: clamp(120px, 26vw, 150px); height: auto; margin-bottom: var(--sp-2); filter: drop-shadow(0 16px 26px rgba(5, 2, 20, .55)); animation: fy-bob 3.2s var(--ease-in-out) infinite; }
.fy-page .fy-oops__main h2 { margin: 0; font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem); }
.fy-oops__text { max-width: 52ch; margin: 0; color: var(--text-2); font-size: var(--fs-lg); }
.fy-oops__url { display: grid; justify-items: center; gap: .4rem; width: 100%; max-width: 100%; margin: var(--sp-2) 0 0; color: var(--text-4); font-size: .85rem; font-weight: 700; }
/* A long or mistyped address wraps as an even, left-aligned block (never a ragged centred column) and is
   capped at four lines. */
.fy-oops__url code {
	display: -webkit-box;
	max-width: min(100%, 36rem);
	padding: .45rem .8rem;
	overflow: hidden;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface-sunken);
	color: var(--text-3);
	font-size: .82rem;
	line-height: 1.5;
	text-align: left;
	word-break: break-all;
}
.fy-oops__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.fy-oops__note { margin: var(--sp-2) 0 0; color: var(--text-3); font-size: .9rem; }
.fy-oops__note a { font-weight: 800; }
.fy-oops__details { width: 100%; max-width: 640px; margin-top: var(--sp-4); border: 1px dashed var(--line-2); border-radius: var(--r-md); text-align: left; }
.fy-oops__details summary { padding: .7rem 1rem; color: var(--text-2); font-weight: 800; cursor: pointer; }
.fy-oops__details dl { display: grid; gap: .6rem; margin: 0; padding: 0 1rem 1rem; }
.fy-oops__details dt { color: var(--text-3); font: 800 .7rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.fy-oops__details dd { margin: .2rem 0 0; overflow-wrap: anywhere; }

/* the rule fades out at both ends instead of stopping on a hard edge over the site background art (wide screens) */
.fy-oops__links { padding-top: var(--sp-8); border-top: 1px solid var(--line); border-image: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent) 1; }
.fy-page .fy-oops__links h3 { margin: 0 0 var(--sp-4); color: var(--text-3); font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.fy-oops__links ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.fy-oops__links li { margin: 0; }
@media (min-width: 720px) {
	.fy-oops__links ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fy-oops-link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	height: 100%;
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--grad-card), var(--surface);
	color: var(--text);
	text-decoration: none;
	transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.fy-oops-link:hover { transform: translateY(-3px); border-color: var(--line-3); color: var(--text); }
.fy-oops-link > span:last-child { display: grid; min-width: 0; }
.fy-oops-link strong { font: 600 1rem/1.25 var(--font-display); }
.fy-oops-link > span:last-child > span { color: var(--text-3); font-size: .84rem; line-height: 1.35; }
.fy-oops-link__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: rgba(140, 87, 248, .16); color: var(--violet-300); }
.fy-oops-link__icon--gold { background: rgba(255, 196, 63, .14); color: var(--gold-300); }
.fy-oops-link__icon--mint { background: rgba(82, 221, 156, .14); color: var(--mint-300); }