/* Ink Knight site: parchment, ink and the game's own line boil (an SVG filter re-seeded 8x a second). */
:root {
	--paper: #efe2c6;
	--paper-2: #e6d5b3;
	--paper-3: #d8c39a;
	--ink: #2a211c;
	--ink-soft: #5d4d40;
	--muted: #8a7560;
	--ember: #e8823a;
	--gold: #f2c23a;
	--blood: #d8413a;
	--steel: #4f97c9;
	--moss: #62a84f;
	--night: #1f1a17;
	--r: 22px;
	--display: "Rubik", "Arial Black", sans-serif;
	--body: "Kurale", Georgia, serif;
	--hand: "Neucha", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 18px/1.6 var(--body);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
/* paper grain over everything */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 50;
	opacity: 0.35;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.26 0 0 0 0 0.17 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.boil { filter: url(#boil); }
@media (prefers-reduced-motion: reduce) { .boil { filter: none; } }

.wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }

/* --- type -------------------------------------------------------------------- */
.display {
	font-family: var(--display);
	font-weight: 900;
	letter-spacing: 0.01em;
	line-height: 0.95;
	color: #fff4dc;
	-webkit-text-stroke: 0.09em var(--ink);
	paint-order: stroke fill;
	text-shadow: 0 0.06em 0 var(--ink);
}
h2.section {
	font-family: var(--display);
	font-weight: 900;
	font-size: clamp(34px, 6vw, 64px);
	line-height: 1;
	margin: 0 0 18px;
	color: var(--ink);
}
h2.section em { font-style: normal; color: var(--ember); }
.hand { font-family: var(--hand); color: var(--ink-soft); font-size: 22px; }
.kicker {
	display: inline-block;
	font-family: var(--hand);
	font-size: 20px;
	padding: 2px 14px;
	border: 3px solid var(--ink);
	border-radius: 999px;
	background: var(--gold);
	transform: rotate(-2deg);
	margin-bottom: 14px;
}

/* --- top bar ------------------------------------------------------------------ */
.top {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: linear-gradient(var(--night), rgba(31, 26, 23, 0.82));
	border-bottom: 4px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff4dc; font: 900 20px var(--display); }
.brand img { width: 38px; height: 38px; border-radius: 10px; border: 3px solid var(--ink); }
.top nav { display: flex; gap: 6px; align-items: center; }
.top nav a, .lang button {
	font: 700 15px var(--display);
	color: #f3e9d2;
	text-decoration: none;
	padding: 7px 12px;
	border-radius: 12px;
}
.top nav a:hover { background: rgba(255, 255, 255, 0.08); }
.lang { display: flex; border: 3px solid #5a4a40; border-radius: 14px; overflow: hidden; margin-left: 6px; }
.lang button { background: none; border: 0; cursor: pointer; border-radius: 0; padding: 5px 10px; }
.lang button[aria-pressed="true"] { background: var(--ember); color: #fff; }
@media (max-width: 720px) { .top nav a.hide-sm { display: none; } }

/* --- buttons (the game's chunky buttons) -------------------------------------- */
.btn {
	--c: var(--ember);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px 16px;
	border: 4px solid var(--ink);
	border-radius: 18px;
	background: var(--c);
	color: #fff;
	font: 900 20px/1.1 var(--display);
	text-decoration: none;
	box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 45%, #000), 0 8px 0 4px var(--ink);
	transition: transform 0.12s, box-shadow 0.12s;
	-webkit-text-stroke: 0.04em var(--ink);
	paint-order: stroke fill;
}
.btn small { display: block; font: 700 12px var(--display); opacity: 0.9; -webkit-text-stroke: 0; letter-spacing: 0.04em; }
.btn::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 9px;
	width: 38%;
	height: 5px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.45);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(6px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 45%, #000), 0 2px 0 4px var(--ink); }
.btn svg { width: 30px; height: 30px; flex: none; }
.btn.blue { --c: var(--steel); }
.btn.green { --c: var(--moss); }

/* --- hero ----------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: min(100svh, 980px);
	padding: 120px 0 calc(min(41.6vw, 560px) - 40px);
	background: url("hero.webp") center bottom / max(100%, 1100px) auto no-repeat,
		linear-gradient(#15110f 0%, #271d2e 55%, #271d2e 100%);
	border-bottom: 6px solid var(--ink);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(60% 45% at 50% 28%, rgba(20, 15, 12, 0.55), transparent 70%);
}
.hero .wrap { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 720px) {
	.hero { min-height: 0; padding: 104px 0 300px; background-size: 820px auto, auto; background-position: 22% bottom, 0 0; }
}
.hero h1 { font-size: clamp(64px, 12vw, 150px); margin: 0; animation: rise 0.9s cubic-bezier(.2, 1.4, .4, 1) both; }
.hero .tag {
	margin: 18px auto 30px;
	max-width: 32ch;
	color: #f3e9d2;
	font-size: clamp(20px, 2.3vw, 26px);
	line-height: 1.35;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
	animation: rise 0.9s 0.12s both;
}
.hero .tag b { color: var(--gold); font-weight: 400; }
.stores { display: flex; flex-wrap: wrap; gap: 18px 16px; justify-content: center; animation: rise 0.9s 0.24s both; }
.soon { margin-top: 18px; color: #d8c39a; font-family: var(--hand); font-size: 20px; animation: rise 0.9s 0.36s both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-60px) rotate(-6deg); } }
@keyframes float { 50% { translate: 0 -10px; rotate: -1deg; } }
/* torn paper edge under dark blocks */
.torn {
	height: 34px;
	margin-top: -1px;
	background: var(--night);
	clip-path: polygon(0 0, 100% 0, 100% 40%, 96% 70%, 91% 35%, 85% 80%, 79% 45%, 72% 90%, 66% 40%, 58% 75%, 51% 30%, 44% 85%, 37% 45%, 30% 80%, 23% 35%, 16% 70%, 9% 30%, 4% 75%, 0 45%);
}

/* --- sections ---------------------------------------------------------------- */
section { padding: 90px 0; position: relative; }
.lead { font-size: 21px; max-width: 60ch; color: var(--ink-soft); margin: 0 0 30px; }

/* forge -> fight */
.loop { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; margin-top: 36px; }
.card {
	position: relative;
	background: var(--paper-2);
	border: 4px solid var(--ink);
	border-radius: var(--r);
	padding: 24px 22px 22px;
	box-shadow: 0 10px 0 var(--ink);
}
.card h3 { font: 900 26px/1.1 var(--display); margin: 10px 0 8px; }
.card p { margin: 0; color: var(--ink-soft); }
.card .ico {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	border: 4px solid var(--ink);
	background: #5a4a40;
	display: grid;
	place-items: center;
}
.card .ico svg { width: 44px; height: 44px; }
.arrow { align-self: center; width: 60px; }
@media (max-width: 860px) { .loop { grid-template-columns: 1fr; } .arrow { transform: rotate(90deg); justify-self: center; } }

.rarities { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.rar {
	font: 800 16px var(--display);
	color: #fff;
	padding: 8px 14px;
	border: 3px solid var(--ink);
	border-radius: 12px;
	background: var(--c);
	-webkit-text-stroke: 0.05em var(--ink);
	paint-order: stroke fill;
	box-shadow: 0 5px 0 var(--ink);
	transform: rotate(var(--t, 0deg));
}
.rar.shine { animation: shine 2.4s ease-in-out infinite; }
@keyframes shine { 50% { box-shadow: 0 5px 0 var(--ink), 0 0 26px 4px var(--c); } }

/* screenshot reel */
.reel-sec { background: var(--night); color: #f3e9d2; overflow: hidden; }
.reel-sec h2.section { color: #fff4dc; }
.reel-sec .lead { color: #d8c39a; }
.reel {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 18px max(16px, (100vw - 1180px) / 2) 40px;
	scrollbar-width: thin;
	scrollbar-color: var(--ember) transparent;
}
.reel figure { margin: 0; flex: none; width: min(280px, 72vw); scroll-snap-align: center; }
.reel img {
	width: 100%;
	height: auto;
	aspect-ratio: auto 560 / 1213;  /* the shots' own shape, whatever the browser makes of the size attributes */
	object-fit: cover;
	border-radius: 22px;
	border: 4px solid #000;
	transition: transform 0.25s;
}
.reel figure:nth-child(odd) img { transform: rotate(-1.5deg); }
.reel figure:nth-child(even) img { transform: rotate(1.5deg); }
.reel figure:hover img { transform: rotate(0) scale(1.03); }

/* lands */
.lands { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 30px; }
.land {
	border: 4px solid var(--ink);
	border-radius: 18px;
	padding: 16px 16px 14px;
	color: #fff4dc;
	background: linear-gradient(160deg, var(--a), var(--b));
	box-shadow: 0 8px 0 var(--ink);
	min-height: 128px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.2s;
}
.land:hover { transform: translateY(-4px) rotate(-1deg); }
.land b { font: 900 21px/1.1 var(--display); -webkit-text-stroke: 0.05em var(--ink); paint-order: stroke fill; }
.land span { font-family: var(--hand); font-size: 18px; opacity: 0.92; }
.land i { font-style: normal; font: 700 13px var(--display); opacity: 0.8; }

/* feature grid */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
@media (max-width: 860px) { .grid3 { grid-template-columns: 1fr; } }
.grid3 .card:nth-child(3n + 1) { transform: rotate(-0.8deg); }
.grid3 .card:nth-child(3n + 3) { transform: rotate(0.8deg); }

/* trailer */
.trailer { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.trailer video { width: min(340px, 100%); justify-self: center; border-radius: 26px; border: 5px solid var(--ink); box-shadow: 0 14px 0 var(--ink); background: #000; }
@media (max-width: 860px) { .trailer { grid-template-columns: 1fr; } }

/* call to action */
.cta { background: var(--ember); border-top: 6px solid var(--ink); border-bottom: 6px solid var(--ink); text-align: center; padding: 70px 0; }
.cta h2 { font-size: clamp(40px, 8vw, 86px); margin: 0 0 26px; }
.cta .stores { justify-content: center; }

/* footer */
footer { background: var(--night); color: #d8c39a; padding: 46px 0 60px; font-size: 16px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer a { color: #f3e9d2; text-decoration: none; border-bottom: 2px solid #5a4a40; }
footer a:hover { border-color: var(--ember); }

/* reveal on scroll */
.reveal { opacity: 0; translate: 0 30px; transition: opacity 0.7s, translate 0.7s cubic-bezier(.2, 1.2, .4, 1); }
.reveal.on { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; translate: 0 0; } }

/* --- document pages (privacy, terms, support) --------------------------------- */
.doc-head { background: var(--night); padding: 110px 0 40px; border-bottom: 6px solid var(--ink); }
.doc-head h1 { font-size: clamp(44px, 8vw, 84px); margin: 0; }
.doc-head p { color: #d8c39a; margin: 12px 0 0; font-family: var(--hand); font-size: 20px; }
.doc { padding: 50px 0 80px; }
.doc .wrap { max-width: 820px; }
.doc h2 { font: 900 28px/1.15 var(--display); margin: 44px 0 10px; }
.doc h3 { font: 800 20px var(--display); margin: 26px 0 6px; }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 16px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border: 3px solid var(--ink); background: var(--paper-2); }
.doc th { background: var(--paper-3); font-family: var(--display); }
.doc .note { border: 4px solid var(--ink); border-radius: 18px; background: var(--paper-2); padding: 18px 20px; box-shadow: 0 8px 0 var(--ink); }
.doc .toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.doc .toc a { font: 700 15px var(--display); text-decoration: none; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 12px; background: var(--paper-2); }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 4px 0 14px 58px; }
.steps li::before {
	content: counter(s);
	position: absolute;
	left: 0;
	top: 0;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 3px solid var(--ink);
	border-radius: 50%;
	background: var(--gold);
	font: 900 20px var(--display);
}
[hidden] { display: none !important; }