/* AppStudio7, the studio's inner pages (games/, legal/, 404). They wear the home page's aurora look: a near-black
   ground, light text, and one colour per kind of work (games amber, apps green, web apps blue, AI tools violet).
   The home page has its own home.css. */
@font-face { font-family: "Onest"; font-weight: 100 900; src: url("fonts/onest.woff2") format("woff2"); font-display: swap; }

:root {
	--bg: #04060a;
	--ink: #eef4f6;
	--ink2: #b6c2c8;
	--mute: #87969e;
	--green: #3ddc97;
	--k0: #ffb020;     /* games */
	--k1: #3ddc97;     /* apps */
	--k2: #4da3ff;     /* web apps */
	--k3: #b46bff;     /* AI tools */
	--line: color-mix(in srgb, var(--ink) 12%, transparent);
	--panel: color-mix(in srgb, var(--ink) 4%, var(--bg));
	--font: "Onest", system-ui, sans-serif;
	--ease: cubic-bezier(.2, .8, .16, 1);
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.55 var(--font); }
a { color: inherit; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--green); color: #04120c; }
h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 8px; }
.arrow { display: inline-block; transition: transform .35s var(--ease); }

.wrap {
	max-width: 1040px;
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	padding-block: 16px 28px;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 48px);
}
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; text-decoration: none; }
.brand::before { content: ""; width: 28px; height: 28px; background: url("icon.svg") center / contain no-repeat; }
.top nav { display: flex; gap: 2px; font-size: .9375rem; }
.top nav a { padding: 8px 14px; border-radius: 999px; color: var(--ink2); text-decoration: none; transition: color .2s, background-color .2s; }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.wrap h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 750; line-height: 1; letter-spacing: -.04em; }
.wrap .lead { font-size: 1.25rem; color: var(--ink2); max-width: 34em; }
.wrap .lead a { color: var(--green); }
.wrap main { flex: 1; display: grid; align-content: start; gap: clamp(16px, 2.4vw, 22px); }
.wrap main > h1 { margin-bottom: clamp(8px, 1.6vw, 20px); }

/* A panel: a step lighter than the ground, with a faint edge. */
.card { position: relative; min-width: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }

/* The games and apps page: one panel per project, lit in its own colour. */
.game { --kc: var(--k0); display: flex; align-items: flex-start; gap: clamp(16px, 3vw, 28px);
	background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 9%, var(--bg)), var(--panel) 55%); }
.game:nth-of-type(2) { --kc: var(--k1); }
.game > a { flex: none; }
.game > a img { display: block; width: clamp(84px, 14vw, 120px); height: auto; border-radius: 22%; box-shadow: 0 0 0 1px var(--line); }
.game h2 a { text-decoration: none; }
.game h2 .arrow { color: var(--kc); }
.game h2 a:hover .arrow, .game h2 a:focus-visible .arrow { transform: translateX(.18em); }
.game p { color: var(--ink2); max-width: 56ch; }
/* The Google Play picture has a clear margin of 41 of its 646px; the negative margin trims it so the black badge is the box. */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.badges a { display: block; border-radius: 7px; }
.badges img { display: block; width: 180px; height: auto; margin: -11.4px; }
.game .note { margin-top: 10px; font-size: .9375rem; color: var(--mute); }
/* "coming soon" store button: the size and shape of the Google Play badge, a plain phone icon, never Apple's logo */
.soon { display: inline-flex; align-items: center; gap: 7px; min-height: 47px; padding: 8px 16px 8px 10px; border-radius: 7px; background: #000; box-shadow: inset 0 0 0 1px #a6a6a6; color: #fff; }
.soon-ico { width: 26px; height: 26px; flex: none; }
.soon b { display: block; font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.soon small { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: #d4d4d4; }

/* The legal notice. */
.sheet { display: block; }
.sheet h2 { font-size: 1.5rem; margin-bottom: 14px; }
.sheet a { color: var(--green); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 28px; margin: 0; }
.facts dt { color: var(--mute); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.blank { padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--k0) 18%, transparent); color: var(--ink); }

.foot { font-size: .9375rem; color: var(--mute); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; }
.foot a { color: var(--ink2); text-underline-offset: .18em; }
.foot a:hover { color: var(--ink); }

@media (max-width: 520px) {
	.game { flex-direction: column; }
	.facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.facts dd { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.arrow, .top nav a { transition: none; }
}