/* Studio website: shared header + footer (every page), studio pages and the game page template.
   Everything is prefixed eh- so it never clashes with the Grove page's own style.css. */
/* Studio colours ("Charcoal and Ember"): the only place they are set. Each game's own colour comes from
   its data file (data/games/<id>.js `color`) and shows only on its card, chip, sign and page. */
:root {
	--eh-bg: #111111;
	--eh-bg2: #181716;
	--eh-panel: #1d1b1a;
	--eh-line: #2e2b28;
	--eh-ink: #f2ece3;
	--eh-dim: #a39d94;
	--eh-studio-accent: #e9dfc9;
	--eh-accent: var(--eh-studio-accent);
	--eh-on-accent: #15120c;
	--eh-head-font: "Cinzel", Georgia, serif;
	--eh-body-font: "Nunito", system-ui, sans-serif;
	--eh-radius: 18px;
	--eh-wrap: 1180px;
	--eh-head-h: 68px;
}

/* ---------- Header ---------- */
.eh-head, .eh-foot { --eh-ink: #f2ece3; --eh-dim: #a39d94; --eh-line: #2e2b28; --eh-accent: var(--eh-studio-accent); }
.eh-head { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--eh-head-h); display: flex; align-items: center; gap: 20px;
	padding: 0 max(16px, calc((100vw - var(--eh-wrap)) / 2)); font-family: var(--eh-body-font);
	background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); border-bottom: 1px solid transparent; box-sizing: border-box;
	transition: background .4s, border-color .4s, backdrop-filter .4s; }
.eh-head.solid { background: rgba(10, 10, 10, 0.82); backdrop-filter: blur(12px); border-bottom-color: rgba(255, 255, 255, 0.06); }
.eh-brand { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; color: var(--eh-ink); }
.eh-brand img { display: block; width: 38px; height: 38px; }
.eh-word { font: 700 19px/1 var(--eh-head-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--eh-ink); }
.eh-nav { display: flex; gap: 6px; margin-left: auto; align-items: center; }
/* Menu: small spaced capitals; a thin line grows under the one you point at, a glowing spark marks this page. */
.eh-nav a { position: relative; color: rgba(242, 236, 227, 0.72); text-decoration: none; font: 700 13px/1 var(--eh-head-font); letter-spacing: .16em; text-transform: uppercase; padding: 12px 14px; white-space: nowrap; transition: color .25s; }
.eh-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--eh-accent); transform: scaleX(0); transition: transform .3s; }
.eh-nav a:hover, .eh-nav a:focus-visible { color: #fff; outline: none; }
.eh-nav a:hover::after, .eh-nav a:focus-visible::after { transform: scaleX(1); }
.eh-nav a[aria-current="page"] { color: var(--eh-accent); }
.eh-nav a[aria-current="page"]::before { content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--eh-accent); box-shadow: 0 0 10px 2px var(--eh-accent); }
.eh-menu { display: none; margin-left: auto; background: none; border: 1.5px solid var(--eh-line); color: var(--eh-ink); border-radius: 12px; padding: 6px; cursor: pointer; }
.eh-menu svg { width: 24px; height: 24px; display: block; }
.eh-head .lang-switch { position: static; display: flex; gap: 2px; padding: 0; background: none; border: 0; }
.eh-head .lang-switch button { font: 700 12px var(--eh-head-font); letter-spacing: .14em; color: rgba(242, 236, 227, 0.5); background: none; border: 0; padding: 6px 7px; cursor: pointer; }
.eh-head .lang-switch button[aria-pressed="true"] { color: var(--eh-accent); }
@media (max-width: 1000px) { .eh-head .eh-word { font-size: 16px; } }
@media (max-width: 760px) {
	.eh-head { gap: 10px; }
	.eh-menu { display: block; }
	.eh-nav { display: none; position: absolute; top: var(--eh-head-h); left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 10px 16px 16px;
		background: rgba(17, 17, 17, 0.97); border-bottom: 1px solid var(--eh-line); }
	.eh-head.open .eh-nav { display: flex; }
	.eh-nav a { font-size: 17px; }
}
@media (max-width: 420px) { .eh-head .eh-word { font-size: 13px; letter-spacing: .06em; } .eh-brand img { width: 32px; height: 32px; } }

/* ---------- Footer ---------- */
.eh-foot { position: relative; z-index: 2; background: #0c0c0c; border-top: 1px solid var(--eh-line); font-family: var(--eh-body-font); color: var(--eh-dim); padding: 40px 16px 26px; }
.eh-foot-in { max-width: var(--eh-wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px 64px; align-items: flex-start; }
.eh-foot-brand img { width: 52px; height: 52px; }
.eh-foot-brand .eh-word { font-size: 22px; }
.eh-foot nav { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.eh-foot nav b { color: var(--eh-ink); font-family: var(--eh-head-font); font-size: 15px; margin-bottom: 4px; }
.eh-foot nav a { color: var(--eh-dim); text-decoration: none; }
.eh-foot nav a:hover { color: var(--eh-accent); }
.eh-fine { max-width: var(--eh-wrap); margin: 28px auto 0; font-size: 13px; opacity: .75; text-align: center; }

/* ---------- Studio pages (home, news, about) and game template ---------- */
body.eh-page { margin: 0; background: var(--eh-bg); color: var(--eh-ink); font-family: var(--eh-body-font); font-size: 17px; line-height: 1.55;
	overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.eh-page * { box-sizing: border-box; }
.eh-page img { display: block; max-width: 100%; }
.eh-page main { padding-top: var(--eh-head-h); min-height: 70vh; }
.eh-page.eh-game main { padding-top: 0; }
.eh-game .eh-ghero { padding-top: var(--eh-head-h); }
.eh-page h1, .eh-page h2, .eh-page h3 { font-family: var(--eh-head-font); line-height: 1.15; margin: 0; }
.eh-section { max-width: var(--eh-wrap); margin: 0 auto; padding: 72px 16px 0; }
.eh-title { font-size: clamp(28px, 4vw, 42px); font-weight: 900; margin-bottom: 28px !important; text-align: left; }
.eh-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.eh-more { color: var(--eh-accent); text-decoration: none; font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.eh-more svg { width: 18px; height: 18px; }
.eh-note { color: var(--eh-dim); margin: -16px 0 24px; }
.eh-sub-title { font-size: 22px; margin: 40px 0 16px !important; }

.eh-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; font: 800 16px var(--eh-body-font); text-decoration: none; cursor: pointer;
	color: var(--eh-on-accent); background: var(--eh-accent); border: 0; box-shadow: 0 6px 24px rgba(255, 122, 47, 0.28); transition: transform .15s, box-shadow .15s; }
.eh-btn:hover, .eh-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 122, 47, 0.45); outline: none; }
.eh-btn svg { width: 20px; height: 20px; flex: none; }
.eh-btn.ghost { color: var(--eh-ink); background: rgba(17, 17, 17, 0.55); border: 1.5px solid #4a4540; box-shadow: none; }
.eh-btn.big { padding: 16px 28px; font-size: 18px; }
.eh-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Page art behind a page head (About) */
.eh-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eh-ghero canvas.eh-hero-art { transform: scale(1.06); }
.eh-line { font-family: var(--eh-head-font); font-weight: 800; font-size: clamp(22px, 3vw, 32px); margin: 0 0 10px; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7); }

/* ---------- Home: the living camp (drawn by campScene() in site.js from STUDIO.camp) ---------- */
.eh-page[data-page="home"] main { padding-top: 0; }
.eh-camp { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #0b0c10; isolation: isolate; }
.eh-camp-cam { position: absolute; inset: 0; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .8s cubic-bezier(.6, 0, .35, 1); will-change: transform; }
.eh-camp-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.eh-layer { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.eh-layer > img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
/* The painting drawn by its depth picture (depthArt in site.js); the still picture stays until it is ready. */
.eh-depth { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.gl .eh-depth { display: block; }
.gl .eh-layer-art > img, .eh-camp.gl .eh-path-light, .eh-camp.gl .eh-dim { display: none; }
.eh-star { position: absolute; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #fff7e0; box-shadow: 0 0 6px 1px rgba(255, 247, 224, .7);
	animation: eh-twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes eh-twinkle { from { opacity: .15; transform: scale(.6); } to { opacity: 1; transform: scale(1.1); } }
.eh-fog { position: absolute; left: -20%; width: 140%; height: 220px; pointer-events: none; opacity: .5;
	background: radial-gradient(ellipse 28% 50% at 20% 50%, rgba(190, 200, 215, .35), transparent 70%), radial-gradient(ellipse 30% 45% at 70% 55%, rgba(190, 200, 215, .28), transparent 70%);
	animation: eh-drift 38s ease-in-out infinite alternate; }
.eh-fog.two { animation-duration: 52s; animation-direction: alternate-reverse; opacity: .35; }
@keyframes eh-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
/* Paths: a light on the one under the mouse, the others a little darker. */
.eh-path-light { position: absolute; inset: 0; background-size: 100% 100%; opacity: 0; transition: opacity .35s; filter: brightness(1.45) saturate(1.2); pointer-events: none; }
.eh-path-glow { position: absolute; width: 760px; height: 600px; margin: -300px 0 0 -380px; opacity: 0; transition: opacity .35s; pointer-events: none;
	background: radial-gradient(closest-side, var(--accent), transparent); mix-blend-mode: screen; }
.eh-path-on .eh-path-light { opacity: 1; }
.eh-path-on .eh-path-glow { opacity: .28; }
.eh-dim { position: absolute; inset: 0; background: rgba(5, 5, 8, .5); opacity: 0; transition: opacity .35s; pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 420px 360px at var(--fx, 50%) var(--fy, 50%), transparent 45%, #000 100%);
	mask-image: radial-gradient(ellipse 420px 360px at var(--fx, 50%) var(--fy, 50%), transparent 45%, #000 100%); }
.eh-camp[data-hover] .eh-dim { opacity: 1; }
.eh-hits { position: absolute; inset: 0; width: 100%; height: 100%; }
.eh-hits a { cursor: pointer; outline: none; }
.eh-hits polygon { fill: transparent; stroke: none; pointer-events: all; }
.eh-hits a:focus-visible polygon { stroke: var(--eh-accent); stroke-width: 4; stroke-dasharray: 14 10; }
/* Painted signpost: wood board, game name, its tag. */
.eh-sign { position: absolute; transform: translate(-50%, -100%) scale(.7) rotate(-2deg); transform-origin: 50% 100%; opacity: 0; pointer-events: none;
	transition: opacity .25s, transform .35s cubic-bezier(.3, 1.5, .5, 1); text-align: center; }
.eh-path-on .eh-sign { opacity: 1; transform: translate(-50%, -100%) scale(1) rotate(-2deg); }
.eh-sign-board { position: relative; padding: 14px 28px 16px; border-radius: 10px; color: #f8ead0; border: 4px solid #3b2413;
	background: repeating-linear-gradient(176deg, rgba(0, 0, 0, .08) 0 3px, transparent 3px 11px), linear-gradient(#8a5b36, #6a4225 60%, #5a361d);
	box-shadow: inset 0 2px 0 rgba(255, 220, 170, .25), 0 10px 26px rgba(0, 0, 0, .55); }
.eh-sign-board::before, .eh-sign-board::after { content: ""; position: absolute; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #2a190d; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25); }
.eh-sign-board::before { left: 9px; } .eh-sign-board::after { right: 9px; }
.eh-sign b { display: block; font: 700 34px/1.1 var(--eh-head-font); letter-spacing: .04em; white-space: nowrap; text-shadow: 0 2px 0 #2a190d; }
.eh-sign .eh-badge { margin-top: 10px; font-size: 15px; }
.eh-sign-post { width: 18px; height: 90px; margin: -2px auto 0; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #3b2413, #6a4225 45%, #3b2413); }
/* Camp: firelight and the heroes around the fire. */
.eh-fire { position: absolute; transform: translate(-50%, -82%); pointer-events: none; }
.eh-clearing { position: absolute; width: 560px; height: 230px; margin: -115px 0 0 -280px; pointer-events: none;
	background: radial-gradient(closest-side, rgba(40, 22, 10, .6), rgba(40, 22, 10, .35) 60%, transparent); }
.eh-firelight { position: absolute; width: 1100px; height: 760px; margin: -380px 0 0 -550px; pointer-events: none; mix-blend-mode: screen;
	background: radial-gradient(closest-side, rgba(255, 150, 60, .55), rgba(255, 110, 40, .18) 45%, transparent); }
.eh-person { position: absolute; background-repeat: no-repeat; transform-origin: 50% 100%; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45));
	animation: eh-frames var(--speed, 1.1s) steps(var(--frames)) infinite; }
@keyframes eh-frames { to { background-position-x: calc(var(--strip) * -1); } }
.eh-person::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .35); z-index: -1; }
/* Screen-space parts: sparks, shade for the words, the words, the fade when a path opens. */
.eh-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.eh-camp-shade { position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse 60% 34% at 50% 22%, rgba(8, 8, 10, .55), transparent 75%), linear-gradient(rgba(8, 8, 10, .55), transparent 22%, transparent 90%, var(--eh-bg)); }
.eh-camp-text { position: absolute; left: 0; right: 0; top: calc(var(--eh-head-h) + 7vh); z-index: 3; text-align: center; padding: 0 16px; pointer-events: none; transition: opacity .3s; }
.eh-camp-text > * { pointer-events: auto; }
.eh-camp-text .eh-line { max-width: 760px; margin: 0 auto 22px; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.2; text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 4px 30px rgba(0, 0, 0, .8); }
.eh-hint { position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%); margin: 0; display: flex; gap: 8px; align-items: center;
	font: 800 14px var(--eh-body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--eh-ink); opacity: .8; text-shadow: 0 2px 8px #000; pointer-events: none; }
.eh-hint svg { width: 18px; height: 18px; animation: eh-nudge 1.6s ease-in-out infinite; }
@keyframes eh-nudge { 50% { transform: translateY(4px); } }
.eh-camp-fade { position: absolute; inset: 0; z-index: 5; background: var(--eh-bg); opacity: 0; pointer-events: none; transition: opacity .35s .45s; }
.eh-camp.zooming .eh-camp-cam { transform: scale(2.6); }
.eh-camp.zooming .eh-camp-text, .eh-camp.zooming .eh-hint { opacity: 0; }
.eh-camp.zooming .eh-camp-fade { opacity: 1; }
@media (max-width: 760px) { .eh-camp { height: 88svh; } .eh-camp-text { top: calc(var(--eh-head-h) + 4vh); } }

/* Sections fade and slide in as they scroll into view. */
.eh-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); transition-delay: var(--delay, 0s); }
.eh-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.eh-reveal { transform: none; transition: opacity .3s; }
	.eh-star, .eh-fog, .eh-person, .eh-hint svg { animation: none !important; }
	.eh-camp-cam, .eh-sign { transition: none; }
}

/* Game cards */
.eh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.eh-card { background: var(--eh-panel); border: 1.5px solid var(--eh-line); border-top: 4px solid var(--accent, var(--eh-line)); border-radius: var(--eh-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.eh-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.eh-card-art { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.eh-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.eh-card:hover .eh-card-art img { transform: scale(1.05); }
.eh-badge { display: inline-block; font: 900 12px var(--eh-body-font); letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.eh-card-art .eh-badge { position: absolute; top: 14px; left: 14px; }
.eh-badge.out { background: var(--accent, var(--eh-accent)); color: #111111; }
.eh-badge.soon { background: rgba(17, 17, 17, 0.85); color: var(--accent, var(--eh-accent)); border: 1.5px solid var(--accent, var(--eh-accent)); }
.eh-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.eh-card-body h3 { font-size: 24px; }
.eh-card-body p { margin: 0; color: var(--eh-dim); }
.eh-tags { list-style: none; padding: 0; margin: 2px 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.eh-tags li { font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--eh-ink); }
.eh-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.eh-card-actions .eh-btn { padding: 10px 18px; font-size: 15px; }

/* News */
.eh-posts.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.eh-posts.list { display: grid; gap: 22px; }
.eh-post { background: var(--eh-panel); border: 1.5px solid var(--eh-line); border-radius: var(--eh-radius); overflow: hidden; display: flex; flex-direction: column; }
.eh-posts.list .eh-post { flex-direction: row; }
.eh-post-art { aspect-ratio: 16 / 9; overflow: hidden; flex: none; }
.eh-posts.list .eh-post-art { width: 38%; aspect-ratio: auto; min-height: 220px; }
.eh-post-art img { width: 100%; height: 100%; object-fit: cover; }
.eh-post-body { padding: 18px 22px 22px; }
.eh-post-body h3 { font-size: 21px; margin: 6px 0 8px; }
.eh-post-body p { margin: 0; color: var(--eh-dim); }
.eh-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--eh-dim) !important; }
.eh-chip { font-weight: 900; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: #10131a; background: var(--accent); }
.eh-post[hidden] { display: none; }
@media (max-width: 760px) {
	.eh-posts.list .eh-post { flex-direction: column; }
	.eh-posts.list .eh-post-art { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
}

/* Page heads (news, about) */
.eh-page-head { position: relative; text-align: center; padding: 64px 16px 8px; overflow: hidden; }
.eh-page-head h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 900; }
.eh-page-head p { color: var(--eh-dim); margin: 8px auto 0; max-width: 640px; }
.eh-page-head.art { padding: 90px 16px 60px; }
.eh-page-head.art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(17, 17, 17, 0.55), var(--eh-bg)); }
.eh-page-head.art > :not(.eh-hero-art) { position: relative; z-index: 1; }
.eh-page-head.art p { color: var(--eh-ink); font-size: 20px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
.eh-page-icon { width: 96px; margin: 0 auto 10px; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6)); }
.eh-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.eh-filters button { font: 800 15px var(--eh-body-font); color: var(--eh-dim); background: rgba(255, 255, 255, 0.05); border: 1.5px solid var(--eh-line); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.eh-filters button[aria-pressed="true"] { color: var(--eh-on-accent); background: var(--eh-accent); border-color: var(--eh-accent); }

/* About */
.eh-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.eh-blocks article { background: var(--eh-panel); border: 1.5px solid var(--eh-line); border-radius: var(--eh-radius); padding: 24px; }
.eh-blocks h3 { font-size: 21px; margin-bottom: 8px; color: var(--eh-ink); }
.eh-blocks p { margin: 0; color: var(--eh-dim); }
.eh-icon-block { display: flex; gap: 16px; }
.eh-icon-block > span { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 122, 47, 0.12); color: var(--eh-accent); }
.eh-icon-block svg { width: 28px; height: 28px; }
.eh-contacts { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.eh-contacts a { color: var(--eh-accent); }
.eh-press { display: grid; grid-template-columns: 1fr 2fr 1.6fr; gap: 22px; align-items: stretch; }
.eh-logo-tile { margin: 0; background: var(--eh-bg2); border: 1.5px solid var(--eh-line); border-radius: var(--eh-radius); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.eh-logo-tile img { max-height: 200px; width: auto; margin: auto; }
.eh-logo-tile figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800; }
.eh-logo-tile a { color: var(--eh-accent); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.eh-logo-tile a svg { width: 18px; height: 18px; }
.eh-facts { border-collapse: collapse; width: 100%; background: var(--eh-panel); border: 1.5px solid var(--eh-line); border-radius: var(--eh-radius); overflow: hidden; font-size: 15px; }
.eh-facts caption { text-align: left; font-family: var(--eh-head-font); font-weight: 800; font-size: 19px; padding: 0 0 10px; }
.eh-facts th, .eh-facts td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--eh-line); vertical-align: top; }
.eh-facts th { color: var(--eh-dim); width: 34%; }
.eh-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.eh-shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1.5px solid var(--eh-line); }
.eh-logo-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.eh-logo-options figure { margin: 0; padding: 18px; border-radius: 14px; border: 1.5px solid var(--eh-line); background: var(--eh-bg2); text-align: center; color: var(--eh-dim); font-weight: 800; }
.eh-logo-options img { height: 90px; width: auto; margin: 0 auto 10px; }
.eh-logo-tile img.eh-press-lockup { width: 100%; max-height: none; }
.eh-note-after { margin: -8px 0 18px; }
.eh-logo-options figcaption { display: flex; justify-content: center; gap: 12px; align-items: center; }
.eh-logo-options figcaption a { color: var(--eh-accent); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; font-size: 14px; }
.eh-logo-options figcaption svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .eh-press { grid-template-columns: 1fr; } }

/* Sign-up */
.eh-signup { max-width: var(--eh-wrap); margin: 80px auto 0; padding: 0 16px; }
.eh-signup-in { display: grid; grid-template-columns: auto 1fr minmax(280px, 420px); gap: 18px 26px; align-items: center; padding: 30px 32px; border-radius: 24px;
	background: radial-gradient(circle at 0% 0%, rgba(255, 122, 47, 0.14), transparent 50%), var(--eh-panel); border: 1.5px solid var(--eh-line); }
.eh-signup-icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--eh-accent); color: var(--eh-on-accent); }
.eh-signup-icon svg { width: 34px; height: 34px; }
.eh-signup h2 { font-size: 28px; text-align: left; }
.eh-signup p { margin: 4px 0 0; color: var(--eh-dim); }
.eh-signup form { display: flex; gap: 10px; }
.eh-signup input { flex: 1; min-width: 0; font: 600 16px var(--eh-body-font); padding: 13px 18px; border-radius: 999px; border: 1.5px solid var(--eh-line); background: rgba(0, 0, 0, 0.25); color: var(--eh-ink); }
.eh-signup input:focus { outline: 2px solid var(--eh-accent); }
.eh-signup-note { grid-column: 2 / -1; font-size: 14px; }
.eh-signup-note.done { color: var(--eh-accent) !important; font-weight: 800; }
@media (max-width: 860px) {
	.eh-signup-in { grid-template-columns: 1fr; text-align: left; }
	.eh-signup-note { grid-column: auto; }
	.eh-signup form { flex-wrap: wrap; }
}
.eh-page main > :last-child { margin-bottom: 90px; }

/* ---------- Game page template: colours come from the game's data (--g-*) ---------- */
body.eh-game { background: var(--g-bg, var(--eh-bg)); color: var(--g-ink, var(--eh-ink));
	--eh-panel: var(--g-panel); --eh-line: var(--g-line); --eh-dim: var(--g-dim); --eh-ink: var(--g-ink); --eh-accent: var(--g-accent); --eh-on-accent: var(--g-on, #fff); }
.eh-game .eh-title, .eh-game h1, .eh-game h3 { color: var(--g-head, inherit); }
.eh-ghero { position: relative; min-height: min(80vh, 720px); display: flex; align-items: flex-end; overflow: hidden; padding: 0 16px 64px; }
.eh-ghero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.1) 60%), linear-gradient(transparent 55%, var(--g-bg)); }
.eh-ghero-in { position: relative; z-index: 3; max-width: var(--eh-wrap); width: 100%; margin: 0 auto; color: #fff; }
.eh-ghero h1 { font-size: clamp(42px, 7vw, 84px); font-weight: 900; color: #fff !important; margin: 14px 0 0; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7); }
.eh-kicker { margin: 4px 0 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.eh-ghero .eh-line { max-width: 640px; color: #fff; }
.eh-ghero .eh-actions { justify-content: flex-start; margin-top: 22px; }
.eh-playband { text-align: center; }
.eh-playband .eh-note { margin-top: -10px; }
.eh-game .eh-btn { color: var(--g-on, #fff); background: var(--g-accent); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); }
.eh-game .eh-btn.ghost { color: var(--g-ink); background: transparent; border-color: var(--g-line); }
.eh-game .eh-card .eh-btn.ghost { color: var(--eh-ink); }
/* A game page that tells its story as you scroll (story() in site.js, game data `story`). */
.eh-scene { position: relative; height: 230vh; }
.eh-scene.plain { height: 160vh; }
.eh-scene.plain .eh-scene-pin::after { background: rgba(0, 0, 0, 0.62); }
.eh-scene-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--g-bg); }
.eh-scene-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.eh-scene-stage > img, .eh-scene-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.eh-scene-stage > canvas { display: none; }
.eh-scene.gl .eh-scene-stage > canvas { display: block; }
.eh-scene.gl .eh-scene-stage > img { visibility: hidden; }
/* Real painted layers (plates() in site.js): stacked, each moved by its depth; light breathes, fog drifts. */
.eh-plate { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.eh-plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eh-plate.pulse > img { animation: eh-breathe 2.3s ease-in-out infinite alternate; }
.eh-plate.drift > img { animation: eh-drift 26s ease-in-out infinite alternate; }
@keyframes eh-breathe { 0% { opacity: .7; } 40% { opacity: 1; } 70% { opacity: .82; } 100% { opacity: .96; } }
@keyframes eh-drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
.eh-hero-plates { overflow: hidden; }
.eh-hero-plates > .eh-plate { inset: -5%; }
.eh-scene-pin::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.15) 60%, transparent), linear-gradient(var(--g-bg), transparent 14%, transparent 86%, var(--g-bg)); }
.eh-scene-glow { position: absolute; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
	background: radial-gradient(closest-side, rgba(255, 150, 60, 0.55), rgba(255, 90, 20, 0.18) 55%, transparent); animation: eh-flicker 1.7s ease-in-out infinite alternate; }
@keyframes eh-flicker { 0% { opacity: .75; transform: scale(calc(var(--s, 1) * .96)); } 30% { opacity: 1; } 55% { opacity: .82; transform: scale(calc(var(--s, 1) * 1.03)); } 100% { opacity: .95; transform: scale(calc(var(--s, 1) * .99)); } }
.eh-scene-glow.red { background: radial-gradient(closest-side, rgba(255, 40, 40, 0.6), rgba(200, 20, 20, 0.2) 55%, transparent); animation: eh-flare 0.9s steps(6) infinite alternate; }
@keyframes eh-flare { from { opacity: .6; transform: scale(calc(var(--s, 1) * .92)); } to { opacity: 1; transform: scale(calc(var(--s, 1) * 1.06)); } }
.eh-scene-torch { position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(circle 300px at var(--tx, 60%) var(--ty, 50%), transparent 0, transparent 120px, rgba(2, 3, 5, 0.55) 230px, rgba(2, 3, 5, 0.85) 420px); }
.eh-scene-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.eh-scene-text { position: absolute; z-index: 3; left: 0; right: 0; bottom: 18vh; max-width: var(--eh-wrap); margin: 0 auto; padding: 0 16px; color: #fff; }
.eh-scene.plain .eh-scene-text { bottom: auto; top: 50%; transform: translateY(-50%); text-align: center; }
.eh-scene-line { font-family: var(--eh-head-font); font-weight: 900; font-size: clamp(32px, 5.4vw, 72px); line-height: 1.05; margin: 0; max-width: 820px;
	text-shadow: 0 6px 30px rgba(0, 0, 0, 0.85); opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s cubic-bezier(.2, .7, .2, 1); }
.eh-scene.plain .eh-scene-line { margin: 0 auto; }
.eh-scene-sub { font-size: clamp(17px, 1.7vw, 22px); color: rgba(255, 255, 255, 0.82); margin: 18px 0 0; max-width: 560px; opacity: 0; transform: translateY(16px); transition: opacity 1s .15s, transform 1s .15s; }
.eh-scene.plain .eh-scene-sub { margin: 18px auto 0; }
.eh-scene-text .eh-actions { margin-top: 28px; opacity: 0; transition: opacity 1s .3s; }
.eh-scene.in .eh-scene-line { opacity: 1; transform: none; }
.eh-scene.sub .eh-scene-sub, .eh-scene.sub .eh-actions { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .eh-scene { height: auto; } .eh-scene-pin { position: relative; } .eh-scene-line, .eh-scene-sub, .eh-scene-text .eh-actions { opacity: 1; transform: none; } .eh-scene-glow, .eh-plate > img { animation: none; } }
.eh-pitch { display: grid; gap: 40px; }
.eh-pillar { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; }
.eh-pillar.flip { grid-template-columns: 1fr 1.5fr; }
.eh-pillar.flip .eh-pillar-art { order: 2; }
.eh-pillar-art { position: relative; border-radius: var(--eh-radius); overflow: hidden; aspect-ratio: 16 / 10; border: 1.5px solid var(--g-line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); }
.eh-pillar-art img { width: 100%; height: 100%; object-fit: cover; }
.eh-num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--g-accent); color: var(--g-on, #fff); font: 900 20px var(--eh-head-font); margin-bottom: 12px; }
.eh-pillar-text h3 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 10px; }
.eh-pillar-text p { margin: 0; font-size: 19px; color: var(--g-dim); }
.eh-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.eh-gallery figure { position: relative; margin: 0; border-radius: var(--eh-radius); overflow: hidden; border: 1.5px solid var(--g-line); }
.eh-gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.eh-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 30px 16px 12px; color: #fff; font-weight: 800; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }
@media (max-width: 860px) {
	.eh-pillar, .eh-pillar.flip { grid-template-columns: 1fr; gap: 18px; }
	.eh-pillar.flip .eh-pillar-art { order: 0; }
	.eh-gallery { grid-template-columns: 1fr; }
}

/* Parchment look (RPG): warm paper, ink-brown headings, framed pictures. */
body.look-parchment { background-color: var(--g-bg);
	background-image: radial-gradient(ellipse at 20% 10%, rgba(255, 250, 230, 0.7), transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(160, 110, 50, 0.16), transparent 55%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
.look-parchment .eh-pillar-art, .look-parchment .eh-gallery figure { border: 6px solid #fbf3df; outline: 1.5px solid rgba(90, 60, 30, 0.35); box-shadow: 0 14px 34px rgba(90, 60, 30, 0.28); }
.look-parchment .eh-title { border-bottom: 2px solid rgba(90, 60, 30, 0.25); padding-bottom: 12px; }
.look-parchment .eh-signup-in { background: radial-gradient(circle at 0% 0%, rgba(180, 84, 42, 0.14), transparent 50%), var(--g-panel); }
.look-parchment .eh-signup input { background: #fffaf0; color: var(--g-ink); }
.look-parchment .eh-signup-icon, .look-parchment .eh-num { color: var(--g-on, #fff); background: var(--g-accent); }
.look-parchment .eh-foot, .look-dark .eh-foot { margin-top: 0; }

/* Dark look (zombie): near black, cold grey, red; pictures lit by a flashlight circle at the mouse. */
.look-dark .eh-signup-icon { background: var(--g-accent); color: #fff; }
.look-dark .eh-badge.soon { color: #ff6a5e; border-color: var(--g-accent); }
.look-dark .eh-title { letter-spacing: .02em; }
.look-dark .eh-title::after { content: ""; display: block; width: 64px; height: 3px; background: var(--g-accent); margin-top: 14px; }
.look-dark [data-flashlight]::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 45%), transparent 0, transparent 100px, rgba(2, 3, 5, 0.3) 190px, rgba(2, 3, 5, 0.55) 320px); }
.look-dark .eh-ghero[data-flashlight]::before { background: radial-gradient(circle 320px at var(--mx, 62%) var(--my, 42%), transparent 0, transparent 150px, rgba(2, 3, 5, 0.5) 260px, rgba(2, 3, 5, 0.78) 420px); }
.look-dark.no-flashlight [data-flashlight]::before { display: none; }

/* Stronger game page tops (solid colours only: no gradient letters) (hero.look in the game data; ?hero= tries one). Shared: the
   scene is brighter, the line sits on two lines (one per sentence), Play glows. */
.eh-ghero[class*="hero-"] { min-height: min(92vh, 860px); }
.eh-ghero[class*="hero-"]::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%), linear-gradient(transparent 60%, var(--g-bg)); }
.look-dark .eh-ghero[class*="hero-"][data-flashlight]::before { background: radial-gradient(circle 380px at var(--mx, 70%) var(--my, 45%), transparent 0, transparent 190px, rgba(2, 3, 5, 0.25) 300px, rgba(2, 3, 5, 0.5) 520px); }
.eh-ghero[class*="hero-"] .eh-line span { display: block; }
.eh-ghero[class*="hero-"] h1 span { display: inline-block; }
.eh-ghero[class*="hero-"] .eh-btn.big { padding: 18px 34px; font-size: 20px; animation: eh-call 2.4s ease-in-out infinite; }
@keyframes eh-call { 0%, 100% { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(224, 52, 43, 0.55); } 50% { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 0 14px rgba(224, 52, 43, 0); } }

/* night (his pick, 10-30): the name in three heavy lines, DARK red and its light keeps going out; the line in
   narrow capitals, the first sentence grey. Solid colours only: no gradient letters. */
.hero-night h1 { font-family: "Anton", var(--eh-head-font); font-weight: 400; text-transform: uppercase; font-size: clamp(56px, 8.5vw, 124px); line-height: .9; letter-spacing: .01em; margin-bottom: 14px; }
.hero-night h1 span { display: block !important; }
.hero-night h1 span:last-child { color: #e0342b; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.8); animation: eh-dying 4.5s infinite; }
@keyframes eh-dying { 0%, 100% { opacity: 1; } 62% { opacity: 1; } 64% { opacity: .25; } 66% { opacity: .9; } 70% { opacity: .15; } 74% { opacity: 1; } }
.hero-night .eh-kicker { color: #ff6a5e; }
.hero-night .eh-line { font-family: "Bebas Neue", var(--eh-head-font); font-weight: 400; letter-spacing: .08em; font-size: clamp(26px, 3vw, 40px); text-transform: uppercase; line-height: 1.05; }
.hero-night .eh-line span:first-child { color: #9aa1aa; }
@media (prefers-reduced-motion: reduce) { .eh-ghero[class*="hero-"] h1, .eh-ghero[class*="hero-"] h1 span, .eh-ghero[class*="hero-"] .eh-btn.big { animation: none; } }