/* ============ Base ============ */
:root {
	--acc: 14, 165, 233;
	/* アクセント rgb */
	--fg: 17, 24, 39;
	/* 本文（ライト） */
	--muted: 75, 85, 99;
	/* 補助（ライト） */
	--bg: 255, 255, 255;
	/* 背景（ライト） */
	--bd: 229, 231, 235;
	/* 枠線（ライト） */
}

* {
	box-sizing: border-box
}

html,
body {
	height: 100%
}

body {
	margin: 0;
	font: 15px/1.75 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	color: rgb(var(--fg));
	background: rgb(var(--bg));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: rgb(var(--fg));
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: .08em;
}

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

.wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: 20px 16px;
}

/* ============ Header ============ */
header.site-header {
	border-bottom: 1px solid rgba(var(--bd), .9);
	background: linear-gradient(180deg, rgba(var(--acc), .06), rgba(255, 255, 255, 0) 70%);
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
}

.brand .logo {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: linear-gradient(135deg, rgba(var(--acc), .9), rgba(var(--acc), .55));
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.brand .title {
	font-weight: 800;
	letter-spacing: .2px;
	font-size: 18px;
}

.brand .sub {
	color: rgb(var(--muted));
	font-size: 12px
}

/* ============ Main / Embed ============ */
main {
	padding: 18px 0 6px
}

.godot-card {
	background: white;
	border: 1px solid rgba(var(--bd), .95);
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.godot-wrap {
	aspect-ratio: 16/9;
	width: 100%;
	max-width: 960px;
	margin: 10px auto 8px;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(2, 6, 23, .03);
	border: 1px solid rgba(var(--bd), .9);
}

.godot-wrap>iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.help {
	text-align: center;
	color: rgb(var(--muted));
	font-size: 12px;
	margin-top: 8px;
}

.open-link {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid rgba(var(--bd), .95);
	text-decoration: none;
	margin-top: 8px;
	background: linear-gradient(180deg, rgba(var(--acc), .08), rgba(255, 255, 255, 0));
}

.open-link:hover {
	opacity: .9
}

/* ============ Back to Top Link ============ */
.back-to-top {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: rgba(var(--bg), 0.95);
	border: 1px solid rgba(var(--bd), 0.8);
	border-radius: 12px;
	text-decoration: none;
	color: rgb(var(--fg));
	font-size: 14px;
	font-weight: 600;
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	border-color: rgba(var(--acc), 0.4);
}

.back-to-top .arrow {
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right: none;
	border-bottom: none;
	transform: rotate(135deg);
	transition: transform 0.3s ease;
}

.back-to-top:hover .arrow {
	transform: rotate(135deg) translateX(-2px);
}

/* ============ Footer ============ */
footer.site-footer {
	font-size: 13px;
	color: rgb(var(--muted));
	max-width: 1040px;
	margin: 28px auto 40px;
	padding: 0 16px;
	position: relative;
}

footer.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 16px auto 16px;
	height: 3px;
	background: linear-gradient(90deg, rgba(var(--acc), .85), rgba(var(--acc), .25) 35%, rgba(var(--acc), .25) 65%, rgba(var(--acc), .85));
	border-radius: 999px;
	filter: saturate(120%);
	opacity: .9;
}

footer.site-footer .inner {
	margin-top: 14px;
	background: linear-gradient(180deg, rgba(var(--acc), .07), rgba(255, 255, 255, 0) 65%);
	border: 1px solid rgba(var(--bd), .9);
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}

footer.site-footer p {
	margin: 10px 0;
	padding: 10px 12px 10px 14px;
	border-left: 3px solid rgba(var(--acc), .55);
	background: rgba(2, 6, 23, .02);
	border-radius: 10px;
	color: rgb(var(--fg));
}

footer.site-footer p strong {
	font-weight: 700;
	color: rgb(var(--fg));
}

@media (min-width: 900px) {
	footer.site-footer .inner {
		column-count: 1;
		column-gap: 18px;
	}

	footer.site-footer p {
		break-inside: avoid;
	}
}

/* ============ Dark mode ============ */
@media (prefers-color-scheme: dark) {
	:root {
		--fg: 229, 231, 235;
		--muted: 156, 163, 175;
		--bg: 17, 24, 39;
		--bd: 63, 63, 70;
	}

	.godot-card {
		background: #0b1220;
		border-color: rgba(var(--bd), .8);
		box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	}

	.godot-wrap {
		background: rgba(255, 255, 255, .04);
		border-color: rgba(var(--bd), .8);
	}

	.open-link {
		border-color: rgba(var(--bd), .8);
		background: linear-gradient(180deg, rgba(var(--acc), .12), rgba(0, 0, 0, 0));
	}

	footer.site-footer .inner {
		border-color: rgba(var(--bd), .8);
		box-shadow: 0 6px 28px rgba(0, 0, 0, .25);
	}

	footer.site-footer p {
		background: rgba(255, 255, 255, .03);
	}

	.back-to-top {
		background: rgba(var(--bg), 0.95);
		border-color: rgba(var(--bd), 0.8);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	}

	.back-to-top:hover {
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
	}
}