/* /gifs (gifs.html, filled by gifs-page.ts): the GIF library from the god's
   show, a grid of cards under each episode's heading. The shell is site.css;
   this is the page's own. */

main {
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px var(--pad) calc(56px + env(safe-area-inset-bottom));
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}
.intro {
	display: grid;
	gap: 8px;
}
:where(.intro) > * {
	margin: 0;
}
.g-count {
	margin-top: 4px;
	font-size: var(--t-lead);
	color: var(--soft);
}
.g-count b {
	color: var(--gold-hi);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.g-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.g-tools input {
	flex: 1 1 260px;
	max-width: 360px;
	box-sizing: border-box;
	padding: 10px 16px;
	font: 500 var(--t-base) var(--sans);
	color: var(--bone);
	background: var(--card);
	border: 1px solid var(--line-hi);
	border-radius: var(--r-pill);
}
.g-tools input::placeholder {
	color: var(--dim);
}
.g-tools .seg {
	flex-wrap: wrap;
}
.g-tools .seg button {
	min-height: 32px;
	padding: 0 12px;
	font-size: var(--t-sm);
}
.g-watch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	font: 600 var(--t-sm) / 1.4 var(--sans);
	color: var(--cool);
	background: rgba(var(--cool-rgb), 0.1);
	text-decoration: none;
}
.g-watch:hover {
	background: rgba(var(--cool-rgb), 0.18);
}
.g-watch .i {
	width: 13px;
	height: 13px;
}

/* All the GIFs in one grid: two across on a phone, four on a tablet, six on
   a wide screen. */
.gifs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
	.gifs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (min-width: 1000px) {
	.gifs {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.gc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px;
	align-content: start;
}
.gc-play {
	display: block;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--card);
	cursor: pointer;
	box-shadow: var(--e-1);
	transition:
		border-color 0.15s,
		transform 0.15s;
}
.gc-play:hover {
	border-color: var(--line-hi);
	transform: translateY(-2px);
}
.gc-art {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.gc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding-left: 2px;
}
.gc-phrase {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 600 var(--t-sm) var(--sans);
	color: var(--soft);
}
.gc-go {
	margin: 0;
	display: flex;
	flex: none;
	gap: 2px;
}
/* Small ghost icons: the download and the copy-link. */
.gc-ic {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: none;
	color: var(--ash);
	cursor: pointer;
}
.gc-ic:hover {
	color: var(--gold-hi);
	background: rgba(var(--gold-rgb), 0.12);
}
.gc-ic .i {
	width: 15px;
	height: 15px;
}
.gc-ic .ok,
.gc-ic.copied .i:not(.ok) {
	display: none;
}
.gc-ic.copied .ok {
	display: block;
}
.gc-ic.copied {
	color: var(--live);
	background: rgba(var(--live-rgb), 0.12);
}
.g-none {
	margin: 0;
	color: var(--soft);
}