/* ARKAGEDDON v2 - plain CSS, no frameworks. */
:root {
	--bg: #070a10;
	--ink: #eef3ff;
	--mut: #a3b0cc;
	--glass: rgba(11, 15, 25, .62);
	--tile-bar: .88;            /* how dark the bar behind the tile names is (1 = solid, .6 = see-through) */
	--depth: 1;                 /* parallax strength: 0 = off, 1 = normal, 2 = strong */
	--bg-dim: .85;              /* how bright the blurred picture behind each game is (1 = full, .5 = dark) */
	--edge-shade: .35;          /* how dark the vignette around the edges gets (0 = none, 1 = black) */
	--line: rgba(255, 255, 255, .10);
	--live: #ff9b45;            /* changes to the colour of the game you are looking at */
	--bar: 64px;
	--head: "Rajdhani", "Segoe UI", system-ui, sans-serif;
	--body: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--head); margin: 0; line-height: 1.05; letter-spacing: .5px; text-transform: uppercase; }

/* ---------- buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
	padding: .8em 1.5em; border-radius: 999px; border: 1px solid transparent;
	font: 700 .95rem/1 var(--head); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-primary { color: #0a0d14; background: linear-gradient(135deg, var(--a, var(--live)), var(--b, #fff)); box-shadow: 0 6px 24px -6px var(--a, var(--live)); }
.btn-primary:hover { box-shadow: 0 10px 30px -4px var(--a, var(--live)); }
.btn-ghost { color: var(--ink); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.16); border-color: var(--a, var(--live)); }
.btn-sm { padding: .65em 1.2em; font-size: .85rem; }

/* ---------- top bar ---------- */
.topbar {
	position: fixed; inset: 0 0 auto 0; height: var(--bar); z-index: 50;
	display: flex; align-items: center; gap: 1.2rem; padding: 0 clamp(1rem, 3vw, 2.5rem);
	background: rgba(7, 10, 16, .55); backdrop-filter: blur(16px) saturate(150%);
	border-bottom: 1px solid var(--line); transition: background .3s;
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: linear-gradient(90deg, transparent, var(--live), transparent); opacity: .8; transition: background .5s; }
.brand { font: 700 1.6rem/1 var(--head); letter-spacing: 3px; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--live); transition: color .5s; }
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand b { font: inherit; }
.brand-logo { width: 2.5rem; height: 2.5rem; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.menu { margin-left: auto; display: flex; gap: .15rem; flex-wrap: nowrap; }
.menu a { padding: .55em .85em; border-radius: 8px; text-decoration: none; font: 700 .9rem/1 var(--head);
	letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut); white-space: nowrap; transition: color .2s, background .2s; }
.menu a:hover { color: #fff; background: rgba(255,255,255,.08); }
.menu a.on { color: #fff; box-shadow: inset 0 -2px 0 var(--live); }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px;
	background: rgba(255,255,255,.06); flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; }
.burger i { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- side dots ---------- */
.dots { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 12px; }
.dots a { position: relative; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.28); border: 2px solid rgba(0,0,0,.35);
	transition: transform .2s, background .2s; }
.dots a:hover, .dots a.on { background: var(--c, var(--live)); transform: scale(1.5); }
.dots a::before { content: attr(data-label); position: absolute; right: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap;
	font: 700 .8rem/1 var(--head); letter-spacing: 1px; text-transform: uppercase; padding: .5em .8em; border-radius: 6px;
	background: rgba(7,10,16,.85); border: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity .2s; }
.dots a:hover::before { opacity: 1; }

/* ---------- shared section bits ---------- */
.bg { position: fixed; inset: 0; z-index: -2; background-size: cover; background-position: center; }
section { position: relative; isolation: isolate; clip-path: inset(0); scroll-snap-align: start; }
.eyebrow, .kicker { margin: 0 0 .6rem; font: 700 .95rem/1 var(--head); letter-spacing: 3px; text-transform: uppercase; color: var(--a, var(--live)); }
.blurb { margin: .8rem 0 0; color: var(--mut); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.note { min-height: 1.4em; margin: .8rem 0 0; color: var(--mut); font-size: .9rem; }

/* scroll reveal */
.reveal { opacity: 0; scale: .95; transition: opacity .7s ease, scale .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; scale: 1; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem, 3vh, 3rem);
	padding: calc(var(--bar) + 1.6rem) clamp(1rem, 5vw, 5rem) 2rem; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(120% 90% at 20% 30%, rgba(7,10,16,.15), rgba(7,10,16,.78) 70%),
	            linear-gradient(180deg, rgba(7,10,16,.35), var(--bg) 98%); }
.hero h1 { font-size: clamp(3.4rem, min(12vw, 15vh), 9.5rem); letter-spacing: clamp(2px, .6vw, 10px); text-shadow: 0 8px 50px rgba(0,0,0,.6); }
.hero h1 span { background: linear-gradient(100deg, #ff9b45, #ff4fa3 45%, #27d9c8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: #dbe5ff; max-width: 54ch; margin: 1rem 0 0; text-shadow: 0 2px 20px rgba(0,0,0,.7); }
.hero .btn-primary { --a: #ff9b45; --b: #ff4fa3; }

.tiles { display: grid; grid-template-columns: repeat(var(--tile-cols, 4), minmax(0, 1fr)); gap: clamp(.7rem, 1.2vw, 1.1rem); }
.tile { --a: #fff; position: relative; display: block; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; text-decoration: none;
	border: 1px solid var(--line); box-shadow: 0 14px 40px -18px rgba(0,0,0,.9); transition: transform .3s, box-shadow .3s, border-color .3s; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,10,16,.45)); }
.tile span { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	padding: clamp(8px, .9vw, 14px) clamp(12px, 1.2vw, 20px) clamp(9px, 1vw, 15px);
	background: rgba(7, 10, 16, var(--tile-bar, .88)); border-top: 2px solid var(--a);       /* dark bar behind the name: hides any logo in the picture */
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 clamp(.88rem, 1.15vw, 1.3rem)/1.15 var(--head); letter-spacing: 1px; text-transform: uppercase; }
.tile small { display: block; margin-bottom: 3px; color: var(--a); font-size: clamp(.68rem, .9vw, .85rem); letter-spacing: 2px; }
.tile:hover { transform: translateY(-6px); border-color: var(--a); box-shadow: 0 22px 50px -16px var(--a); }
.tile:hover img { transform: scale(1.08); }

/* ---------- game panels ---------- */
.panel { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--bar) + 1.5rem) clamp(1rem, 5vw, 4rem) 3rem; }
/* soft backdrop: each game has a tiny pre-blurred picture (images/<id>-bg.webp) stretched over the section */
.panel .bg, .flyer-sec .bg { filter: brightness(var(--bg-dim)) saturate(1.15); }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(70% 55% at 50% 40%, transparent, rgba(7,10,16,var(--edge-shade))),
	            linear-gradient(90deg, color-mix(in srgb, var(--a) 18%, transparent), transparent 40%, color-mix(in srgb, var(--b) 16%, transparent)); }
.panel .wrap { width: fit-content; max-width: min(2200px, 100%); display: grid; justify-items: start; gap: clamp(1.2rem, 3vh, 2rem); }
.poster { position: relative; margin: 0; border-radius: 22px; overflow: hidden; line-height: 0;
	border: 1px solid color-mix(in srgb, var(--a) 55%, transparent);
	box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 30px 80px -20px rgba(0,0,0,.9), 0 0 90px -10px color-mix(in srgb, var(--a) 55%, transparent); }
/* the frame gets the picture's exact shape (--ar is set per game), so the picture is never cropped and the layout does not jump while it loads */
/* biggest the picture can be while the title and buttons still fit on the same screen:
   height = window height minus the menu bar and the text below (--poster-reserve), width follows the picture's shape */
.poster { --poster-reserve: 300px; aspect-ratio: var(--ar, 1.7778);
	width: min(2200px, 92vw, calc((100vh - var(--poster-reserve)) * var(--ar, 1.7778)));
	width: min(2200px, 92vw, calc((100svh - var(--poster-reserve)) * var(--ar, 1.7778))); }
.poster img.pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.poster .logo { position: absolute; left: 4%; bottom: 8%; width: min(34%, 360px); height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)); }
.meta { width: 100%; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.2rem 2rem; }
.meta h2 { font-size: clamp(2rem, 5vw, 3.6rem); text-shadow: 0 4px 30px rgba(0,0,0,.7); }
.meta .actions { margin: 0; }
.panel .btn-primary { --a: inherit; }
.panel .meta .btn-primary { background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 6px 24px -6px var(--a); }
.panel .meta .btn-ghost:hover { border-color: var(--a); }
.copied { color: var(--a); }

/* ---------- flyer ---------- */
.flyer-sec { --a: #ff9b45; --b: #27d9c8; padding: calc(var(--bar) + 2rem) clamp(1rem, 5vw, 4rem) 4rem; min-height: 100svh; display: grid; place-items: center; }

.flyer-sec .wrap { width: min(1000px, 100%); display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.flyer { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 30px 80px -20px #000, 0 0 90px -10px #ff9b45; }
.flyer img { width: 100%; height: auto; }
.flyer-sec h2 { font-size: clamp(2rem, 5vw, 3.4rem); }

/* ---------- discord ---------- */
.discord { background: radial-gradient(80% 100% at 50% 0%, #1a2142, var(--bg)); padding: 6rem clamp(1rem, 5vw, 4rem) 5rem; text-align: center; min-height: 80svh; display: grid; place-items: center; }
.discord .wrap { width: min(760px, 100%); }
.discord .eyebrow { --a: #7c8cff; }
.discord h2 { font-size: clamp(2rem, 6vw, 4rem); }
.discord .blurb { margin-inline: auto; }
.widget { margin: 2rem auto 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--glass); }
.widget iframe { display: block; width: 100%; height: 400px; border: 0; }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding: 1.5rem clamp(1rem, 5vw, 4rem); border-top: 1px solid var(--line); color: var(--mut); font-size: .9rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.foot a { text-decoration: none; } .foot a:hover { color: #fff; }

/* ---------- map dialog ---------- */
.map-dialog { width: min(1400px, 96vw); height: 90vh; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #0b0f19; color: var(--ink); overflow: hidden; }
.map-dialog::backdrop { background: rgba(3,5,10,.8); backdrop-filter: blur(6px); }
.map-dialog[open] { display: flex; flex-direction: column; }
.map-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.map-head strong { margin-right: auto; font: 700 1.2rem/1 var(--head); letter-spacing: 1.5px; text-transform: uppercase; }
.map-body { flex: 1; } .map-body iframe { width: 100%; height: 100%; border: 0; background: #1e1e1e; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .menu a { padding: .55em .6em; font-size: .82rem; } .dots { display: none; } }
@media (max-width: 900px) {
	.burger { display: flex; }
	#join-top { display: none; }
	.menu { position: fixed; inset: var(--bar) 0 auto 0; flex-direction: column; gap: 0; padding: .6rem 1rem 1rem; margin: 0;
		background: rgba(7,10,16,.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
		transform: translateY(-120%); transition: transform .3s ease; max-height: calc(100svh - var(--bar)); overflow: auto; }
	.menu.open { transform: none; }
	.menu a { padding: .9em .6em; font-size: 1rem; }
	.flyer-sec .wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.flyer { width: min(300px, 100%); } .flyer-sec .actions { justify-content: center; }
	.flyer-sec .blurb { margin-inline: auto; }
}
@media (max-width: 640px) {
	.panel .meta { flex-direction: column; align-items: flex-start; }
	.map-dialog { width: 100vw; height: 100svh; border-radius: 0; }
}
/* touch devices: fixed backgrounds jank, so let them scroll normally */
@media (hover: none) { .bg { position: absolute; } }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; } .reveal { opacity: 1; scale: 1; transition: none; }
	.btn, .tile, .tile img { transition: none; }
}


/* ================= PARALLAX =================
   js/site.js sets --p on each section: about +1 when it is below the screen, 0 in the middle, -1 above.
   Slow layers move against the scroll, fast layers move with it, so the scene gets depth.
   Only on screens with a mouse, and never when the visitor asks for reduced motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hero .bg, .panel .bg, .flyer-sec .bg { scale: 1.16; translate: 0 calc(var(--p, 0) * -5vh * var(--depth)); }       /* furthest back */
	.hero h1      { translate: 0 calc(var(--p, 0) * -7vh * var(--depth)); }
	.hero .lead, .hero .kicker { translate: 0 calc(var(--p, 0) * -4vh * var(--depth)); }
	.tiles        { translate: 0 calc(var(--p, 0) * 6vh * var(--depth)); }                                               /* nearest */
	.panel .poster { translate: 0 calc(var(--p, 0) * -3vh * var(--depth)); }                                             /* middle */
	.panel .poster .logo { translate: 0 calc(var(--p, 0) * 3vh * var(--depth)); }                                         /* floats above its picture */
	.panel .meta  { translate: 0 calc(var(--p, 0) * 5vh * var(--depth)); }
	.flyer        { translate: 0 calc(var(--p, 0) * -3vh * var(--depth)); }
	.flyer-sec .meta { translate: 0 calc(var(--p, 0) * 5vh * var(--depth)); }

	/* mouse tilt + light sheen on the framed picture */
	.panel .poster { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out; transform-style: preserve-3d; }
	.panel .poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
		background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.22), transparent 55%); mix-blend-mode: soft-light; }
	.panel .poster.tilting::after { opacity: 1; }
}

/* ================= TITLE + BUTTONS STAY ON THE PICTURE =================
   On everything 900px wide or more the title and buttons sit on the picture's bottom edge, whatever shape the window is.
   The picture simply scales (up to 2200px wide) and stays centred. The shading is on the bottom left and right only,
   so a logo in the bottom centre of a picture stays clear. Narrow windows and phones (under 900px) keep the stacked layout. */
@media (min-width: 900px) {
	.poster { --poster-reserve: 140px; }
	.panel .wrap > .poster, .panel .wrap > .meta { grid-area: 1 / 1; }
	.panel .wrap > .meta { align-self: end; z-index: 2; padding: 3rem 1.6rem 1.3rem; border-radius: 0 0 22px 22px;
		background:
			linear-gradient(90deg, rgba(7,10,16,.88) 0%, rgba(7,10,16,.45) 34%, transparent 52%, transparent 66%, rgba(7,10,16,.65) 100%),
			linear-gradient(180deg, transparent, rgba(7,10,16,.4)); }
	.panel .meta h2 { font-size: clamp(1.4rem, 2.8vw, 2.7rem); }
	/* the description sits on a soft dark panel so it stays readable over the logos inside the pictures */
	.panel .meta .blurb { margin-top: .5rem; font-size: clamp(.85rem, 1.2vw, 1rem); max-width: 50ch; color: #dfe6f3;
		padding: .55rem .85rem; border-radius: 10px; background: rgba(7,10,16,.66); backdrop-filter: blur(3px); }
	.panel .meta .eyebrow { margin-bottom: .35rem; }
}

@media (min-width: 900px) and (max-width: 1100px) {
	.panel .meta .blurb { display: none; }          /* keep the text on the picture short when the picture is small */
	.panel .meta .btn { padding: .65em 1.1em; font-size: .85rem; }
}


/* ================= SEAMS, RIP TRANSITION, CREATURES ================= */
/* 1. clean seam: each section fades to near-black at top and bottom, with a jagged glowing crack along its top edge */
.panel .seam { position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, var(--bg) 0, rgba(7,10,16,.55) 7%, transparent 22%, transparent 80%, rgba(7,10,16,.5) 94%, var(--bg) 100%); }
.panel .seam::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px;
	background: linear-gradient(90deg, var(--a), #fff 50%, var(--b)); opacity: .95;
	clip-path: polygon(0 0, 100% 0, 100% 18%, 97% 62%, 94% 22%, 90% 78%, 86% 30%, 82% 70%, 77% 18%, 73% 82%, 69% 34%, 64% 66%, 60% 20%, 55% 74%, 51% 28%, 46% 80%, 42% 24%, 37% 68%, 33% 20%, 28% 76%, 24% 30%, 19% 72%, 15% 22%, 10% 66%, 6% 28%, 2% 58%, 0 20%); }
.panel .seam::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--a) 55%, transparent), transparent); opacity: .45; }

/* 2. the rip: a diagonal light slash plus an emblem flash when you cross into another game */
#rip { position: fixed; inset: 0; z-index: 48; pointer-events: none; overflow: hidden; visibility: hidden; --ra: #ff9b45; --rb: #27d9c8; --dir: 1; }
#rip.play { visibility: visible; animation: ripHide 0s .9s forwards; }
#rip .wash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ra) 42%, transparent), transparent 62%); }
#rip .slash { position: absolute; left: -35%; right: -35%; top: 50%; height: 20vmin; opacity: 0;
	background: linear-gradient(90deg, transparent, var(--ra) 34%, #fff 50%, var(--rb) 66%, transparent);
	filter: blur(.6px); box-shadow: 0 0 60px var(--ra); transform: translateY(-50%) rotate(-11deg); }
#rip .emblem { position: absolute; left: 50%; top: 50%; width: min(44vmin, 440px); translate: -50% -50%; opacity: 0; color: var(--ra);
	filter: drop-shadow(0 0 22px var(--ra)) drop-shadow(0 0 60px var(--rb)); }
#rip .emblem svg, #rip .emblem img { display: block; width: 100%; height: auto; }
#rip.play .wash { animation: ripWash .85s ease-out; }
#rip.play .slash { animation: ripSlash .7s cubic-bezier(.2,.75,.2,1); }
#rip.play .emblem { animation: ripEmblem .85s cubic-bezier(.2,.9,.2,1); }
@keyframes ripHide { to { visibility: hidden; } }
@keyframes ripWash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ripSlash {
	0%   { opacity: 0; transform: translateY(-50%) rotate(-11deg) translateX(calc(var(--dir) * -75%)); }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-50%) rotate(-11deg) translateX(calc(var(--dir) * 75%)); }
}
@keyframes ripEmblem { 0% { opacity: 0; scale: 1.7; } 28% { opacity: .95; scale: 1; } 100% { opacity: 0; scale: .88; } }

/* 3. creatures: a transparent picture that climbs out of the bottom edge of its section as you scroll toward the next one */
/* z-index 1: in front of the picture but BEHIND the title and buttons (z-index 2), so it never covers them.
   Pick where it stands per game with creaturePos: "left", "center" or "right" (default) in js/games.js. */
.panel .creature.left   { left: clamp(1rem, 5vw, 7rem); right: auto; }
.panel .creature.center { left: 50%; right: auto; margin-left: -12vw; }
.panel .creature { position: absolute; right: clamp(1rem, 5vw, 7rem); bottom: calc(-8px - var(--sink-px, 0px)); z-index: 1; height: calc(var(--creature-h, min(52vh, 560px)) * var(--scale, 1)); width: auto; max-width: 42vw; max-height: var(--maxh, none);   /* never enlarged past 1.3x the real picture, so small ones stay sharp */   /* change --creature-h (for example 40vh) to make them smaller or bigger */
	object-fit: contain; object-position: bottom; pointer-events: none; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--a) 60%, transparent)) drop-shadow(0 18px 24px rgba(0,0,0,.7));
	translate: 0 38vh; }
@media (prefers-reduced-motion: no-preference) {
	.panel .creature { translate: 0 clamp(0px, calc((var(--p, 0) + .25) * 70vh), 60vh); }      /* rises as you scroll, on phones too */
}
@media (prefers-reduced-motion: reduce) { .panel .creature { translate: 0 0; } }
/* phones: the stacked layout leaves a big empty area under the text, so the creature stands there, a little larger */
@media (max-width: 899px) {
	.panel { padding-bottom: max(3rem, 36vh); }                         /* empty room at the bottom for the creature to stand in */
	.panel .creature { height: calc(min(34vh, 340px) * var(--scale, 1)); max-width: 66vw; right: 3vw; }
	.panel .creature.left { left: 3vw; right: auto; }
	.panel .creature.center { left: 50%; right: auto; margin-left: -22vw; }
}


/* ================= CREATURES NEVER HIDE THE TEXT (and the text never hides them) =================
   The dark shading now sits UNDER the creature (on the picture), and the title and buttons move to the side
   opposite the creature. js/site.js sets data-text="left" or "right" on each section to say where the text goes. */
.panel .creature.sleep { display: none; }
@media (min-width: 900px) {
	.panel .wrap > .meta { background: none; }
	.panel .poster::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--shade-h, 12rem); z-index: 1; pointer-events: none;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%); mask-image: linear-gradient(180deg, transparent 0, #000 55%);   /* soft top edge, no hard line */
		background: linear-gradient(90deg, rgba(7,10,16,.88) 0%, rgba(7,10,16,.45) 34%, transparent 52%, transparent 66%, rgba(7,10,16,.65) 100%),
		            linear-gradient(180deg, transparent, rgba(7,10,16,.4)); }
	.panel[data-text="left"] .poster::before {
		background: linear-gradient(90deg, rgba(7,10,16,.9) 0%, rgba(7,10,16,.55) 38%, transparent 64%), linear-gradient(180deg, transparent, rgba(7,10,16,.35)); }
	.panel[data-text="right"] .poster::before {
		background: linear-gradient(270deg, rgba(7,10,16,.9) 0%, rgba(7,10,16,.55) 38%, transparent 64%), linear-gradient(180deg, transparent, rgba(7,10,16,.35)); }
	.panel[data-text="left"] .meta  { justify-content: flex-start; gap: 1.2rem 3rem; }
	.panel[data-text="right"] .meta { justify-content: flex-end;   gap: 1.2rem 3rem; }
	.panel .meta h2, .panel .meta .blurb, .panel .meta .eyebrow { text-shadow: 0 2px 18px rgba(0,0,0,.9); }
}
@media (min-width: 900px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.panel .meta { translate: 0 calc(var(--p, 0) * 2vh * var(--depth)); }     /* stays close to its shading while scrolling */
}


/* a longer menu (7+ games): tighten it on mid-size screens so it stays on one row */
@media (max-width: 1560px) and (min-width: 901px) {
	.menu { gap: 0; }
	.menu a { padding: .55em .55em; font-size: .8rem; letter-spacing: .8px; }
	.topbar { gap: .8rem; }
}
@media (max-width: 1260px) and (min-width: 901px) {
	.brand { font-size: 1.3rem; letter-spacing: 2px; }
	.brand-logo { width: 2rem; height: 2rem; }
	.menu a { padding: .5em .42em; font-size: .74rem; letter-spacing: .4px; }
	#join-top { padding: .6em 1em; font-size: .78rem; }
}

@media (max-width: 1500px) and (min-width: 901px) { .many-links #join-top { display: none; } }


/* hero tiles: two rows on computers, two columns on phones and small tablets */
@media (max-width: 899px) {
	.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* shorter computer screens (laptops): a slightly flatter tile so both rows still fit on the first screen */
@media (max-height: 820px) and (min-width: 900px) {
	.tile { aspect-ratio: 16 / 9; }
}

/* computers: every tile name on one line, so all the dark bars are the same height (phones may wrap) */
@media (min-width: 900px) {
	.tile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .6px; }
}

/* phones: squarer tiles and smaller names, so the bar does not cover most of the picture */
@media (max-width: 899px) {
	.tile { aspect-ratio: 1 / 1; }
	.tile span { padding: 6px 9px 8px; font-size: .8rem; letter-spacing: .3px; }
	.tile small { font-size: .58rem; letter-spacing: 1px; margin-bottom: 2px; }
}


/* phones: the 7 Days to Die dashboard keeps a fixed 250px menu column, which squeezes the map into a thin sliver.
   Make the frame wider and slide that column off the left edge so the map gets the whole screen.
   (--map-crop is the menu column width; 0 now that the dashboard patch shows only a slim icon strip on phones.) */
@media (max-width: 640px) {
	.map-body { overflow: hidden; }
	.map-body iframe { width: calc(100% + var(--map-crop, 0px)); margin-left: calc(-1 * var(--map-crop, 0px)); }
}

@media (max-width: 640px) {
	.map-dialog { max-width: none; max-height: none; margin: 0; }      /* really edge to edge (browsers leave a small gap round a dialog by default) */
	.map-head { padding: .5rem .6rem; }
	.map-head strong { font-size: 1rem; line-height: 1.1; }
}


/* the small phone tip under the Live Map button (only drawn on https pages, only shown on phones and small tablets) */
.map-hint { display: none; }
@media (max-width: 899px) {
	.map-hint { display: block; width: 100%; flex: none; margin: .8rem 0 0; font-size: .8rem; line-height: 1.4; color: var(--mut); }
}

/* server names keep their real capitalisation, e.g. [UAG] Zed ResidentZ (the small labels above them stay in capitals) */
.panel .meta h2, .tile span, .map-head strong { text-transform: none; }
.tile small, .panel .meta .eyebrow { text-transform: uppercase; }

/* phones and small tablets: the text sits over a bright blurred backdrop, so give it a lighter colour, a shadow and a soft dark panel */
@media (max-width: 899px) {
	.blurb, .lead { color: #eef2fb; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6); }
	.panel .meta .blurb, .flyer-sec .blurb, .discord .blurb { padding: .7rem .95rem; border-radius: 12px; background: rgba(7,10,16,.62); }
	.panel .meta .eyebrow { text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.7); }
}