/* ---- Theme tokens: light default, dark via root data-theme ---- */
:root {
	--go-bg: #f6f7fb;
	--go-surface: #ffffff;
	--go-surface-2: #eef1f7;
	--go-line: #dde2ee;
	--go-text: #1a1f2e;
	--go-muted: #5b6478;
	--go-accent: #7c5cff;
	--go-accent-2: #23d3ee;
	--go-grad: linear-gradient(135deg, #7c5cff, #23d3ee);
	--go-badge-bg: #fbbf24;
	--go-badge-fg: #1a1300;
	--go-radius: 14px;
	--go-font: "Roboto", Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
:root[data-theme="dark"] {
	--go-bg: #0c0e14;
	--go-surface: #161a26;
	--go-surface-2: #1f2435;
	--go-line: #2a3047;
	--go-text: #eef1f8;
	--go-muted: #9aa3bd;
	/* Lighter accent in dark mode so links/eyebrows clear WCAG AA (4.5:1) on the dark bg;
	   the base #7c5cff only reaches ~4.46:1. */
	--go-accent: #a78bff;
}

.gamesover-catalog, .widget-body {
	background: var(--go-bg);
	color: var(--go-text);
	font-family: var(--go-font);
	line-height: 1.5;
	margin: 0;
	padding: 24px;
}
/* Standalone /music/ pages: sit in the same centered content column as the rest of the
   site (matches .page-wrap.page-wrap-wide - 52rem), so the section headings, filters,
   grid, and album/song detail all line up with the store and blog pages instead of the
   catalog spanning full width while the h2 headings sat flush-left. 52rem is narrower
   than every inner block cap (1000-1100px), so those blocks fill this column uniformly
   and no per-block width changes are needed. The embeddable .widget-body keeps its own
   full-bleed 24px padding from the rule above. */
.gamesover-catalog {
	max-width: 52rem;
	margin: 0 auto;
	padding: 24px 1.25rem 3rem;
}
.gamesover-catalog * { box-sizing: border-box; }
/* A hidden card must win over .card { display: flex }. Author rules beat the UA
   [hidden] rule, so the genre filter's card.hidden had no effect. Scope the override
   to .card so it doesn't force display:none on other [hidden] elements (e.g. art-play). */
.card[hidden] { display: none !important; }
/* Same gotcha for the album grid: .grid { display: grid } would beat the UA [hidden]
   rule, so the genre filter's album-grid.hidden had no effect. Scope to .album-grid so
   the singles grid is unaffected. The section-title headings (h2) hide without this. */
.album-grid[hidden] { display: none !important; }

.visually-hidden {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- header ---- */
.catalog-header { max-width: 1100px; margin: 0 auto 18px; }
.brand { display: flex; gap: 16px; align-items: center; }
.brand-mark {
	width: 52px; height: 52px; border-radius: 12px; object-fit: cover; display: block;
}
.brand h1 { margin: 0; font-size: 22px; }
.tagline { margin: 2px 0 0; color: var(--go-muted); font-size: 13px; }

/* ---- filters ---- */
.filters { max-width: 1100px; margin: 0 auto 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
	font: inherit; font-size: 12px; color: var(--go-muted); background: var(--go-surface-2);
	border: 1px solid var(--go-line); border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.chip.is-active { color: #0c0e14; background: var(--go-accent-2); border-color: var(--go-accent-2); font-weight: 700; }
.chip:focus-visible { outline: 3px solid var(--go-accent); outline-offset: 2px; }

/* ---- grid + card ---- */
.grid {
	max-width: 1100px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 680px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .grid { grid-template-columns: 1fr; } }

.card {
	background: var(--go-surface); border: 1px solid var(--go-line);
	border-radius: var(--go-radius); overflow: hidden; display: flex; flex-direction: column;
}
.art { position: relative; aspect-ratio: 1 / 1; background: var(--go-surface-2); }
.art-link { display: block; width: 100%; height: 100%; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; align-items: center; }
.badge {
	font-size: 10px; letter-spacing: .07em;
	text-transform: uppercase; background: var(--go-badge-bg); color: var(--go-badge-fg);
	font-weight: 800; padding: 3px 8px; border-radius: 6px;
}
/* Explicit-content advisory: red square "E", the standard marker. */
.badge-explicit {
	background: #d6263b; color: #ffffff; padding: 3px 7px; border-radius: 4px;
	letter-spacing: 0; line-height: 1;
}
.art-play {
	position: absolute; left: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%;
	background: rgba(12,14,20,.72); border: 1px solid rgba(255,255,255,.3); cursor: pointer;
}
.art-play::before {
	content: ""; display: block; margin: 0 auto; margin-left: 16px;
	border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff;
}
.art-play:focus-visible { outline: 3px solid var(--go-accent-2); outline-offset: 2px; }
.card-body { padding: 12px 13px 14px; }
.card-title { margin: 0; font-size: 15px; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover, .card-title a:focus-visible { text-decoration: underline; }
.card-meta { margin: 3px 0 10px; color: var(--go-muted); font-size: 12px; }

/* ---- store links ---- */
.stores { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.store {
	display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--go-muted);
	border: 1px solid var(--go-line); background: var(--go-surface-2); border-radius: 7px; padding: 5px 7px;
}
.store img { display: block; }
.store-primary {
	color: #fff; background: var(--go-grad); border: 0; font-weight: 800; font-size: 12px; padding: 7px 11px;
}
.store:focus-visible { outline: 3px solid var(--go-accent); outline-offset: 2px; }

/* ---- comment indicator ---- */
.comment-indicator {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 11px;
	font: inherit; font-size: 12px; color: var(--go-muted); background: none; border: 0; cursor: pointer; padding: 0;
}
.comment-indicator:focus-visible { outline: 3px solid var(--go-accent); outline-offset: 2px; }

/* ---- song detail ---- */
.crumbs { max-width: 1000px; margin: 0 auto 14px; }
.crumbs a { color: var(--go-accent); }
.song-detail { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 320px 1fr; gap: 24px; }
@media (max-width: 760px) { .song-detail { grid-template-columns: 1fr; } }
.song-art { position: relative; }
.song-art img { width: 100%; border-radius: var(--go-radius); display: block; }
.song-info h1 { margin: 0 0 4px; }
.song-meta { color: var(--go-muted); margin: 0 0 16px; }

/* ---- album detail ---- */
/* Desktop: compact cover on the left, album info to the right. */
.album-detail {
	max-width: 1000px; margin: 0 auto;
	display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start;
}
.album-art img { width: 100%; border-radius: var(--go-radius); display: block; }
.album-eyebrow {
	margin: 0 0 6px; text-transform: uppercase; letter-spacing: .09em;
	font-size: 11px; font-weight: 800; color: var(--go-accent);
}
.album-info h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.15; }
.album-meta { margin: 0 0 14px; color: var(--go-muted); }
.album-narrative { margin: 0; max-width: 62ch; line-height: 1.55; }
.album-info .stores { margin-top: 16px; }
/* Narrow / mobile: stack the large cover above the info, as it was before. */
@media (max-width: 760px) {
	.album-detail { grid-template-columns: 1fr; gap: 16px; }
	.album-info h1 { font-size: 24px; }
}

/* ---- album track list ---- */
.album-tracks {
	max-width: 1000px; margin: 30px auto 0; padding: 0;
	list-style: none; counter-reset: track;
}
.album-track {
	counter-increment: track;
	display: grid; grid-template-columns: 2.1em 1fr; column-gap: 14px;
	padding: 12px 14px 14px; border-radius: 10px;
	transition: background .15s ease;
}
.album-track + .album-track { border-top: 1px solid var(--go-line); }
.album-track:hover { background: var(--go-surface); }
/* Track number in the left gutter (auto-numbered, tabular for alignment). */
.album-track::before {
	content: counter(track);
	color: var(--go-muted); text-align: right; padding-top: 2px;
	font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}
.album-track > * { grid-column: 2; min-width: 0; }
.album-track-main {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.album-track-title { color: var(--go-text); text-decoration: none; font-weight: 600; font-size: 15px; }
.album-track-title:hover, .album-track-title:focus-visible { text-decoration: underline; }
.album-track-len { flex: none; color: var(--go-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.album-track-genres { margin: 3px 0 0; color: var(--go-muted); font-size: 12px; }
.album-track-narrative { margin: 7px 0 0; color: var(--go-muted); font-size: 13px; line-height: 1.5; }
.album-track .stores { margin-top: 10px; }
.player, .go-widget-audio { width: 100%; margin-bottom: 14px; }
.embed-facade { margin-bottom: 14px; }
.embed-play {
	font: inherit; cursor: pointer; color: #fff; background: var(--go-grad);
	border: 0; border-radius: 8px; padding: 8px 12px;
}
.embed-play:focus-visible { outline: 3px solid var(--go-accent-2); outline-offset: 2px; }

/* ---- embed video dialog (native <dialog>) ---- */
.embed-dialog {
	border: 0; padding: 0; border-radius: var(--go-radius); overflow: hidden;
	width: min(960px, 94vw); max-width: 94vw;
	background: var(--go-surface); color: var(--go-text);
}
.embed-dialog::backdrop { background: rgba(0,0,0,.7); }
.embed-dialog-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 8px 8px 8px 14px;
}
.embed-dialog-title { font-size: 14px; font-weight: 700; }
.embed-dialog-close {
	font: inherit; font-size: 24px; line-height: 1; cursor: pointer;
	background: none; border: 0; color: var(--go-text); padding: 2px 8px; border-radius: 8px;
}
.embed-dialog-close:focus-visible { outline: 3px solid var(--go-accent); outline-offset: 2px; }
/* 16:9 frame; min-height fallback so it never collapses if aspect-ratio is unsupported. */
.embed-dialog-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 360px; background: #000; }
.embed-dialog-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@supports not (aspect-ratio: 16 / 9) {
	.embed-dialog-frame { height: 540px; }
}
/* Spotify is a fixed-height track/album player, not a 16:9 video. */
.embed-dialog-frame.is-spotify { aspect-ratio: auto; min-height: 0; height: 352px; background: transparent; }
.embed-dialog:has(.embed-dialog-frame.is-spotify) { width: min(640px, 94vw); }
/* Comments thread: scrollable panel, not a fixed-ratio media frame. */
.embed-dialog-frame.is-comments { aspect-ratio: auto; min-height: 0; height: min(70vh, 560px); background: var(--go-surface); }
.embed-dialog:has(.embed-dialog-frame.is-comments) { width: min(640px, 94vw); }

.local-play { cursor: pointer; }

/* ---- player stage: 16:9 karaoke player (desktop dialog + mobile full page) ---- */
/* The dialog is only a frame; the stage owns the layout and aspect ratio. */
.player-dialog {
	border: 0; padding: 0; background: transparent; overflow: visible;
	width: min(900px, 94vw); max-width: 94vw;
}
.player-dialog::backdrop { background: rgba(0,0,0,.75); }

.player-stage {
	position: relative; overflow: hidden;
	border-radius: var(--go-radius);
	aspect-ratio: 16 / 9;
	display: flex; flex-direction: column;
	color: var(--ps-text);
	font-family: var(--go-font);
	/* Theme-aware chrome (title bar + control bar). Light defaults; dark via data-theme.
	   The lyric stage itself stays dark in both themes since it sits over album art. */
	--ps-base: #eef1f7;
	--ps-text: #1a1f2e;
	--ps-chrome-bg: rgba(255,255,255,.74);
	--ps-controls-bg: rgba(255,255,255,.84);
	--ps-line: rgba(0,0,0,.12);
	--ps-hover: rgba(0,0,0,.08);
	--ps-pill-bg: rgba(0,0,0,.07);
	--ps-pill-text: #1a1f2e;
	--ps-cover-line: rgba(0,0,0,.22);
	--ps-icon-filter: brightness(0);    /* white MEJS sprite -> dark icons on a light bar */
	--ps-rail-bg: rgba(0,0,0,.18);
	--ps-rail-fg: var(--go-accent);
	--ps-time: #1a1f2e;
	background: var(--ps-base);
}
:root[data-theme="dark"] .player-stage {
	--ps-base: #15151b;
	--ps-text: #ffffff;
	--ps-chrome-bg: rgba(0,0,0,.42);
	--ps-controls-bg: rgba(0,0,0,.5);
	--ps-line: rgba(255,255,255,.12);
	--ps-hover: rgba(255,255,255,.16);
	--ps-pill-bg: rgba(255,255,255,.14);
	--ps-pill-text: rgba(255,255,255,.9);
	--ps-cover-line: rgba(255,255,255,.28);
	--ps-icon-filter: none;             /* sprite is already white on the dark bar */
	--ps-rail-bg: rgba(255,255,255,.3);
	--ps-rail-fg: #ffffff;
	--ps-time: #ffffff;
}
/* The stage lives outside .gamesover-catalog (dialog on body, or its own page), so it
   needs its own box-sizing reset rather than inheriting the catalog's. */
.player-stage, .player-stage * { box-sizing: border-box; }
@supports not (aspect-ratio: 16 / 9) {
	.player-stage { height: min(506px, 53vw); }
}

/* Frosted album-art backdrop. Brightened (not darkened) so a mostly-black cover still
   shows its accents; the flat scrim below guarantees white-text contrast regardless. */
.player-stage .ps-bg {
	position: absolute; inset: -8%; z-index: 0;
	background-size: cover; background-position: center;
	filter: blur(30px) brightness(1.18) saturate(1.35);
	transform: scale(1.16);
}
/* Lighter scrim than before so the album art reads (was washing out to near-black);
   the lyric outline/shadow still carries contrast over the brighter backdrop. */
.player-stage::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(8,8,12,.28), rgba(8,8,12,.6));
}
.player-stage > * { position: relative; z-index: 1; }

/* Mock, themed title bar with the song name. */
.ps-titlebar {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 10px 8px 14px;
	background: var(--ps-chrome-bg); border-bottom: 1px solid var(--ps-line);
}
.ps-title {
	flex: 0 1 auto; font-weight: 700; font-size: 14px; color: var(--ps-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-titlebar-spacer { flex: 1 1 auto; }
.ps-close, .ps-back {
	flex: 0 0 auto; font: inherit; font-size: 22px; line-height: 1;
	color: var(--ps-text); background: none; border: 0; cursor: pointer;
	padding: 2px 9px; border-radius: 8px; text-decoration: none;
}
.ps-close:hover, .ps-back:hover { background: var(--ps-hover); }
.ps-close:focus-visible, .ps-back:focus-visible { outline: 3px solid var(--go-accent); outline-offset: 2px; }

/* Karaoke lyric area fills the space between the title bar and the controls. */
.ps-lyrics {
	flex: 1 1 auto; min-height: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; text-align: center; padding: 16px 20px;
}
.ps-lyrics[hidden] { display: none; }
/* pre-line keeps in-cue line breaks (a cue's multiple SRT lines render as real lines). */
.ps-line { margin: 0; white-space: pre-line; }
.ps-current {
	font-size: clamp(20px, 3.4vw, 34px); font-weight: 800; line-height: 1.22; color: #fff;
	/* White fill, hard black outline (4 offsets), plus a soft drop shadow for depth. */
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 10px rgba(0,0,0,.9);
	-webkit-text-stroke: .5px rgba(0,0,0,.5);
	min-height: 1.22em; transition: opacity .15s ease;
}
/* The upcoming-line preview is opt-in: hidden unless the stage has .show-next. */
.ps-next {
	display: none;
	font-size: clamp(13px, 1.9vw, 18px); font-weight: 600; line-height: 1.3;
	color: rgba(255,255,255,.7);
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	min-height: 1.3em;
}
.player-stage.show-next .ps-next { display: block; }
.ps-lyrics:not(.is-active) .ps-current { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .ps-current { transition: none; } }

/* Next-line toggle pill in the title bar. */
.ps-toggle-next {
	flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
	color: var(--ps-pill-text); background: var(--ps-pill-bg);
	border: 1px solid var(--ps-line); border-radius: 999px;
	padding: 5px 11px; cursor: pointer; white-space: nowrap;
}
.ps-toggle-next:hover { background: var(--ps-hover); }
.ps-toggle-next[aria-pressed="true"] {
	color: #fff; background: var(--go-accent); border-color: var(--go-accent);
}
.ps-toggle-next:focus-visible { outline: 3px solid var(--go-accent); outline-offset: 2px; }

/* Bottom row: clickable cover thumbnail (same height as the control bar) + the player. */
.ps-controls {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px 12px; background: var(--ps-controls-bg);
	border-top: 1px solid var(--ps-line);
}
/* Cover thumbnail: a fixed square sized to match the MediaElement control bar height. */
.ps-cover {
	flex: 0 0 auto; display: block; width: 44px; height: 44px;
	border-radius: 6px; overflow: hidden;
	border: 1px solid var(--ps-cover-line); background: #000;
}
.ps-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-cover:hover { border-color: var(--go-accent); }
.ps-cover:focus-visible { outline: 3px solid var(--go-accent); outline-offset: 2px; }
.ps-player { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.ps-rotate { display: none; }

/* Blend MediaElement's control bar into the stage and theme its icons/text/rails. */
.ps-player .mejs__container,
.ps-player .mejs__controls { width: 100% !important; background: transparent !important; }
.ps-player .mejs__container { min-width: 0 !important; }
/* The icon sprite is white; invert it to dark on a light control bar. */
.ps-player .mejs__button > button { filter: var(--ps-icon-filter); }
.ps-player .mejs__time,
.ps-player .mejs__currenttime,
.ps-player .mejs__duration { color: var(--ps-time) !important; }
.ps-player .mejs__time-total,
.ps-player .mejs__horizontal-volume-total { background: var(--ps-rail-bg) !important; }
.ps-player .mejs__time-current,
.ps-player .mejs__horizontal-volume-current { background: var(--ps-rail-fg) !important; }

/* ---- full-page mobile player (views/player.cfm) ---- */
body.player-page { margin: 0; background: #000; font-family: var(--go-font); }
.player-page .player-stage.is-page {
	position: fixed; inset: 0; width: 100vw; height: 100dvh;
	aspect-ratio: auto; border-radius: 0;
}
@supports not (height: 100dvh) {
	.player-page .player-stage.is-page { height: 100vh; }
}
.player-page .ps-current { font-size: clamp(22px, 5vw, 44px); }
/* In portrait, nudge the visitor to rotate; the stage still works either way. */
@media (orientation: portrait) {
	.player-page .ps-rotate {
		display: block; text-align: center; padding: 8px 12px;
		font-size: 13px; color: rgba(255,255,255,.9); background: rgba(0,0,0,.55);
	}
}

/* Shareable genre filter: active indicator + clickable genre tags. */
.filter-active { max-width: 1100px; margin: 0 auto 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--go-muted); }
.filter-active strong { color: var(--go-text); text-transform: capitalize; }
.filter-clear { color: var(--go-accent); }
.genre-link { color: inherit; text-decoration: none; }
.genre-link:hover, .genre-link:focus-visible { text-decoration: underline; }
.catalog-empty { max-width: 1100px; margin: 24px auto; color: var(--go-muted); }
.catalog-empty a { color: var(--go-accent); }

/* ---- comments iframe page ---- */
.comments-page { padding: 18px; }
.comments-thread { max-width: 640px; margin: 0 auto; }
.comments-heading { font-size: 16px; margin: 0 0 14px; word-break: break-word; }
.comment { background: var(--go-surface-2); border: 1px solid var(--go-line); border-radius: 10px; padding: 12px 14px; }
.comment-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.comment-author { font-weight: 700; font-size: 14px; }
.comment-date { font-size: 12px; color: var(--go-muted); }
.comment-body { margin: 0; font-size: 14px; }
.comments-empty { color: var(--go-muted); }
.song-actions { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; }
.share-btn {
	font: inherit; cursor: pointer; color: var(--go-text); background: var(--go-surface-2);
	border: 1px solid var(--go-line); border-radius: 8px; padding: 7px 14px; font-weight: 700;
}
.share-btn:hover { border-color: var(--go-accent); }
.share-btn:focus-visible { outline: 3px solid var(--go-accent); outline-offset: 2px; }
.share-status { font-size: 12px; color: var(--go-muted); }
.narrative { margin-top: 22px; }
.narrative h2 { font-size: 15px; }

/* ---- modal ---- */
.modal-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.6);
	display: grid; place-items: center; z-index: 1000; padding: 16px;
}
.modal {
	background: var(--go-surface); color: var(--go-text); border-radius: var(--go-radius);
	width: min(680px, 100%); max-height: 86vh; position: relative; overflow: hidden;
}
.modal-close {
	position: absolute; top: 8px; right: 10px; font-size: 22px; line-height: 1;
	background: none; border: 0; color: var(--go-text); cursor: pointer; z-index: 1;
}
.modal-close:focus-visible { outline: 3px solid var(--go-accent); outline-offset: 2px; }
.modal-frame { width: 100%; height: 70vh; border: 0; }

/* ---- widget ---- */
.go-widget {
	background: var(--go-surface); color: var(--go-text); border: 1px solid var(--go-line);
	border-radius: 12px; overflow: hidden; display: flex; gap: 12px; padding: 12px; font-family: var(--go-font);
}
.go-widget[data-theme="dark"] {
	--go-bg: #0c0e14; --go-surface: #161a26; --go-surface-2: #1f2435;
	--go-line: #2a3047; --go-text: #eef1f8; --go-muted: #9aa3bd;
}
.go-widget-art img { display: block; border-radius: 8px; }
.go-small .go-widget-art img { width: 64px; height: 64px; object-fit: cover; }
.go-standard .go-widget-art img { width: 96px; height: 96px; object-fit: cover; }
.go-large { flex-direction: column; }
.go-large .go-widget-art img { width: 100%; height: auto; }
.go-widget-title { font-weight: 700; color: inherit; text-decoration: none; display: block; }
.go-widget-artist { color: var(--go-muted); font-size: 12px; margin-bottom: 8px; }
.go-widget-narrative { font-size: 13px; color: var(--go-muted); }
.go-widget-cta {
	display: inline-block; margin-top: 8px; color: #fff; background: var(--go-grad);
	text-decoration: none; font-weight: 800; font-size: 12px; padding: 7px 11px; border-radius: 8px;
}

/* ---- generator ---- */
.generator { max-width: 900px; margin: 0 auto; }
.gen-controls { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.gen-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--go-muted); }
.gen-controls select { font: inherit; padding: 6px; border-radius: 8px; border: 1px solid var(--go-line); background: var(--go-surface); color: var(--go-text); }
.gen-preview { border: 1px dashed var(--go-line); border-radius: var(--go-radius); padding: 16px; display: inline-block; }
.gen-preview iframe { border: 0; }
.gen-snippet { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.gen-snippet textarea { flex: 1; font-family: monospace; font-size: 12px; padding: 8px; border-radius: 8px; border: 1px solid var(--go-line); background: var(--go-surface); color: var(--go-text); }
.copy-btn { font: inherit; cursor: pointer; border: 0; border-radius: 8px; padding: 8px 12px; color: #fff; background: var(--go-grad); }
.copy-btn:focus-visible { outline: 3px solid var(--go-accent); outline-offset: 2px; }

/* ---- 404 ---- */
.notfound { max-width: 600px; margin: 60px auto; text-align: center; }
.notfound a { color: var(--go-accent); }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}