@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-feature-settings: "palt";
}

:root {
	--pixel-font: "DotGothic16", "M PLUS 1p", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--ink: #1d1b2e;
	--night: #191528;
	--frame: #f9f1c0;
	--gold: #f2b544;
	--grass: #74b85d;
	--grass-dark: #33764a;
	--water: #4fa6c8;
	--road: #d3a05f;
}

html {
	background: #171829;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	background:
		linear-gradient(rgba(14, 12, 28, 0.2), rgba(14, 12, 28, 0.3)),
		url("../img/generated_toukai_map.png") center top / cover fixed no-repeat,
		#171829;
	color: #fff;
	font-family: var(--pixel-font);
	scroll-margin-top: 0 !important;
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 8px 8px,
		linear-gradient(rgba(0,0,0,0.16) 50%, transparent 50%) 0 0 / 100% 4px;
	mix-blend-mode: multiply;
}

.body1 {
	position: relative;
	z-index: 1;
	width: calc(100% - 2em);
	max-width: 980px;
	margin: 0 auto;
	padding-top: 190px;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}

a {
	text-decoration: none;
}

.m0auto { margin: 0 auto; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb50 { margin-bottom: 50px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt30 { margin-top: 30px !important; }
.mt50 { margin-top: 50px !important; }
.mb1em { margin-bottom: 1em !important; }
.mb2em { margin-bottom: 2em !important; }
.mb3em { margin-bottom: 3em !important; }
.mt1em { margin-top: 1em !important; }
.mt2em { margin-top: 2em !important; }
.mt3em { margin-top: 3em !important; }
.red { color: red; }
.yelllow { color: yellow; }
.white { color: white; }
.blue { color: blue; }
.green { color: green; }
.DechauOrange { color: #ff4200; }
.clear { clear: both; }

.questLp {
	display: grid;
	gap: 34px;
}

.questHero,
.adventureStage,
.embeddedWrap {
	box-shadow: 0 18px 0 rgba(0, 0, 0, 0.2), 0 0 0 4px #0f1020, 0 0 0 8px #f2b544;
}

.questHero {
	position: relative;
	min-height: 640px;
	overflow: hidden;
	border: 4px solid #fff8d6;
	background:
		linear-gradient(rgba(16, 21, 31, 0.08), rgba(16, 21, 31, 0.18)),
		url("../img/generated_toukai_map.png") center / cover no-repeat;
	isolation: isolate;
}

.pixelMap {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(25, 1fr);
	grid-auto-rows: 1fr;
	image-rendering: pixelated;
}

.tile {
	position: relative;
	min-height: 28px;
}

.tile.grass { background: var(--grass); }
.tile.dark { background: var(--grass-dark); }
.tile.water { background: var(--water); }
.tile.road { background: var(--road); }
.tile.sand { background: #e4ca77; }
.tile.forest { background: #216544; }
.tile.mountain { background: #8a7d77; }
.tile.castle { background: #7870a8; }

.tile.grass::after,
.tile.dark::after,
.tile.sand::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(90deg, rgba(255,255,255,0.14) 2px, transparent 2px),
		linear-gradient(rgba(0,0,0,0.1) 2px, transparent 2px);
	background-size: 14px 14px;
	opacity: 0.55;
}

.tile.water::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(135deg, rgba(255,255,255,0.35) 0 4px, transparent 4px 14px);
	animation: waterShift 1.1s steps(2) infinite;
}

.tile.forest::before,
.tile.mountain::before,
.tile.castle::before {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(0,0,0,0.34);
	font-size: 20px;
	line-height: 1;
}

.tile.forest::before { content: "▲"; color: #102f20; }
.tile.mountain::before { content: "◆"; color: #5d5350; }
.tile.castle::before { content: "▣"; color: #fff2a3; }

.heroMap {
	filter: saturate(1.2) contrast(1.04);
	transform: scale(1.02);
}

.heroMap::after,
.questMap::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0,0,0,0.18) 1px, transparent 1px),
		linear-gradient(rgba(0,0,0,0.16) 1px, transparent 1px);
	background-size: calc(100% / 25) calc(100% / 18);
	pointer-events: none;
}

.cloudLayer {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.cloudLayer span {
	position: absolute;
	width: 84px;
	height: 32px;
	background: #fff6cf;
	box-shadow: 28px 0 #fff6cf, 56px 0 #fff6cf, 28px -18px #fff6cf;
	opacity: 0.78;
	image-rendering: pixelated;
	animation: cloudDrift 18s linear infinite;
}

.cloudLayer span:nth-child(1) { top: 9%; left: -20%; }
.cloudLayer span:nth-child(2) { top: 28%; left: -48%; animation-duration: 24s; animation-delay: -8s; }
.cloudLayer span:nth-child(3) { top: 59%; left: -32%; animation-duration: 20s; animation-delay: -15s; }

.pixelTitle {
	position: relative;
	z-index: 4;
	width: min(480px, 78vw);
	margin: 24px auto 0;
	text-align: center;
	animation: logoBob 1.8s steps(2) infinite;
}

.mainQuestLogo {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(8px 8px 0 rgba(0,0,0,0.5));
	image-rendering: auto;
}

.titleEnemies {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.titleEnemy {
	position: absolute;
	width: 118px;
	height: auto;
	image-rendering: pixelated;
	filter: drop-shadow(6px 7px 0 rgba(0,0,0,0.35));
	opacity: 0;
}

.titleEnemyDragon {
	top: 58px;
	left: clamp(12px, 4vw, 58px);
	animation: bossAppear 0.8s steps(5) 0.35s forwards, dragonHover 3.8s steps(6) 1.15s infinite;
}

.titleEnemyDemon {
	top: 96px;
	right: clamp(12px, 4vw, 58px);
	width: 112px;
	animation: bossAppear 0.8s steps(5) 0.7s forwards, demonHover 2.8s steps(4) 1.5s infinite;
}

.questWindow {
	position: relative;
	z-index: 5;
	width: min(790px, calc(100% - 36px));
	margin: 8px auto 2em;
	padding: 24px 28px 26px;
	border: 4px solid #fff;
	background: rgba(18, 18, 35, 0.94);
	box-shadow: inset 0 0 0 4px #3f3768, 8px 8px 0 rgba(0,0,0,0.36);
	color: #fff8d6;
	text-shadow: 2px 2px #000;
}

.questWindow::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 20px;
	width: 18px;
	height: 18px;
	background: var(--gold);
	box-shadow: 26px 0 #fff, 52px 0 var(--gold), 78px 0 #fff;
}

.windowLabel {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 10px;
	background: #ff4200;
	color: #fff;
	font-size: 15px;
	letter-spacing: 0;
	box-shadow: 3px 3px 0 #000;
}

.questWindow h2 {
	margin-bottom: 14px;
	font-size: clamp(28px, 4.7vw, 48px);
	line-height: 1.1;
	color: #ffe36e;
	letter-spacing: 0;
}

.questWindow ul {
	display: grid;
	gap: 10px;
	list-style: none;
	font-size: clamp(18px, 2.7vw, 25px);
	line-height: 1.55;
}

.questWindow li {
	position: relative;
	padding-left: 1.25em;
}

.questWindow li::before {
	content: "▶";
	position: absolute;
	left: 0;
	color: #76e06b;
	animation: blink 0.95s steps(2) infinite;
}

.partyLine {
	position: relative;
	z-index: 7;
	width: 100%;
	height: 105px;
	margin: -170px 0 18px;
	overflow: hidden;
	pointer-events: none;
}

.partyLine img {
	position: absolute;
	bottom: 0;
	width: 68px;
	image-rendering: pixelated;
	filter: drop-shadow(0 8px 0 rgba(0,0,0,0.28));
	animation: partyWalk 8s linear infinite, stepBounce 0.45s steps(2) infinite;
}

.partyLine img:nth-child(1) { animation-delay: -2.3s, 0s; }
.partyLine img:nth-child(2) { width: 72px; animation-delay: -4.8s, -0.1s; }
.partyLine img:nth-child(3) { width: 70px; animation-delay: -6.1s, -0.2s; }

.adventureStage {
	position: relative;
	overflow: hidden;
	border: 4px solid #fff8d6;
	background: rgba(22, 20, 42, 0.94);
	padding: 18px;
}

.stageHud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding: 12px 14px;
	border: 3px solid #fff8d6;
	background: #0f1020;
	box-shadow: inset 0 -4px 0 rgba(255,255,255,0.12);
}

.stageHud p {
	color: #ffe36e;
	font-size: clamp(20px, 3.5vw, 32px);
	text-shadow: 2px 2px #000;
}

.stageHud span {
	color: #76e06b;
	font-size: clamp(13px, 2.2vw, 18px);
}

.mapFrame {
	position: relative;
	overflow: hidden;
	min-height: 430px;
	border: 4px solid #0f1020;
	background:
		linear-gradient(rgba(255,255,255,0.02), rgba(0,0,0,0.04)),
		url("../img/generated_toukai_map.png") center / cover no-repeat;
}

.mapFrame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(0,0,0,0.16) 1px, transparent 1px),
		linear-gradient(rgba(0,0,0,0.15) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}

.questMap {
	grid-template-columns: repeat(25, 1fr);
	grid-template-rows: repeat(18, 1fr);
}

.walkers {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.walker {
	position: absolute;
	width: var(--size, 54px);
	height: var(--size, 54px);
	background-image: var(--sprite);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	image-rendering: pixelated;
	filter: drop-shadow(0 7px 0 rgba(0,0,0,0.28));
	transform: translate(-50%, -50%);
	animation: walkerBob 0.42s steps(2) infinite;
}

.walker::after {
	content: "";
	position: absolute;
	left: 24%;
	right: 24%;
	bottom: 0;
	height: 6px;
	background: rgba(0,0,0,0.28);
}

.mapEnemies {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.mapEnemy {
	position: absolute;
	width: 76px;
	height: auto;
	image-rendering: pixelated;
	filter: drop-shadow(0 7px 0 rgba(0,0,0,0.28));
}

.mapEnemyDragon {
	left: 18%;
	top: 22%;
	animation: mapDragonPatrol 5.8s steps(7) infinite;
}

.mapEnemyDemon {
	right: 16%;
	bottom: 18%;
	width: 72px;
	animation: mapDemonWarp 4.6s steps(5) infinite;
}

.questMarker {
	position: absolute;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 3px solid #fff;
	background: #ff4200;
	color: #fff;
	font-size: 24px;
	font-weight: 900;
	box-shadow: 4px 4px 0 rgba(0,0,0,0.36);
	animation: markerJump 0.8s steps(2) infinite;
}

.markerNagoya { left: 55%; top: 28%; }
.markerMikawa { left: 71%; top: 58%; animation-delay: -0.25s; }
.markerIse { left: 31%; top: 70%; animation-delay: -0.45s; }

.questCards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 16px;
}

.questCards article {
	border: 3px solid #fff8d6;
	background: #25213f;
	padding: 16px;
	box-shadow: 5px 5px 0 rgba(0,0,0,0.28);
}

.questCards span {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 28px;
	margin-bottom: 10px;
	background: var(--gold);
	color: #171829;
	font-weight: 900;
	box-shadow: 3px 3px 0 #000;
}

.questCards h2 {
	margin-bottom: 8px;
	color: #ffe36e;
	font-size: 22px;
	letter-spacing: 0;
}

.questCards p {
	color: #fff;
	font-size: 16px;
	line-height: 1.65;
}

.embeddedWrap {
	display: flex;
	justify-content: center;
	margin-top: 34px;
	background: white;
	border: 4px solid #0f1020;
	border-radius: 0;
	padding: 10px;
}

.embedded1 {
	width: 100%;
	max-width: 812px;
	height: 600px;
	border-radius: 0;
	background: #fff;
}

.copyright {
	margin: 24px 0;
	color: #fff8d6 !important;
	font-size: 0.75em;
	text-align: center;
	text-shadow: 1px 1px #000;
}

.fadeInUp {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s steps(5), transform 0.8s steps(5);
}

@keyframes waterShift {
	50% { transform: translate(6px, 0); }
}

@keyframes cloudDrift {
	to { transform: translateX(1350px); }
}

@keyframes logoBob {
	50% { transform: translateY(-8px); }
}

@keyframes bossAppear {
	0% {
		opacity: 0;
		transform: translateY(14px) scale(0.78);
	}
	70% {
		opacity: 1;
		transform: translateY(-6px) scale(1.06);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes dragonHover {
	0%, 100% {
		opacity: 1;
		transform: translate(0, 0) rotate(-4deg);
	}
	50% {
		opacity: 1;
		transform: translate(14px, -10px) rotate(3deg);
	}
}

@keyframes demonHover {
	0%, 100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	50% {
		opacity: 1;
		transform: translateY(-8px) scale(1.04);
	}
}

@keyframes partyWalk {
	from { left: -120px; }
	to { left: calc(100% + 120px); }
}

@keyframes stepBounce {
	50% { transform: translateY(-7px); }
}

@keyframes walkerBob {
	50% { margin-top: -5px; }
}

@keyframes mapDragonPatrol {
	0%, 100% {
		transform: translate(0, 0) rotate(-3deg);
	}
	35% {
		transform: translate(26px, -16px) rotate(2deg);
	}
	70% {
		transform: translate(10px, 18px) rotate(-1deg);
	}
}

@keyframes mapDemonWarp {
	0%, 100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	45% {
		opacity: 1;
		transform: translateY(-12px) scale(1.05);
	}
	48% {
		opacity: 0;
		transform: translateY(-12px) scale(0.9);
	}
	55% {
		opacity: 0;
		transform: translate(18px, -20px) scale(0.9);
	}
	65% {
		opacity: 1;
		transform: translate(18px, -20px) scale(1.08);
	}
}

@keyframes markerJump {
	50% { transform: translateY(-8px); }
}

@keyframes blink {
	50% { opacity: 0; }
}

@media (max-width: 813px) {
	.body1 {
		width: calc(100% - 1em);
		padding-top: 120px;
	}

	.questHero {
		min-height: 610px;
	}

	.pixelTitle {
		width: min(330px, 82vw);
		margin-top: 8px;
	}

	.titleEnemy {
		width: 74px;
	}

	.titleEnemyDragon {
		top: 70px;
		left: 0;
	}

	.titleEnemyDemon {
		top: 92px;
		right: 0;
		width: 72px;
	}

	.questWindow {
		width: calc(100% - 20px);
		padding: 20px 18px;
	}

	.partyLine {
		height: 82px;
		margin: -116px 0 12px;
	}

	.partyLine img {
		width: 52px;
	}

	.partyLine img:nth-child(2) {
		width: 56px;
	}

	.partyLine img:nth-child(3) {
		width: 54px;
	}

	.stageHud {
		align-items: flex-start;
		flex-direction: column;
	}

	.mapFrame {
		min-height: 360px;
	}

	.mapEnemy {
		width: 58px;
	}

	.mapEnemyDragon {
		left: 12%;
		top: 18%;
	}

	.mapEnemyDemon {
		right: 9%;
		bottom: 20%;
		width: 54px;
	}

	.questCards {
		grid-template-columns: 1fr;
	}

	.questCards article {
		padding: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}