/* Ignition Games kit for Elementor.
   The look of the Loot Tower press kit, rewritten for Elementor's markup: the night sky and tower
   wall of the main menu, the gold of the wordmark, the tooltip frame, the card frames and the
   Upheaval lettering.

   How to use it in the editor: give a container or widget one of the ig-* classes under
   Advanced > CSS Classes. Everything here only touches elements that carry such a class, apart
   from the page background and body text, so the rest of Elementor behaves as usual. */

@font-face {
	font-family: "Upheaval";
	src: url("../assets/fonts/upheavtt.ttf") format("truetype");
	font-display: swap;
}

:root {
	--ig-night: #14111f;
	--ig-wall: #191525;
	--ig-wall-lit: #221d33;
	--ig-sky: #393b8a;
	--ig-ink: #36120a;
	--ig-gold: #e6c86a;
	--ig-gold-deep: #d0a243;
	--ig-gold-dark: #8a5a1c;
	--ig-gold-light: #f1dc8e;
	--ig-gold-hover: #f0d47a;
	--ig-panel: #2a3350;
	--ig-panel-line: #404470;
	--ig-text: #efe9dc;
	--ig-text-soft: #ddd6ea;
	--ig-text-dim: #a9a3c0;
	--ig-red: #a3262e;

	--ig-px: 3px;
	--ig-pixel: "Upheaval", "Courier New", monospace;
	--ig-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Page --------------------------------------------------------------------
   Only on the press kit page: the plugin gives its <body> the class ig-kit. Everything else in this
   file only touches elements that carry an ig-* class, so the rest of the site is untouched. */

html:has(body.ig-kit) {
	scroll-behavior: smooth;
}

body.ig-kit {
	background: var(--ig-night);
	color: var(--ig-text);
	font-family: var(--ig-font);
	font-size: 17px;
	line-height: 1.65;
	color-scheme: dark;
}

body.ig-kit [data-elementor-type="wp-page"] a {
	color: var(--ig-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

body.ig-kit [data-elementor-type="wp-page"] a:hover,
body.ig-kit [data-elementor-type="wp-page"] a:focus {
	color: #fff3c4;
}

/* Anchored sections stop a little below the top. */
body.ig-kit [data-elementor-type="wp-page"] [id] {
	scroll-margin-top: 1.5rem;
}

/* Pixel art must never be smoothed by the browser's scaler. Give an Image widget the class
   ig-pixel and scale it by whole multiples. */
.ig-pixel img,
img.ig-pixel,
.ig-sprite,
.ig-hero-scene,
.ig-horde,
.ig-card,
.ig-slot {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* --- Sprites --------------------------------------------------------------
   Each sprite is a horizontal strip of frames. --w and --h are one frame at native size, --n the
   frame count and --s the whole-number scale, so the art is never drawn between pixels. */

.ig-sprite {
	--s: 2;
	display: block;
	flex: none;
	width: calc(var(--w) * var(--s) * 1px);
	height: calc(var(--h) * var(--s) * 1px);
	background-repeat: no-repeat;
	background-size: calc(var(--w) * var(--n) * var(--s) * 1px) 100%;
	animation: ig-strip var(--t, 1s) steps(var(--n)) infinite;
}

@keyframes ig-strip {
	to {
		background-position-x: calc(var(--w) * var(--n) * var(--s) * -1px);
	}
}

.ig-coin {
	--w: 16;
	--h: 16;
	--n: 6;
	--t: 0.7s;
	background-image: url("../assets/sprites/coin.png");
}

.ig-torch {
	--w: 64;
	--h: 64;
	--n: 15;
	--t: 1.2s;
	background-image: url("../assets/sprites/torch.png");
}

.ig-hero-run {
	--w: 64;
	--h: 64;
	--n: 14;
	--t: 0.9s;
	background-image: url("../assets/sprites/hero-run.png");
}

.ig-hero-idle {
	--w: 64;
	--h: 64;
	--n: 6;
	--t: 1s;
	background-image: url("../assets/sprites/hero-idle.png");
}

.ig-ogre {
	--w: 64;
	--h: 64;
	--n: 16;
	--t: 1.3s;
	background-image: url("../assets/sprites/ogre-walk.png");
}

.ig-bomber {
	--w: 64;
	--h: 64;
	--n: 6;
	--t: 0.7s;
	background-image: url("../assets/sprites/bomber-idle.png");
}

.ig-elemental {
	--w: 64;
	--h: 64;
	--n: 31;
	--t: 2.6s;
	background-image: url("../assets/sprites/elemental-idle.png");
}

.ig-elemental-small {
	--w: 32;
	--h: 32;
	--n: 20;
	--t: 1.7s;
	background-image: url("../assets/sprites/elemental-small.png");
}

/* The sumo frog's stomp: the wind-up and jump frames followed by the landing. */
.ig-frog-stomp {
	--w: 64;
	--h: 64;
	--n: 48;
	--t: 4s;
	background-image: url("../assets/sprites/frog-stomp.png");
}

.ig-portal {
	--w: 70;
	--h: 79;
	--n: 13;
	--t: 1.1s;
	background-image: url("../assets/sprites/portal.png");
}

.ig-keeper {
	--w: 106;
	--h: 138;
	--n: 15;
	--t: 1.6s;
	background-image: url("../assets/sprites/shopkeeper-idle.png");
}

/* --- Sections --------------------------------------------------------------
   ig-section: a boxed container with the press kit's spacing above it. */

.e-con.ig-section {
	margin-top: 4.5rem;
}

/* The big section heading: a spinning coin, the gold Upheaval title, then a dotted rule that runs
   to the edge like a row of studs. Use it on a Heading widget (H2). */
.elementor-widget.ig-h2 .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	color: var(--ig-gold);
	font-family: var(--ig-pixel);
	font-size: 1.9rem;
	font-weight: normal;
	letter-spacing: 0.03em;
	line-height: 1.1;
	text-shadow: 0 3px 0 var(--ig-ink);
}

.elementor-widget.ig-h2 .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	background: url("../assets/sprites/coin.png") 0 0 / 192px 32px no-repeat;
	image-rendering: pixelated;
	animation: ig-coin 0.7s steps(6) infinite;
}

@keyframes ig-coin {
	to {
		background-position-x: -192px;
	}
}

.elementor-widget.ig-h2 .elementor-heading-title::after {
	content: "";
	flex: 1;
	height: var(--ig-px);
	background: repeating-linear-gradient(90deg, var(--ig-panel-line) 0 6px, transparent 6px 12px);
}

/* Smaller gold headings: inside frames, cards and captions. */
.elementor-widget.ig-h3 .elementor-heading-title {
	margin: 0;
	color: var(--ig-gold);
	font-family: var(--ig-pixel);
	font-size: 1.15rem;
	font-weight: normal;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

/* Body copy in a Text Editor widget. */
.elementor-widget.ig-prose {
	color: var(--ig-text-soft);
	font-family: var(--ig-font);
	font-size: 1.06rem;
	line-height: 1.65;
}

.elementor-widget.ig-prose p {
	margin: 0 0 1.1rem;
}

.elementor-widget.ig-prose p:last-child {
	margin-bottom: 0;
}

.elementor-widget.ig-lead,
.elementor-widget.ig-prose .ig-lead {
	color: var(--ig-text);
	font-size: 1.3rem;
	line-height: 1.5;
}

.elementor-widget.ig-note {
	color: var(--ig-text-dim);
	font-size: 0.9rem;
}

.elementor-widget.ig-note p {
	margin: 0;
}

/* The in-game tooltip frame: dark outline, gold line, then the navy panel with its inner line.
   Put it on a container. */
.e-con.ig-frame,
.ig-frame {
	background: var(--ig-panel);
	border: var(--ig-px) solid var(--ig-gold);
	outline: var(--ig-px) solid var(--ig-ink);
	box-shadow:
		inset 0 0 0 var(--ig-px) var(--ig-panel),
		inset 0 0 0 calc(var(--ig-px) * 2) var(--ig-panel-line),
		0 8px 0 rgba(0, 0, 0, 0.35);
}

/* --- Buttons ---------------------------------------------------------------
   The game's long gold button, drawn with hard edges instead of an image so it can stretch.
   ig-btn on a Button widget; add ig-quiet for the navy one. */

.elementor-widget.ig-btn .elementor-button {
	display: inline-block;
	padding: 0.5rem 1rem 0.55rem;
	background: var(--ig-gold-deep);
	border: var(--ig-px) solid var(--ig-ink);
	border-radius: 0;
	box-shadow:
		inset 0 var(--ig-px) 0 var(--ig-gold-light),
		inset 0 calc(var(--ig-px) * -1) 0 #a87628,
		0 5px 0 rgba(0, 0, 0, 0.45);
	color: var(--ig-ink);
	fill: var(--ig-ink);
	font-family: var(--ig-pixel);
	font-size: 1.05rem;
	font-weight: normal;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: none;
}

.elementor-widget.ig-btn .elementor-button:hover,
.elementor-widget.ig-btn .elementor-button:focus {
	background: var(--ig-gold-hover);
	color: var(--ig-ink);
}

.elementor-widget.ig-btn .elementor-button:active {
	transform: translateY(3px);
	box-shadow:
		inset 0 var(--ig-px) 0 var(--ig-gold-light),
		inset 0 calc(var(--ig-px) * -1) 0 #a87628,
		0 2px 0 rgba(0, 0, 0, 0.45);
}

.elementor-widget.ig-btn.ig-quiet .elementor-button {
	background: var(--ig-panel);
	box-shadow:
		inset 0 var(--ig-px) 0 var(--ig-panel-line),
		inset 0 calc(var(--ig-px) * -1) 0 #1e2540,
		0 5px 0 rgba(0, 0, 0, 0.45);
	color: var(--ig-gold);
}

.elementor-widget.ig-btn.ig-quiet .elementor-button:hover,
.elementor-widget.ig-btn.ig-quiet .elementor-button:focus {
	background: var(--ig-panel-line);
	color: #fff3c4;
}

.elementor-widget.ig-btn.ig-small .elementor-button {
	padding: 0.3rem 0.75rem 0.35rem;
	font-size: 0.95rem;
}

/* A row of buttons. */
.e-con.ig-actions {
	--gap: 0.85rem;
	--row-gap: 0.85rem;
	--column-gap: 0.85rem;
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: center;
	--justify-content: flex-start;
	--padding-top: 0;
	--padding-bottom: 5px;
	--padding-left: 0;
	--padding-right: 0;
	flex-direction: row;
	flex-wrap: wrap;
}

.e-con.ig-actions > .elementor-widget {
	width: auto;
	max-width: none;
}

/* --- Header and footer ------------------------------------------------------- */

.e-con.ig-header {
	background: var(--ig-wall);
	border-bottom: var(--ig-px) solid var(--ig-gold);
	z-index: 50;
}

.ig-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--ig-gold);
	font-family: var(--ig-pixel);
	font-size: 1.45rem;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	text-shadow: 0 3px 0 var(--ig-ink);
	white-space: nowrap;
}

.ig-brand:hover,
.ig-brand:focus {
	color: #fff3c4;
}

.ig-brand .ig-sprite {
	--s: 2;
}

/* Elementor Pro's Nav Menu widget, lettered like the press kit's jump bar. */
.elementor-widget.ig-nav .elementor-nav-menu a,
.elementor-widget.ig-nav .elementor-nav-menu--main .elementor-item {
	color: var(--ig-text-dim);
	fill: var(--ig-text-dim);
	font-family: var(--ig-pixel);
	font-size: 1.05rem;
	font-weight: normal;
	letter-spacing: 0.04em;
	padding: 0.4rem 0.8rem;
	text-decoration: none;
}

.elementor-widget.ig-nav .elementor-nav-menu a:hover,
.elementor-widget.ig-nav .elementor-nav-menu a:focus,
.elementor-widget.ig-nav .elementor-nav-menu a.elementor-item-active,
.elementor-widget.ig-nav .elementor-item.highlighted {
	color: var(--ig-gold);
}

.elementor-widget.ig-nav .elementor-nav-menu--main .elementor-item::before,
.elementor-widget.ig-nav .elementor-nav-menu--main .elementor-item::after {
	display: none;
}

.elementor-widget.ig-nav .elementor-menu-toggle {
	background: var(--ig-gold-deep);
	border: var(--ig-px) solid var(--ig-ink);
	border-radius: 0;
	color: var(--ig-ink);
	fill: var(--ig-ink);
}

.elementor-widget.ig-nav .elementor-nav-menu--dropdown {
	background: var(--ig-panel);
	border: var(--ig-px) solid var(--ig-gold);
	outline: var(--ig-px) solid var(--ig-ink);
}

.elementor-widget.ig-nav .elementor-nav-menu--dropdown a {
	color: var(--ig-text);
	padding: 0.75rem 1.25rem;
}

.elementor-widget.ig-nav .elementor-nav-menu--dropdown a:hover,
.elementor-widget.ig-nav .elementor-nav-menu--dropdown a.elementor-item-active {
	background: var(--ig-panel-line);
	color: var(--ig-gold);
}

.e-con.ig-footer {
	margin-top: 5rem;
	background: var(--ig-wall);
	border-top: var(--ig-px) solid var(--ig-ink);
	color: var(--ig-text-dim);
	font-size: 0.85rem;
}

.ig-footer-line {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	color: var(--ig-text-dim);
	font-size: 0.85rem;
	line-height: 1.5;
}

.ig-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--ig-pixel);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
}

.ig-footer-links a {
	color: var(--ig-text-dim);
	text-decoration: none;
}

.ig-footer-links a:hover {
	color: var(--ig-gold);
}

/* --- Hero: the main menu scene -------------------------------------------------
   A full-width container with the class ig-hero. Its first child is an HTML widget holding the
   scene; the boxed container after it holds the copy. */

.e-con.ig-hero {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	position: relative;
	justify-content: center;
	min-height: clamp(27rem, 50vw, 46rem);
	background: var(--ig-wall);
	border-bottom: var(--ig-px) solid var(--ig-gold);
	overflow: hidden;
}

.elementor-widget.ig-scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	z-index: 0;
}

.elementor-widget.ig-scene .elementor-widget-container {
	height: 100%;
}

.ig-hero-scene {
	position: absolute;
	inset: 0;
	/* Anchored near the top: on a wide window the scene is taller than the banner, and it is the
	   dirt at the bottom that should be cut off, not the character's face. The scene fills the
	   banner's width until it is 60rem tall, then stops growing; the 115% floor keeps it covering
	   the banner on narrow windows. */
	background: url("../assets/art/loot-tower-scene-1x.png") right 8% / auto max(115%, min(56.25vw, 60rem))
		no-repeat;
}

/* Past this width the scene no longer reaches the left edge. The wall behind it is the same
   colour, and a short fade over the scene's own left edge hides where its windows stop. */
@media (min-width: 107rem) {
	.ig-hero-scene {
		--scene-width: calc(60rem * 16 / 9);
		background-image:
			linear-gradient(90deg, var(--ig-wall), rgba(25, 21, 37, 0)),
			url("../assets/art/loot-tower-scene-1x.png");
		background-size:
			16rem 100%,
			auto 60rem;
		background-position:
			right calc(var(--scene-width) - 16rem) top,
			right 8%;
	}
}

/* Darkens the tower wall behind the text and leaves the character alone. */
.ig-hero-scene::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 17, 31, 0.82) 0%, rgba(20, 17, 31, 0.5) 38%, transparent 62%);
}

.e-con.ig-hero > .e-con,
.e-con.ig-hero > .e-con-inner > .e-con {
	position: relative;
	z-index: 1;
}

.e-con.ig-hero-copy {
	--padding-top: 3rem;
	--padding-bottom: 3rem;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	--row-gap: 0;
	max-width: 27rem;
}

/* The red stamp above the title. A Heading widget set to P. */
.elementor-widget.ig-tag {
	width: auto;
	max-width: max-content;
	margin: 0 0 1.25rem;
}

.elementor-widget.ig-tag .elementor-heading-title {
	display: inline-block;
	padding: 0.15rem 0.6rem 0.2rem;
	background: var(--ig-red);
	border: var(--ig-px) solid var(--ig-ink);
	color: #ffe9a8;
	font-family: var(--ig-pixel);
	font-size: 1rem;
	font-weight: normal;
	letter-spacing: 0.08em;
	line-height: 1.4;
	transform: rotate(-3deg);
}

/* The game logo as the title: an Image widget. */
.elementor-widget.ig-logo img {
	display: block;
	width: 21rem;
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.45));
}

/* A lettered title when there is no logo image: the studio name. */
.elementor-widget.ig-wordmark .elementor-heading-title {
	margin: 0;
	color: var(--ig-gold);
	font-family: var(--ig-pixel);
	font-size: clamp(3rem, 7vw, 4.6rem);
	font-weight: normal;
	letter-spacing: 0.02em;
	line-height: 0.92;
	text-shadow:
		0 4px 0 var(--ig-ink),
		0 10px 0 rgba(0, 0, 0, 0.45);
}

.elementor-widget.ig-pitch {
	margin-top: 1.5rem;
}

.elementor-widget.ig-pitch .elementor-heading-title {
	margin: 0;
	color: var(--ig-gold);
	font-family: var(--ig-pixel);
	font-size: 1.7rem;
	font-weight: normal;
	line-height: 1.1;
	text-shadow: 0 3px 0 var(--ig-ink);
}

.elementor-widget.ig-sub {
	max-width: 24rem;
	margin-top: 0.85rem;
	color: var(--ig-text);
	font-size: 17px;
	line-height: 1.65;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.elementor-widget.ig-sub p {
	margin: 0;
}

.e-con.ig-hero-copy > .e-con.ig-actions,
.e-con.ig-hero-copy > .e-con-inner > .e-con.ig-actions {
	margin-top: 1.75rem;
}

/* --- Jump bar under the hero ----------------------------------------------------- */

.e-con.ig-jump {
	background: var(--ig-wall);
	border-bottom: var(--ig-px) solid var(--ig-gold);
}

.ig-jump-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.6rem;
	margin: 0;
	padding: 0.7rem 0;
	list-style: none;
	font-family: var(--ig-pixel);
	font-size: 1rem;
	letter-spacing: 0.04em;
}

.ig-jump-list a {
	color: var(--ig-text-dim);
	text-decoration: none;
}

.ig-jump-list a:hover,
.ig-jump-list a:focus {
	color: var(--ig-gold);
}

/* --- Fact sheet beside the description ---------------------------------------- */

.e-con.ig-intro {
	--gap: 3.5rem;
	--column-gap: 3.5rem;
	--row-gap: 2.5rem;
	align-items: stretch;
}

.e-con.ig-facts {
	--padding-top: 1.75rem;
	--padding-bottom: 1.25rem;
	--padding-left: 1.6rem;
	--padding-right: 1.6rem;
	--gap: 1.1rem;
	--row-gap: 1.1rem;
	flex: none;
	width: 19rem;
}

.elementor-widget.ig-facts-title .elementor-heading-title {
	margin: 0;
	color: var(--ig-gold);
	font-family: var(--ig-pixel);
	font-size: 1.5rem;
	font-weight: normal;
	letter-spacing: 0.03em;
	line-height: 1.1;
	text-shadow: 0 3px 0 var(--ig-ink);
}

.elementor-widget.ig-facts-list {
	flex: 1;
}

.ig-facts-list dl {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	gap: 0;
	margin: 0;
}

.ig-facts-list dt {
	margin: 0;
	color: var(--ig-gold);
	font-family: var(--ig-pixel);
	font-size: 1.05rem;
	font-weight: normal;
	letter-spacing: 0.06em;
	line-height: 1.2;
}

.ig-facts-list dd {
	margin: 0.15rem 0 0.7rem;
	color: var(--ig-text);
	font-size: 1.02rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.ig-facts-list dd:last-child {
	margin-bottom: 0;
}

.e-con.ig-about {
	--gap: 0;
	--row-gap: 0;
	flex: 1;
	min-width: 0;
}

.e-con.ig-about > .elementor-widget.ig-h2 {
	margin-bottom: 1.5rem;
}

/* The looping clip. Elementor zeroes the margins of figures inside widgets, so the gap above it
   is padding. */
.elementor-widget .ig-clip {
	margin: 0;
	padding-top: 2rem;
}

.elementor-widget .ig-clip video {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
	border: var(--ig-px) solid var(--ig-gold);
	outline: var(--ig-px) solid var(--ig-ink);
	box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
}

.ig-clip figcaption {
	margin-top: 1rem;
	color: var(--ig-text-dim);
	font-size: 0.9rem;
}

/* Every heading in a section sits 1.5rem above what follows it. */
.e-con.ig-section > .elementor-widget.ig-h2,
.e-con.ig-section > .e-con-inner > .elementor-widget.ig-h2 {
	margin-bottom: 1.5rem;
}

/* --- The horde: a strip of dungeon floor with the cast on it ---------------------- */

.e-con.ig-horde-band {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	margin-top: 4.5rem;
}

.ig-horde {
	background: #151a21 url("../assets/sprites/floor.png") 0 0 / 128px 128px;
	border-top: var(--ig-px) solid var(--ig-ink);
	border-bottom: var(--ig-px) solid var(--ig-ink);
	box-shadow:
		inset 0 18px 24px -12px rgba(0, 0, 0, 0.7),
		inset 0 -18px 24px -12px rgba(0, 0, 0, 0.7);
	overflow: hidden;
}

.ig-horde-row {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	max-width: 68rem;
	height: 176px;
	margin: 0 auto;
	padding: 0 1.5rem 20px;
}

.ig-horde-row .ig-hero-run {
	margin-right: auto;
}

.ig-horde-row .ig-loose {
	align-self: center;
}

/* --- Cards, drawn on the game's own card frames -------------------------------------
   An HTML widget with a <ul class="ig-cards">. Two by two until there is room for all four in a
   row, so a card is never left on its own. */

.ig-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem 1.25rem;
	max-width: 40rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Three cards: one row as soon as they fit, otherwise a column. */
.ig-cards.ig-three {
	max-width: none;
}

/* All four cards fit in a row from 84rem: the section holding them (class ig-wide) grows to
   84rem there, past the usual 68rem. */
@media (min-width: 84rem) {
	.ig-cards {
		max-width: none;
	}

	.elementor .e-con.ig-wide.e-con-boxed > .e-con-inner {
		max-width: 84rem;
	}
}

.ig-card {
	position: relative;
	flex: none;
	width: 304px;
	height: 482px;
	margin: 0;
	background: center / 100% 100% no-repeat;
	color: var(--ig-ink);
	transition: transform 0.12s steps(3);
}

.ig-card:hover {
	transform: translateY(-9px);
}

/* --title is the shade each card's name is lettered in. */
.ig-card.ig-uncommon {
	--title: #5fae6a;
	background-image: url("../assets/sprites/card-uncommon.png");
}

.ig-card.ig-rare {
	--title: #6f8fd6;
	background-image: url("../assets/sprites/card-rare.png");
}

.ig-card.ig-epic {
	--title: #d08a2a;
	background-image: url("../assets/sprites/card-epic.png");
}

.ig-card.ig-legendary {
	--title: #d2603a;
	background-image: url("../assets/sprites/card-legendary.png");
}

.ig-card.ig-mythic {
	--title: #a765c9;
	background-image: url("../assets/sprites/card-mythic.png");
}

/* The name is a darker shade of the card, outlined in the ink the frames are drawn with. */
.ig-card h3 {
	position: absolute;
	top: 14px;
	/* The stretch of the name tab that the gem leaves uncovered. */
	left: 62px;
	width: 162px;
	margin: 0;
	color: var(--title);
	font-family: var(--ig-pixel);
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 0.08em;
	line-height: 26px;
	text-align: center;
	white-space: nowrap;
	text-shadow:
		-2px -2px 0 var(--ig-ink), -2px -1px 0 var(--ig-ink), -2px 0 0 var(--ig-ink),
		-2px 1px 0 var(--ig-ink), -2px 2px 0 var(--ig-ink), -1px -2px 0 var(--ig-ink),
		-1px -1px 0 var(--ig-ink), -1px 0 0 var(--ig-ink), -1px 1px 0 var(--ig-ink),
		-1px 2px 0 var(--ig-ink), 0 -2px 0 var(--ig-ink), 0 -1px 0 var(--ig-ink),
		0 1px 0 var(--ig-ink), 0 2px 0 var(--ig-ink), 1px -2px 0 var(--ig-ink),
		1px -1px 0 var(--ig-ink), 1px 0 0 var(--ig-ink), 1px 1px 0 var(--ig-ink),
		1px 2px 0 var(--ig-ink), 2px -2px 0 var(--ig-ink), 2px -1px 0 var(--ig-ink),
		2px 0 0 var(--ig-ink), 2px 1px 0 var(--ig-ink), 2px 2px 0 var(--ig-ink);
}

.ig-card .ig-art {
	position: absolute;
	top: 46px;
	left: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 216px;
	height: 210px;
}

.ig-card .ig-art img {
	width: 128px;
	height: 128px;
	image-rendering: pixelated;
}

.ig-card .ig-art.ig-pair img {
	width: 96px;
	height: 96px;
}

/* Tower God: the meteor inside a slowly turning circle of rune stones. The ring turns and each
   stone turns back by the same amount, so the runes stay upright as they travel. */
.ig-card .ig-art.ig-ringed img {
	width: 64px;
	height: 64px;
}

.ig-rune-ring {
	position: absolute;
	inset: 0;
	animation: ig-turn 28s linear infinite;
}

.ig-rune-ring span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px;
	transform: rotate(calc(var(--i) * 45deg)) translateY(-76px) rotate(calc(var(--i) * -45deg));
}

.ig-rune-ring i {
	display: block;
	width: 100%;
	height: 100%;
	background: url("../assets/sprites/runes.png") calc(var(--i) * -32px) 0 / 256px 32px no-repeat;
	image-rendering: pixelated;
	animation: ig-turn 28s linear infinite reverse;
}

@keyframes ig-turn {
	to {
		transform: rotate(360deg);
	}
}

/* The description fills the panel between the divider and the rarity badge. */
.ig-card p {
	position: absolute;
	top: 281px;
	left: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 228px;
	height: 140px;
	margin: 0;
	color: #3a1a0c;
	font-family: var(--ig-pixel);
	font-size: 17px;
	line-height: 1.3;
	text-align: center;
}

.ig-card .ig-rarity {
	position: absolute;
	top: 424px;
	left: 0;
	width: 100%;
	color: rgba(54, 18, 10, 0.75);
	font-family: var(--ig-pixel);
	font-size: 13px;
	line-height: 24px;
	text-align: center;
}

/* --- Games on the studio page --------------------------------------------------------- */

.e-con.ig-game {
	--padding-top: 1.75rem;
	--padding-bottom: 1.75rem;
	--padding-left: 1.75rem;
	--padding-right: 1.75rem;
	--gap: 2.25rem;
	--column-gap: 2.25rem;
	--row-gap: 1.75rem;
	--align-items: stretch;
	align-items: stretch;
}

/* The scene fills the height of the copy beside it, cropped to the character. */
.e-con.ig-game-art {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	flex: 1 1 26rem;
	min-width: 0;
	min-height: 18rem;
}

.e-con.ig-game-art > .elementor-widget.ig-game-shot {
	flex: 1;
	height: 100%;
}

.elementor-widget.ig-game-shot .elementor-widget-container {
	height: 100%;
}

.elementor-widget.ig-game-shot img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 18rem;
	object-fit: cover;
	object-position: 78% 20%;
	border: var(--ig-px) solid var(--ig-ink);
	outline: var(--ig-px) solid var(--ig-panel-line);
	image-rendering: pixelated;
}

.e-con.ig-game-copy {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	--row-gap: 0;
	flex: 1 1 22rem;
	min-width: 0;
}

.elementor-widget.ig-game-logo img {
	display: block;
	width: 16rem;
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.45));
}

.e-con.ig-game-copy .elementor-widget.ig-pitch {
	margin-top: 1.1rem;
}

.e-con.ig-game-copy .elementor-widget.ig-prose {
	margin-top: 0.9rem;
}

/* A short row of facts under the description: genre, platform, status. */
.ig-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

.ig-chips li {
	padding: 0.1rem 0.55rem 0.15rem;
	background: var(--ig-wall);
	border: var(--ig-px) solid var(--ig-panel-line);
	color: var(--ig-text-dim);
	font-family: var(--ig-pixel);
	font-size: 0.9rem;
	letter-spacing: 0.04em;
}

.ig-chips li.ig-live {
	border-color: var(--ig-gold-dark);
	color: var(--ig-gold);
}

.e-con.ig-game-copy > .e-con.ig-actions {
	margin-top: 1.5rem;
}

/* The next game: a locked slot, still being forged. */
.e-con.ig-game-next {
	--padding-top: 1.5rem;
	--padding-bottom: 1.5rem;
	--padding-left: 1.75rem;
	--padding-right: 1.75rem;
	--gap: 1.75rem;
	--column-gap: 1.75rem;
	--row-gap: 1rem;
	align-items: center;
	margin-top: 1.5rem;
	background: var(--ig-wall);
	border: var(--ig-px) dashed var(--ig-panel-line);
}

.ig-locked {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	background: url("../assets/sprites/slot-common.png") center / 100% 100% no-repeat;
	image-rendering: pixelated;
	filter: grayscale(1) brightness(0.8);
}

.ig-locked .ig-torch {
	--s: 1;
	filter: grayscale(0);
}

.e-con.ig-game-next-copy {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0.4rem;
	--row-gap: 0.4rem;
	flex: 1 1 18rem;
}

/* --- Trailer player: YouTube supplies the picture, the bar under it is ours ------------- */

.ig-player {
	max-width: 52rem;
	background: #000;
}

.ig-player .player-stage {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.ig-player .player-stage iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Sits over the picture for good: it is the poster before the first play, and afterwards an
   invisible sheet that turns a click anywhere on the picture into play or pause. */
.ig-player .player-cover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.ig-player .player-cover:hover,
.ig-player .player-cover:focus {
	background: none;
}

.ig-player .player-cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right 8%;
	image-rendering: pixelated;
}

.ig-player .player-big {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	background: var(--ig-gold-deep);
	border: var(--ig-px) solid var(--ig-ink);
	/* A light rim outside the dark border, so the button keeps its whole outline wherever it lands
	   on the scene. */
	outline: var(--ig-px) solid var(--ig-gold-light);
	box-shadow:
		inset 0 var(--ig-px) 0 var(--ig-gold-light),
		inset 0 calc(var(--ig-px) * -1) 0 #a87628;
}

.ig-player .player-big svg {
	width: 48px;
	height: 48px;
	fill: var(--ig-ink);
}

.ig-player .player-cover:hover .player-big {
	background: var(--ig-gold-hover);
}

.ig-player.is-started .player-cover img,
.ig-player.is-started .player-big {
	display: none;
}

.ig-player.is-loading .player-big {
	animation: ig-pulse 0.6s steps(2) infinite;
}

@keyframes ig-pulse {
	50% {
		opacity: 0.45;
	}
}

.ig-player .player-bar {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	background: var(--ig-panel);
	border-top: var(--ig-px) solid var(--ig-ink);
}

.ig-player .player-btn {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: var(--ig-gold-deep);
	border: var(--ig-px) solid var(--ig-ink);
	border-radius: 0;
	box-shadow:
		inset 0 var(--ig-px) 0 var(--ig-gold-light),
		inset 0 calc(var(--ig-px) * -1) 0 #a87628;
	cursor: pointer;
}

.ig-player .player-btn:hover,
.ig-player .player-btn:focus {
	background: var(--ig-gold-hover);
}

.ig-player .player-btn svg {
	width: 20px;
	height: 20px;
	fill: var(--ig-ink);
}

.ig-player .icon-pause,
.ig-player .icon-muted,
.ig-player.is-playing .icon-play,
.ig-player.is-muted .icon-sound {
	display: none;
}

.ig-player.is-playing .icon-pause,
.ig-player.is-muted .icon-muted {
	display: block;
}

.ig-player .player-time {
	flex: none;
	color: var(--ig-gold);
	font-family: var(--ig-pixel);
	font-size: 1rem;
	white-space: nowrap;
}

/* The scrub track: a dark groove that fills with gold up to the playhead. */
.ig-player .player-scrub {
	--played: 0%;
	flex: 1;
	min-width: 0;
	height: 26px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ig-player .player-scrub:disabled {
	cursor: default;
	opacity: 0.6;
}

.ig-player .player-scrub::-webkit-slider-runnable-track {
	height: 12px;
	background: linear-gradient(90deg, var(--ig-gold) var(--played), #1c2238 var(--played));
	border: var(--ig-px) solid var(--ig-ink);
}

.ig-player .player-scrub::-moz-range-track {
	height: 6px;
	background: linear-gradient(90deg, var(--ig-gold) var(--played), #1c2238 var(--played));
	border: var(--ig-px) solid var(--ig-ink);
}

.ig-player .player-scrub::-webkit-slider-thumb {
	width: 12px;
	height: 24px;
	margin-top: -9px;
	background: var(--ig-gold-light);
	border: var(--ig-px) solid var(--ig-ink);
	-webkit-appearance: none;
	appearance: none;
}

.ig-player .player-scrub::-moz-range-thumb {
	width: 6px;
	height: 18px;
	background: var(--ig-gold-light);
	border: var(--ig-px) solid var(--ig-ink);
	border-radius: 0;
}

/* Volume: the speaker button mutes, and a short upright track pops up above it on hover or
   focus. */
.ig-player .player-volume {
	position: relative;
	flex: none;
	display: flex;
}

.ig-player .player-pop {
	position: absolute;
	bottom: 100%;
	left: 0;
	z-index: 2;
	width: 38px;
	height: 126px;
	padding-bottom: 12px;
	visibility: hidden;
}

.ig-player .player-pop::before {
	content: "";
	position: absolute;
	inset: 0 0 12px;
	background: var(--ig-panel);
	border: var(--ig-px) solid var(--ig-ink);
	box-shadow: inset 0 0 0 var(--ig-px) var(--ig-panel-line);
}

.ig-player .player-volume:hover .player-pop,
.ig-player .player-volume:focus-within .player-pop {
	visibility: visible;
}

.ig-player .player-level {
	--played: 100%;
	position: absolute;
	top: 44px;
	left: -23px;
	width: 84px;
	flex: none;
	transform: rotate(-90deg);
}

/* A phone has its own volume keys, and no hover to open the track with. */
@media (hover: none) {
	.ig-player .player-pop {
		display: none;
	}
}

.ig-player:fullscreen {
	display: flex;
	flex-direction: column;
	max-width: none;
	width: 100vw;
	height: 100vh;
	border: 0;
	outline: 0;
}

.ig-player:fullscreen .player-stage {
	flex: 1;
	aspect-ratio: auto;
}

/* --- Screenshots: Elementor's Basic Gallery widget with the class ig-shots --------------- */

.elementor-widget.ig-shots .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.1rem;
	margin: 0;
}

.elementor-widget.ig-shots .gallery br {
	display: none;
}

.elementor-widget.ig-shots .gallery-item {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.elementor-widget.ig-shots .gallery-icon a {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--ig-panel);
	border: var(--ig-px) solid var(--ig-panel-line);
	outline: var(--ig-px) solid var(--ig-ink);
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
}

.elementor-widget.ig-shots .gallery-icon a:hover,
.elementor-widget.ig-shots .gallery-icon a:focus-visible {
	border-color: var(--ig-gold);
	transform: translateY(-3px);
}

.elementor-widget.ig-shots .gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.elementor-widget.ig-shots .gallery-caption {
	display: none;
}

/* --- Loot row: item slots as a divider ------------------------------------------------- */

.ig-loot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each slot wears the game's own rarity frame, with the item drawn inside it as it is in the bag:
   an 18 pixel frame around a 16 pixel icon, both at three times their size. */
.ig-slot {
	--i: 0;
	position: relative;
	width: 54px;
	height: 54px;
	margin: 0;
	background: center / 100% 100% no-repeat;
}

.ig-slot::before {
	content: "";
	position: absolute;
	inset: 3px;
	background-image: url("../assets/sprites/loot.png");
	background-repeat: no-repeat;
	background-size: calc(16 * 48px) 48px;
	background-position: calc(var(--i) * -48px) 0;
	image-rendering: pixelated;
}

.ig-slot.ig-common {
	background-image: url("../assets/sprites/slot-common.png");
}

.ig-slot.ig-uncommon {
	background-image: url("../assets/sprites/slot-uncommon.png");
}

.ig-slot.ig-rare {
	background-image: url("../assets/sprites/slot-rare.png");
}

.ig-slot.ig-epic {
	background-image: url("../assets/sprites/slot-epic.png");
}

.ig-slot.ig-legendary {
	background-image: url("../assets/sprites/slot-legendary.png");
}

.ig-slot.ig-mythic {
	background-image: url("../assets/sprites/slot-mythic.png");
}

/* --- Logos and art ------------------------------------------------------------------------ */

.e-con.ig-assets {
	--gap: 1.5rem;
	--column-gap: 1.5rem;
	--row-gap: 1.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.e-con.ig-asset {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 1rem;
	--row-gap: 1rem;
	width: auto;
}

.e-con.ig-plate {
	--padding-top: 1.25rem;
	--padding-bottom: 1.25rem;
	--padding-left: 1.25rem;
	--padding-right: 1.25rem;
	align-items: center;
	justify-content: center;
	height: 12.5rem;
	overflow: hidden;
}

.e-con.ig-plate.ig-bleed {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
}

.e-con.ig-plate > .elementor-widget {
	width: 100%;
	height: 100%;
}

.e-con.ig-plate .elementor-widget-image,
.e-con.ig-plate .elementor-widget-image .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.e-con.ig-plate img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
}

.e-con.ig-plate.ig-bleed img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

.elementor-widget.ig-caption {
	font-size: 0.92rem;
	line-height: 1.6;
}

.elementor-widget.ig-caption p {
	margin: 0;
}

.elementor-widget.ig-caption strong {
	display: block;
	color: var(--ig-gold);
	font-family: var(--ig-pixel);
	font-size: 1.05rem;
	font-weight: normal;
	letter-spacing: 0.04em;
}

/* --- Requirements, studio, contact ------------------------------------------------------- */

.e-con.ig-specs {
	--gap: 1.5rem;
	--column-gap: 1.5rem;
	--row-gap: 1.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.e-con.ig-spec {
	--padding-top: 1.4rem;
	--padding-bottom: 1.4rem;
	--padding-left: 1.5rem;
	--padding-right: 1.5rem;
	--gap: 0.5rem;
	--row-gap: 0.5rem;
	width: auto;
}

.elementor-widget.ig-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.97rem;
}

.elementor-widget.ig-list li {
	padding-left: 1.1rem;
	background: linear-gradient(var(--ig-gold), var(--ig-gold)) 0 0.72em / 6px 6px no-repeat;
}

.elementor-widget.ig-narrow {
	max-width: 44rem;
}

.e-con.ig-contact {
	--padding-top: 1.75rem;
	--padding-bottom: 1.75rem;
	--padding-left: 2rem;
	--padding-right: 2rem;
	--gap: 2rem;
	--column-gap: 2rem;
	--row-gap: 1rem;
	align-items: center;
}

.elementor-widget.ig-keeper-w {
	width: auto;
	max-width: none;
	margin: -0.5rem 0;
}

.e-con.ig-contact-copy {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	--row-gap: 0;
	flex: 1;
	min-width: 0;
}

.elementor-widget.ig-contact-text p {
	margin: 0 0 1.1rem;
}

.elementor-widget.ig-contact-text p:last-child {
	margin-bottom: 0;
}

.elementor-widget.ig-contact-text .ig-mail {
	font-family: var(--ig-pixel);
	font-size: 1.35rem;
	overflow-wrap: anywhere;
}

.e-con.ig-contact-copy > .e-con.ig-actions {
	margin-top: 1.25rem;
}

/* --- Narrow screens ------------------------------------------------------------------------ */

@media (max-width: 52rem) {
	.e-con.ig-intro {
		flex-direction: column;
		--flex-direction: column;
	}

	.e-con.ig-facts {
		width: 100%;
	}

	/* The scene moves above the copy so the text never sits on the character. */
	.e-con.ig-hero {
		display: block;
		min-height: 0;
	}

	.elementor-widget.ig-scene {
		position: relative;
		inset: auto;
		height: auto;
		aspect-ratio: 4 / 3;
		border-bottom: var(--ig-px) solid var(--ig-ink);
	}

	.ig-hero-scene {
		background-size: cover;
		background-position: 88% bottom;
	}

	.ig-hero-scene::after {
		display: none;
	}

	.e-con.ig-hero-copy {
		--padding-top: 2rem;
		--padding-bottom: 2.5rem;
	}

	.ig-horde-row .ig-sprite:nth-child(n + 5) {
		display: none;
	}

	.e-con.ig-contact,
	.e-con.ig-game-next {
		flex-direction: column;
		--flex-direction: column;
		align-items: flex-start;
	}

	.e-con.ig-game {
		flex-direction: column;
		--flex-direction: column;
		align-items: stretch;
	}

	.e-con.ig-game-art,
	.e-con.ig-game-copy,
	.e-con.ig-game-next-copy {
		flex-basis: auto;
	}

	.e-con.ig-game-next-copy {
		width: 100%;
	}
}

/* Phones: the header keeps the name and the menu button; the demo button moves out of the way. */
@media (max-width: 40rem) {
	.elementor-widget.ig-header-cta {
		display: none;
	}

	.ig-brand {
		font-size: 1.2rem;
	}
}

@media (max-width: 24rem) {
	.ig-card {
		zoom: 0.9;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:has(body.ig-kit) {
		scroll-behavior: auto;
	}

	.ig-sprite,
	.ig-rune-ring,
	.ig-rune-ring i,
	.ig-player.is-loading .player-big,
	.elementor-widget.ig-h2 .elementor-heading-title::before {
		animation: none;
	}

	.ig-card,
	.elementor-widget.ig-shots .gallery-icon a {
		transition: none;
		transform: none;
	}
}