/* ===========================================================
   Zealot Gaming - 8-bit Fantasy JRPG theme
   =========================================================== */

/* custom fonts (shared with the arcade build) */
@font-face {
	font-family: "Pixel Game";
	src: url("../fonts/Pixel Game.otf") format("opentype");
	font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Game Paused";
	src: url("../fonts/Game Paused.otf") format("opentype");
	font-weight: normal; font-style: normal; font-display: swap;
}

/* ---------- palette ---------- */
:root {
	--bg:        #16203f;   /* page bg (lighter, less black) */
	--bg-2:      #1c2950;
	--sky-1:     #3f86d6;   /* high day sky     */
	--sky-2:     #6fb0e6;   /* mid day sky      */
	--sky-3:     #a9d8f2;   /* low day sky      */
	--sky-4:     #d8eef8;   /* horizon haze     */
	--grass:     #4f9d3f;
	--grass-d:   #397a2c;
	--water:     #2f7fd8;

	--blue:      #3a6bff;   /* logo blue        */
	--blue-d:    #274bbf;
	--sky-cyan:  #7fb0ff;
	--gold:      #f0c65a;   /* fantasy gold     */
	--gold-d:    #b8912f;
	--silver:    #c4ccdf;
	--red:       #e5484d;   /* soviet star / hp */
	--green:     #57d977;

	--stone:     #6f7488;
	--stone-d:   #4b4f63;
	--stone-l:   #9096ab;
	--stone-dd:  #34374a;

	--win-1:     #16295f;   /* window fill top    */
	--win-2:     #0c1740;   /* window fill bottom */
	--win-edge:  #dfe7ff;   /* window light border*/
	--win-frame: #244fc4;   /* window blue frame  */

	--text:      #e7ebfb;
	--muted:     #9aa2c2;
	--parch:     #e9e2c8;   /* parchment text     */

	--font-display: "Pixel Game", "Courier New", monospace;
	--font-ui:      "Game Paused", "Pixel Game", monospace;
	--font-body:    "Source Sans Pro", "Segoe UI", system-ui, sans-serif;

	--glow-blue: 0 0 6px rgba(58,107,255,.8), 0 0 18px rgba(58,107,255,.5);
	--glow-gold: 0 0 6px rgba(240,198,90,.85), 0 0 16px rgba(240,198,90,.45);

	--maxw: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	/* one continuous atmosphere: day sky (top, behind the hero) flowing down into evening */
	background:
		radial-gradient(1100px 600px at 50% 118%, rgba(58,107,255,.10), transparent 60%),
		linear-gradient(180deg,
			#5f97dd 0%,
			#74a8e0 12%,
			#7fb0e6 18%,
			#6a86c4 26%,
			#52639f 40%,
			#3b447c 58%,
			#2a3160 76%,
			#1c2346 100%);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.7;
	letter-spacing: .2px;
	overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .2s ease, text-shadow .2s ease; }
a:hover { color: #fff; text-shadow: var(--glow-gold); }

h1, h2, h3 { font-family: var(--font-display); font-weight: normal; line-height: 1.15; }
p { margin: 0 0 1.1em; color: #cfd5ee; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* pixel-crisp sprites */
.sprite {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	display: block;
}

/* ---------- CRT scanline overlay ---------- */
body::before {
	content: "";
	position: fixed; inset: 0;
	pointer-events: none; z-index: 9999;
	background: repeating-linear-gradient(to bottom,
		rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
		rgba(0,0,0,.16) 3px, rgba(0,0,0,0) 4px);
	mix-blend-mode: multiply; opacity: .5;
}
body::after {
	content: "";
	position: fixed; inset: 0;
	pointer-events: none; z-index: 9998;
	background: radial-gradient(120% 120% at 50% 45%, transparent 58%, rgba(0,0,0,.6) 100%);
}
body.no-crt::before { display: none; }

/* ===========================================================
   Header / Nav
   =========================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(9,10,22,.82);
	backdrop-filter: blur(8px);
	border-bottom: 2px solid rgba(240,198,90,.28);
}
.site-header .container {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 66px;
}
.brand {
	display: flex; align-items: center; gap: 12px;
	font-family: var(--font-display); font-size: 20px;
	color: #fff; letter-spacing: 1px;
}
.brand:hover { color: #fff; text-shadow: var(--glow-blue); }
.brand img { width: 40px; height: 40px; filter: drop-shadow(0 0 6px rgba(58,107,255,.7)); }

.nav-links { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; align-items: center; }
.nav-links a {
	font-family: var(--font-ui); font-size: 14px; letter-spacing: 1px;
	text-transform: uppercase; color: var(--silver);
	padding: 6px 2px; position: relative;
}
.nav-links a::after {
	content: ""; position: absolute; left: 0; bottom: -2px;
	width: 0; height: 2px; background: var(--gold); box-shadow: var(--glow-gold);
	transition: width .25s ease;
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-cta {
	font-family: var(--font-ui) !important;
	border: 2px solid var(--blue); border-radius: 4px;
	padding: 8px 15px !important; color: #fff !important;
	box-shadow: var(--glow-blue); background: rgba(58,107,255,.14);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: rgba(58,107,255,.3); text-shadow: none; }

.nav-toggle {
	display: none; background: none; border: 2px solid rgba(240,198,90,.4);
	border-radius: 4px; width: 44px; height: 40px; cursor: pointer; padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	content: ""; display: block; width: 22px; height: 2px; margin: 0 auto;
	background: var(--gold); box-shadow: var(--glow-gold);
	position: relative; transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top: 7px; }
.nav-toggle.open span { background: transparent; box-shadow: none; }
.nav-toggle.open span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ===========================================================
   Hero / Castle courtyard scene
   =========================================================== */
.hero {
	position: relative; overflow: hidden;
	min-height: clamp(700px, 96vh, 900px);
}

.scene { position: absolute; inset: 0; z-index: 0; }

/* --- day sky --- */
.sky {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		var(--sky-1) 0%, var(--sky-2) 40%, var(--sky-3) 72%, var(--sky-4) 100%);
}

/* --- sun --- */
.sun {
	position: absolute; top: 8%; right: 13%;
	width: 62px; height: 62px; border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, #fff7d6 0 42%, #ffe06a 60%, #ffcf3a 100%);
	box-shadow: 0 0 0 8px rgba(255,236,150,.28), 0 0 46px 14px rgba(255,224,110,.6);
	animation: sun-pulse 6s ease-in-out infinite;
}
@keyframes sun-pulse { 0%,100% { box-shadow: 0 0 0 8px rgba(255,236,150,.28), 0 0 46px 14px rgba(255,224,110,.55); } 50% { box-shadow: 0 0 0 10px rgba(255,236,150,.34), 0 0 60px 18px rgba(255,224,110,.7); } }

/* --- drifting puffy clouds --- */
.clouds { position: absolute; inset: 0; overflow: hidden; }
.cloud {
	position: absolute; display: block;
	width: 62px; height: 16px; border-radius: 10px;
	background: #fdfeff;
	box-shadow:
		18px -8px 0 -2px #fdfeff, -16px -4px 0 -3px #fdfeff, 34px 0 0 -2px #eef4fb,
		0 6px 0 0 rgba(180,205,230,.5);
}
.cloud.c1 { top: 20%; left: -12%; transform: scale(1.25); animation: drift 52s linear infinite; }
.cloud.c2 { top: 33%; left: -22%; opacity: .95; animation: drift 74s linear infinite 6s; }
.cloud.c3 { top: 11%; left: -32%; transform: scale(.85); opacity: .9; animation: drift 92s linear infinite 3s; }
.cloud.c4 { top: 26%; left: -18%; transform: scale(1.05); opacity: .85; animation: drift 64s linear infinite 12s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(135vw); } }

/* --- guardian dragon flying across the sky --- */
.sky-dragon {
	position: absolute; top: 15%; left: 0; z-index: 4;
	width: clamp(200px, 30vw, 320px); height: auto;
	will-change: transform; pointer-events: none;
	animation: fly-across 30s linear infinite;
}
.sky-dragon .dragon {
	width: 100%; height: auto;
	filter: drop-shadow(0 6px 8px rgba(20,30,60,.28));
	animation: dragon-hover 3.4s ease-in-out infinite;
}
@keyframes fly-across { from { transform: translateX(112vw); } to { transform: translateX(-360px); } }
@keyframes dragon-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* --- distant green hills --- */
.hills {
	position: absolute; left: -5%; right: -5%; bottom: 24%; height: 22%;
	background:
		radial-gradient(120% 100% at 20% 100%, #6cae52 0 42%, transparent 44%),
		radial-gradient(120% 100% at 68% 100%, #7cbc60 0 46%, transparent 48%),
		radial-gradient(150% 100% at 46% 100%, #5c9a45 0 50%, transparent 52%);
	filter: saturate(.9);
}

/* ===========================================================
   Castle
   =========================================================== */
.castle {
	position: absolute; left: 0; right: 0; bottom: 23%;
	height: 40%;
	display: flex; align-items: flex-end; justify-content: center;
	z-index: 4;
	--stone-face: linear-gradient(90deg, var(--stone-d) 0%, var(--stone) 30%, var(--stone-l) 50%, var(--stone) 70%, var(--stone-d) 100%);
}

/* shared stone look w/ mortar lines */
.tower, .wall {
	position: relative;
	background:
		repeating-linear-gradient(0deg, transparent 0 21px, rgba(0,0,0,.22) 21px 23px),
		repeating-linear-gradient(90deg, transparent 0 26px, rgba(0,0,0,.16) 26px 28px),
		var(--stone-face);
	box-shadow: inset 0 0 0 3px rgba(0,0,0,.28), 0 12px 30px rgba(0,0,0,.5);
	image-rendering: pixelated;
}

/* crenellated tops */
.battlement {
	position: absolute; left: -4px; right: -4px; top: -14px; height: 14px;
	background: repeating-linear-gradient(90deg,
		var(--stone) 0 14px, transparent 14px 26px);
	filter: drop-shadow(0 -2px 0 rgba(0,0,0,.25));
}
.battlement.wide {
	background: repeating-linear-gradient(90deg,
		var(--stone) 0 18px, transparent 18px 34px);
}

.tower { width: 92px; height: 100%; z-index: 2; }
.tower-l { border-radius: 4px 4px 0 0; }
.tower-r { border-radius: 4px 4px 0 0; }
/* conical pixel roofs */
.tower::before {
	content: ""; position: absolute; top: -60px; left: -12px; right: -12px; height: 60px;
	background: linear-gradient(180deg, var(--blue) 0%, var(--blue-d) 100%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	filter: drop-shadow(0 0 8px rgba(58,107,255,.4));
}
.tower::after {   /* roof finial */
	content: ""; position: absolute; top: -70px; left: 50%; transform: translateX(-50%);
	width: 6px; height: 12px; background: var(--gold); box-shadow: var(--glow-gold);
}

/* castle windows: stone arch + red drapes + mullion + dim candle glow (not open holes) */
.cwin {
	position: absolute; z-index: 2;
	width: 13px; height: 19px;
	border-radius: 50% 50% 12% 12% / 42% 42% 8% 8%;
	background:
		radial-gradient(ellipse at 50% 90%, rgba(240,198,90,.5) 0 22%, rgba(240,198,90,.1) 44%, transparent 62%),
		linear-gradient(180deg, #0f111a 0%, #191d2c 100%);
	box-shadow: inset 0 0 0 2px #5a5f72, inset 0 0 5px rgba(0,0,0,.85), 0 0 4px rgba(240,198,90,.16);
	overflow: hidden;
	animation: winglow 4.5s ease-in-out infinite;
}
.cwin::before {   /* red drapes framing the opening */
	content: ""; position: absolute; top: 2px; left: 2px; right: 2px; height: 66%;
	background: linear-gradient(90deg, #8a2f2f 0 24%, #6f2323 24% 30%, transparent 30% 70%, #6f2323 70% 76%, #8a2f2f 76%);
}
.cwin::after {   /* mullion cross bars */
	content: ""; position: absolute; inset: 2px;
	background:
		linear-gradient(90deg, transparent 44%, #2b2f3d 44% 56%, transparent 56%),
		linear-gradient(0deg, transparent 58%, #2b2f3d 58% 66%, transparent 66%);
	opacity: .85;
}
@keyframes winglow {
	0%,100% { box-shadow: inset 0 0 0 2px #5a5f72, inset 0 0 5px rgba(0,0,0,.85), 0 0 4px rgba(240,198,90,.16); }
	50%     { box-shadow: inset 0 0 0 2px #5a5f72, inset 0 0 5px rgba(0,0,0,.85), 0 0 8px rgba(240,198,90,.34); }
}
.tower-win { top: 24%; left: 50%; transform: translateX(-50%); width: 15px; height: 22px; }
.wall-win  { width: 12px; height: 17px; }
.wall .w1 { left: 13%; top: 12%; } .wall .w2 { left: 31%; top: 12%; }
.wall .w3 { right: 31%; top: 12%; } .wall .w4 { right: 13%; top: 12%; }
.wall .w5 { left: 21%; top: 45%; } .wall .w6 { right: 21%; top: 45%; }
.wall .w2, .wall .w4, .wall .w6 { animation-delay: 1.3s; }
.wall .w3, .wall .w5 { animation-delay: .6s; }

/* hanging banners */
.banner {
	position: absolute; top: 4px; width: 22px; height: 54px;
	background: linear-gradient(180deg, var(--blue) 0%, var(--blue-d) 100%);
	clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
	box-shadow: inset 0 0 0 3px rgba(255,255,255,.12);
	transform-origin: top center; animation: sway 4.5s ease-in-out infinite;
}
.banner::after {   /* emblem */
	content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--gold); box-shadow: var(--glow-gold);
}
.banner-l { left: 8px; } .banner-r { right: 8px; animation-delay: .8s; }
@keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes flicker { 0%,100% { opacity: 1; } 45% { opacity: .78; } 70% { opacity: .92; } }

/* central wall */
.wall {
	width: min(560px, 62%); height: 66%; margin: 0 -10px; z-index: 1;
	align-self: flex-end;
}
.wall .gate {
	position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
	width: 92px; height: 62%;
	background: linear-gradient(180deg, #191c2e, #0c0e18);
	border-radius: 46px 46px 0 0;
	box-shadow: inset 0 0 0 5px var(--stone-dd), inset 0 8px 20px rgba(0,0,0,.7);
}
.wall .gate::before {   /* portcullis bars */
	content: ""; position: absolute; inset: 8px 10px 0;
	background:
		repeating-linear-gradient(90deg, rgba(120,126,150,.5) 0 3px, transparent 3px 14px),
		repeating-linear-gradient(0deg, rgba(120,126,150,.4) 0 3px, transparent 3px 16px);
	border-radius: 40px 40px 0 0;
}

/* guards patrolling the ramparts */
.wall .guard {
	position: absolute; top: -30px; width: 26px; height: auto; z-index: 3;
	filter: drop-shadow(0 3px 3px rgba(0,0,0,.35));
}
.wall .guard-1 { left: 24%; animation: patrol-a 9s ease-in-out infinite; }
.wall .guard-2 { right: 24%; animation: patrol-b 11s ease-in-out infinite; }
@keyframes patrol-a {
	0%   { transform: translateX(0) scaleX(1); }
	46%  { transform: translateX(70px) scaleX(1); }
	50%  { transform: translateX(70px) scaleX(-1); }
	96%  { transform: translateX(0) scaleX(-1); }
	100% { transform: translateX(0) scaleX(1); }
}
@keyframes patrol-b {
	0%   { transform: translateX(0) scaleX(-1); }
	46%  { transform: translateX(-70px) scaleX(-1); }
	50%  { transform: translateX(-70px) scaleX(1); }
	96%  { transform: translateX(0) scaleX(1); }
	100% { transform: translateX(0) scaleX(-1); }
}

/* lowered drawbridge crossing the moat (sits above the water) */
.drawbridge {
	position: absolute; left: 50%; transform: translateX(-50%);
	bottom: 15%; width: clamp(74px, 12%, 104px); height: 12%; z-index: 6;
	background:
		repeating-linear-gradient(0deg, #7a5230 0 8px, #6b4626 8px 10px),
		linear-gradient(90deg, #5f3d20, #8a5c34 50%, #5f3d20);
	border: 2px solid #4a3018; border-bottom: 0;
	box-shadow: inset 0 0 0 2px rgba(0,0,0,.22), 0 4px 8px rgba(0,0,0,.35);
}
.drawbridge::before, .drawbridge::after {   /* chains up to the gate */
	content: ""; position: absolute; top: -20px; width: 2px; height: 22px;
	background: repeating-linear-gradient(0deg, #d9d2b8 0 3px, transparent 3px 5px);
}
.drawbridge::before { left: 10px; }
.drawbridge::after  { right: 10px; }

/* ===========================================================
   Moat
   =========================================================== */
.moat {
	position: absolute; left: 0; right: 0; bottom: 15%; height: 9%;
	z-index: 5;
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 3px, transparent 3px 12px),
		linear-gradient(180deg, #56a0e8 0%, var(--water) 45%, #1f5fae 100%);
	box-shadow: inset 0 5px 10px rgba(255,255,255,.18), inset 0 -6px 12px rgba(0,0,0,.3);
	animation: shimmer 4s ease-in-out infinite;
}
.moat::before {   /* far bank */
	content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px;
	background: var(--grass-d);
}
@keyframes shimmer { 0%,100% { background-position: 0 0, 0 0; } 50% { background-position: 8px 0, 0 0; } }

/* ===========================================================
   Courtyard (foreground)
   =========================================================== */
.courtyard {
	position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
	background:
		radial-gradient(2px 2px at 12% 40%, rgba(255,255,255,.18), transparent),
		radial-gradient(2px 2px at 60% 60%, rgba(255,255,255,.14), transparent),
		repeating-linear-gradient(94deg, rgba(0,0,0,.10) 0 3px, transparent 3px 18px),
		linear-gradient(180deg, #5cae48 0%, var(--grass) 40%, var(--grass-d) 100%);
	border-top: 3px solid #6cbf54;
	box-shadow: inset 0 10px 20px rgba(0,0,0,.18);
	z-index: 7;
}
/* fade the grass into the sky colour at the horizon so the hero flows into the page */
.courtyard::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
	background: linear-gradient(180deg, rgba(100,127,187,0) 0%, rgba(100,127,187,.5) 60%, #647fbb 100%);
	pointer-events: none;
}
.torch {
	position: absolute; bottom: 40%; width: 6px; height: 34px;
	background: linear-gradient(180deg, #6b4a2a, #3a2716);
}
.torch::before {   /* flame */
	content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
	width: 14px; height: 20px; border-radius: 50% 50% 50% 50%;
	background: radial-gradient(circle at 50% 70%, #fff2b0 0 20%, #ffb43c 45%, #ff6a1e 75%, transparent 78%);
	box-shadow: 0 0 18px 6px rgba(255,150,40,.6);
	animation: flame 1.1s ease-in-out infinite alternate;
}
.torch-l { left: 7%; } .torch-r { right: 7%; }
@keyframes flame { from { transform: translateX(-50%) scaleY(1) scaleX(1); opacity: .9; } to { transform: translateX(-52%) scaleY(1.18) scaleX(.92); opacity: 1; } }

.party {
	position: absolute; left: 0; right: 0; bottom: 34%;
	display: flex; align-items: flex-end; justify-content: center;
	gap: clamp(6px, 2.4vw, 26px);
	padding: 0 6%;
}
.party .sprite { animation: hop 2.8s ease-in-out infinite; }
.party .boss-mini { width: 96px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); z-index: 3; }
.party .v-near { width: 72px; filter: drop-shadow(0 5px 5px rgba(0,0,0,.45)); z-index: 2; }
.party .v-far  { width: 56px; opacity: .96; transform: translateY(-14px); filter: drop-shadow(0 4px 4px rgba(0,0,0,.4)) brightness(.9); z-index: 1; }
.party .sprite:nth-child(2) { animation-delay: .5s; }
.party .sprite:nth-child(3) { animation-delay: .2s; }
.party .sprite:nth-child(4) { animation-delay: .7s; }
.party .sprite:nth-child(5) { animation-delay: .35s; }
.party .sprite:nth-child(6) { animation-delay: .9s; }
.party .sprite:nth-child(7) { animation-delay: .15s; }
.party .sprite:nth-child(8) { animation-delay: .6s; }
@keyframes hop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.party .v-far.sprite { animation-name: hop-far; }
@keyframes hop-far { 0%,100% { transform: translateY(-14px); } 50% { transform: translateY(-19px); } }

/* soft top scrim so the title reads on the bright sky */
.scrim {
	position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 6;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(20,34,74,.42) 0%, rgba(20,34,74,.10) 20%, transparent 40%);
}

/* --- hero text --- */
.hero-inner {
	position: relative; z-index: 8;
	text-align: center;
	padding-top: clamp(28px, 5.5vh, 62px);
}
.hero .tagline {
	font-family: var(--font-ui);
	font-size: clamp(12px, 2.4vw, 17px); letter-spacing: 2px;
	text-transform: uppercase; color: var(--gold);
	text-shadow: 0 2px 8px rgba(0,0,0,.8), var(--glow-gold);
	margin: 0 0 14px;
}
.hero h1 {
	font-size: clamp(40px, 8.4vw, 92px);
	margin: 0 0 18px; color: #fff; letter-spacing: 2px;
	text-shadow: 3px 3px 0 #0a1030, 0 0 12px rgba(58,107,255,.6);
}
.hero h1 .accent { color: var(--gold); text-shadow: 0 3px 0 #4a3708, var(--glow-gold); }

.hero .blurb {
	max-width: 560px; margin: 0 auto 24px; color: #eef0ff;
	text-shadow: 0 2px 6px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.6);
}

.press-start {
	font-family: var(--font-ui); font-size: 13px; letter-spacing: 3px;
	text-transform: uppercase; color: #fff;
	text-shadow: 0 2px 6px rgba(0,0,0,.8), var(--glow-blue);
	margin-top: 26px; animation: blink 1.2s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ===========================================================
   JRPG dialogue window component
   =========================================================== */
.window {
	position: relative;
	background: linear-gradient(180deg, var(--win-1), var(--win-2));
	border: 3px solid var(--win-edge);
	border-radius: 12px;
	box-shadow:
		0 0 0 3px var(--win-frame),
		0 0 0 6px #0a1330,
		inset 0 0 0 2px rgba(127,176,255,.35),
		0 12px 0 rgba(0,0,0,.32),
		0 14px 34px rgba(0,0,0,.5);
	padding: 22px 24px;
	color: var(--parch);
}
.window::before {   /* corner rivets */
	content: ""; position: absolute; inset: 4px; border-radius: 8px;
	pointer-events: none;
	background:
		radial-gradient(3px 3px at 6px 6px, var(--gold), transparent),
		radial-gradient(3px 3px at calc(100% - 6px) 6px, var(--gold), transparent),
		radial-gradient(3px 3px at 6px calc(100% - 6px), var(--gold), transparent),
		radial-gradient(3px 3px at calc(100% - 6px) calc(100% - 6px), var(--gold), transparent);
	opacity: .8;
}
.window h3 {
	font-family: var(--font-display); font-size: 20px; color: var(--gold);
	text-shadow: 0 0 8px rgba(240,198,90,.4); margin: 0 0 14px;
}
.window p { color: var(--parch); }
.window p:last-child { margin-bottom: 0; }

/* ===========================================================
   JRPG menu buttons (with selection cursor)
   =========================================================== */
.btn-menu {
	display: inline-block; font-family: var(--font-ui);
	font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
	color: #fff; padding: 13px 26px;
	border: 3px solid var(--sky-cyan); border-radius: 8px;
	background: linear-gradient(180deg, rgba(58,107,255,.2), rgba(12,23,64,.55));
	box-shadow: inset 0 0 0 2px rgba(10,19,48,.8), 0 4px 0 rgba(0,0,0,.35), var(--glow-blue);
	cursor: pointer; transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.btn-menu .cursor { color: var(--gold); opacity: 0; margin-right: 2px; transition: opacity .15s ease, transform .15s ease; display: inline-block; }
.btn-menu:hover {
	color: #fff; text-shadow: none;
	background: linear-gradient(180deg, rgba(58,107,255,.42), rgba(12,23,64,.6));
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 2px rgba(10,19,48,.8), 0 6px 0 rgba(0,0,0,.35), 0 0 12px rgba(58,107,255,.95), 0 0 30px rgba(58,107,255,.55);
}
.btn-menu:hover .cursor { opacity: 1; animation: cursor-bounce .6s ease-in-out infinite; }
.btn-menu:active { transform: translateY(0); }
@keyframes cursor-bounce { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

.btn-blue { border-color: var(--blue); }
.btn-discord { border-color: #7f95ff; }

/* ===========================================================
   Sections
   =========================================================== */
.section { padding: 82px 0; position: relative; }
.section-alt {
	/* just a faint darkening so the atmosphere stays continuous (no hard bands) */
	background: linear-gradient(180deg, rgba(10,14,34,0), rgba(10,14,34,.20) 50%, rgba(10,14,34,0));
}
.section-heading { text-align: center; margin-bottom: 50px; }
.section-heading .eyebrow {
	font-family: var(--font-ui); font-size: 13px; letter-spacing: 3px;
	text-transform: uppercase; color: var(--gold);
	text-shadow: var(--glow-gold); display: block; margin-bottom: 14px;
}
.section-heading h2 {
	font-size: clamp(26px, 5vw, 46px); color: #fff; margin: 0;
	text-shadow: 0 3px 0 #0a1030, 0 0 12px rgba(58,107,255,.55), 2px 2px 0 rgba(240,198,90,.32);
}
.section-heading .lead { max-width: 720px; margin: 18px auto 0; color: #c3cbe6; text-shadow: 0 1px 4px rgba(6,10,26,.7); }
.lore-window { max-width: 820px; margin: 26px auto 0; text-align: left; }
.lore-window .lead { margin: 0; color: var(--parch); }

/* ---------- About grid ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.about-copy .window { height: 100%; }

/* Discord embed shell */
.discord-frame {
	border: 3px solid var(--win-edge); border-radius: 12px; padding: 10px;
	background: linear-gradient(180deg, var(--win-1), var(--win-2));
	box-shadow: 0 0 0 3px var(--win-frame), 0 0 0 6px #0a1330, 0 12px 0 rgba(0,0,0,.32), 0 14px 34px rgba(0,0,0,.5);
	height: 100%; display: flex; flex-direction: column;
}
.discord-frame .frame-label {
	font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px;
	text-transform: uppercase; color: var(--silver);
	padding: 4px 6px 10px; display: flex; align-items: center; gap: 8px;
}
.discord-frame .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.discord-frame iframe { width: 100%; flex: 1; min-height: 480px; border: 0; border-radius: 6px; display: block; }

/* ===========================================================
   Boss cards
   =========================================================== */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; }
.person.boss-card {
	position: relative; text-align: center; padding: 26px 26px 30px;
	background: linear-gradient(180deg, var(--win-1), var(--win-2));
	border: 3px solid var(--win-edge); border-radius: 14px;
	box-shadow: 0 0 0 3px var(--win-frame), 0 0 0 6px #0a1330, inset 0 0 0 2px rgba(127,176,255,.3), 0 12px 0 rgba(0,0,0,.3), 0 14px 30px rgba(0,0,0,.5);
	transition: transform .2s ease, box-shadow .2s ease;
}
.person.boss-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px #0a1330, inset 0 0 0 2px rgba(127,176,255,.3), 0 16px 0 rgba(0,0,0,.3), 0 18px 36px rgba(0,0,0,.55), 0 0 22px rgba(240,198,90,.4);
}

/* the sprite "battle stage" */
.boss-stage {
	position: relative; height: 168px; margin: 0 -10px 16px; border-radius: 10px;
	background:
		radial-gradient(120% 80% at 50% 108%, rgba(58,107,255,.28), transparent 60%),
		repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 30px),
		linear-gradient(180deg, #101a3e 0%, #17224e 60%, #223066 100%);
	box-shadow: inset 0 0 0 2px rgba(10,19,48,.9), inset 0 -18px 30px rgba(0,0,0,.4);
	overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
}
.boss-stage::before {   /* pixel floor */
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
	background:
		repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 26px),
		linear-gradient(180deg, #2b2447, #1c1836);
	box-shadow: inset 0 3px 0 rgba(240,198,90,.15);
}
.boss-stage .boss-big {
	position: relative; z-index: 2; width: 130px; height: auto; margin-bottom: 10px;
	filter: drop-shadow(0 6px 5px rgba(0,0,0,.5));
	animation: hop 2.8s ease-in-out infinite;
}

.boss-card .name {
	font-family: var(--font-display); font-size: 23px; color: #fff;
	margin: 0 0 4px; text-shadow: 0 0 10px rgba(58,107,255,.7);
}
.boss-card .position {
	font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px;
	text-transform: uppercase; color: var(--gold);
	text-shadow: var(--glow-gold); margin-bottom: 14px;
}

/* HP / MP bars */
.statbars { list-style: none; margin: 0 auto 16px; padding: 0; max-width: 240px; display: grid; gap: 7px; }
.statbars li { display: flex; align-items: center; gap: 10px; }
.statbars .stat-label {
	font-family: var(--font-ui); font-size: 11px; letter-spacing: 1px;
	color: var(--silver); width: 26px; text-align: left;
}
.statbars .bar {
	flex: 1; height: 12px; background: #0a1330; border-radius: 7px;
	box-shadow: inset 0 0 0 2px rgba(127,176,255,.35), inset 0 2px 4px rgba(0,0,0,.6);
	overflow: hidden;
}
.statbars .fill { display: block; height: 100%; border-radius: 5px; }
.statbars .fill.hp { background: linear-gradient(180deg, #6bf58a, var(--green)); box-shadow: 0 0 8px rgba(87,217,119,.6); }
.statbars .fill.mp { background: linear-gradient(180deg, #7fb0ff, var(--blue)); box-shadow: 0 0 8px rgba(58,107,255,.6); }
.statbars .fill.sp { background: linear-gradient(180deg, #ff6a6a, var(--red)); box-shadow: 0 0 8px rgba(229,72,77,.6); }

.boss-card p { font-size: 15.5px; color: var(--parch); }

.social { list-style: none; padding: 0; margin: 18px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.social a {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border: 2px solid rgba(127,176,255,.35);
	border-radius: 8px; color: var(--silver); font-size: 18px;
	background: rgba(10,19,48,.5);
	transition: transform .18s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.social a:hover {
	color: #fff; border-color: var(--gold);
	box-shadow: var(--glow-gold); transform: translateY(-3px); text-shadow: none;
}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer {
	background: transparent; padding: 44px 0 52px; text-align: center;
}
.site-footer .foot-logo { width: 56px; height: 56px; margin: 0 auto 16px; filter: drop-shadow(0 0 8px rgba(58,107,255,.6)); }
.site-footer .copyright {
	font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px;
	text-transform: uppercase; color: var(--muted); margin: 0;
	text-shadow: 0 1px 3px rgba(6,10,26,.6);
}
.site-footer .crt-toggle {
	margin-top: 18px; background: none; border: 2px solid rgba(240,198,90,.3);
	color: var(--muted); font-family: var(--font-ui); font-size: 11px;
	letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px;
	border-radius: 5px; cursor: pointer;
	transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.site-footer .crt-toggle:hover { color: var(--gold); border-color: var(--gold); box-shadow: var(--glow-gold); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 860px) {
	.about-grid { grid-template-columns: 1fr; }
	.discord-frame { order: -1; }
	.tower { width: 76px; }
	.sky-dragon { width: clamp(160px, 34vw, 220px); }
	.party .boss-mini { width: 80px; }
}
@media (max-width: 720px) {
	.nav-toggle { display: block; }
	/* give the tall mobile text column room above the diorama */
	.hero { min-height: 96vh; }
	.castle { bottom: 24%; height: 32%; }
	.sky-dragon { width: clamp(150px, 46vw, 210px); top: 12%; }
	.press-start { display: none; }
	/* mobile: only the two bosses stand in front of the castle */
	.party .villager { display: none; }
	.party { gap: clamp(4px, 4vw, 22px); }
	/* keep two guards but shorten their patrol on the narrower wall */
	.wall .guard-1 { animation-name: patrol-a-sm; }
	.wall .guard-2 { animation-name: patrol-b-sm; }
	.nav-links {
		position: absolute; top: 66px; left: 0; right: 0;
		flex-direction: column; gap: 0;
		background: rgba(9,10,22,.98);
		border-bottom: 2px solid rgba(240,198,90,.28);
		max-height: 0; overflow: hidden; transition: max-height .3s ease;
	}
	.nav-links.open { max-height: 380px; }
	.nav-links li { width: 100%; text-align: center; }
	.nav-links a { display: block; padding: 16px; width: 100%; }
	.nav-links a::after { display: none; }
	.nav-cta { margin: 12px auto; display: inline-block; }
	.team-grid { grid-template-columns: 1fr; }
}
@keyframes patrol-a-sm {
	0% { transform: translateX(0) scaleX(1); } 46% { transform: translateX(34px) scaleX(1); }
	50% { transform: translateX(34px) scaleX(-1); } 96% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); }
}
@keyframes patrol-b-sm {
	0% { transform: translateX(0) scaleX(-1); } 46% { transform: translateX(-34px) scaleX(-1); }
	50% { transform: translateX(-34px) scaleX(1); } 96% { transform: translateX(0) scaleX(1); } 100% { transform: translateX(0) scaleX(-1); }
}
@media (max-width: 460px) {
	.tower-l, .tower-r { width: 60px; }
	.party .boss-mini { width: 74px; }
}
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; }
}