/* mimato games - glowing vector lines on black, like the games. No third-party requests: body text in system fonts,
   the headline face is served from assets/fonts. */
/* Headline face: UnifrakturCook (SIL Open Font License, see fonts/UnifrakturCook-OFL.txt), served from this site. */
@font-face {
	font-family: "UnifrakturCook";
	src: url("fonts/UnifrakturCook-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

:root {
	--bg: #04050a;
	--ink: #d9e6f2;
	--dim: #8a98a8;
	--line: #7fe0ff;
	--accent: #ffe066;
	--hot: #ff5a3c;
	--glow: 0 0 14px rgba(127, 224, 255, 0.45);
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
	--serif: "Times New Roman", Times, "Liberation Serif", serif;
	--fraktur: "UnifrakturCook", "Times New Roman", serif;
	color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 19px/1.6 var(--serif);
	overflow-x: hidden;
}
a { color: var(--line); }
img, video { display: block; max-width: 100%; }

/* --- the sky behind everything: two star layers moved by site.js at different speeds --- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
	background: radial-gradient(ellipse at 70% 10%, #0d1830 0%, transparent 60%), var(--bg); }
.stars { position: absolute; left: 0; right: 0; top: 0; height: 300vh; }
.stars i { position: absolute; width: 1px; height: 1px; background: #fff; border-radius: 50%; }
.stars.near i { width: 2px; height: 2px; box-shadow: 0 0 6px #9fe8ff; }

/* --- header --- */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding: 14px clamp(16px, 4vw, 48px); background: rgba(4, 5, 10, 0.72);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(127, 224, 255, 0.12); }
/* the logo: Solar Doom's sun, the name in the headline face, "games" tucked under it */
.brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
	text-decoration: none; white-space: nowrap; }
.brand .sun { grid-row: 1 / 3; width: 44px; height: 44px; fill: var(--accent);
	filter: drop-shadow(0 0 8px rgba(255, 224, 102, 0.55)); transition: transform 0.6s ease; }
.brand .sun .core { fill: var(--bg); }
.brand:hover .sun { transform: rotate(40deg); }
.brand .word { font: 700 30px/0.9 var(--fraktur); color: var(--accent); text-shadow: 0 0 12px rgba(255, 224, 102, 0.45); }
.brand .sub { font: 600 10px/1 var(--mono); letter-spacing: 0.52em; text-transform: uppercase; color: var(--line);
	text-shadow: var(--glow); padding-left: 2px; }
nav { display: flex; gap: clamp(10px, 2.5vw, 28px); flex-wrap: wrap; justify-content: flex-end; }
nav a { font: 13px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
nav a:hover { color: var(--line); }
nav a.lang { color: var(--accent); border: 1px solid rgba(255, 224, 102, 0.4); padding: 6px 10px; border-radius: 4px; }

/* --- hero --- */
.hero { position: relative; min-height: 92vh; display: grid; align-items: center; padding: 8vh clamp(16px, 6vw, 96px);
	overflow: hidden; }
.planet { position: absolute; right: -8vw; top: 6vh; width: min(70vw, 720px); fill: none; stroke: var(--line);
	stroke-width: 0.6; opacity: 0.55; filter: drop-shadow(0 0 6px rgba(127, 224, 255, 0.6)); }
.planet .eye { stroke: var(--hot); stroke-width: 1; }
.hero-text { position: relative; max-width: 620px; }
.kicker, .tag { font: 13px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.tag.soon { color: var(--hot); }
h1 { font: 700 clamp(46px, 8.4vw, 98px)/1 var(--fraktur); letter-spacing: 0; margin: 0 0 22px;
	text-shadow: 0 0 24px rgba(127, 224, 255, 0.25); }
h2 { font: 700 clamp(30px, 4.8vw, 50px)/1.1 var(--serif); margin: 0; }
h3 { font: 500 14px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.hero p { color: var(--dim); font-size: clamp(17px, 2vw, 20px); }
.button { display: inline-block; margin-top: 18px; padding: 12px 22px; border: 1px solid var(--line); border-radius: 6px;
	color: var(--line); text-decoration: none; font: 14px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
	box-shadow: var(--glow); }
.button:hover { background: rgba(127, 224, 255, 0.1); }

/* --- a game --- */
.game { padding: 12vh clamp(16px, 6vw, 96px) 6vh; max-width: 1240px; margin: 0 auto; }
.game-head { display: flex; align-items: center; gap: 22px; margin-bottom: 44px; }
.icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 0 30px rgba(127, 224, 255, 0.18); }
.subtitle { margin: 6px 0 0; color: var(--dim); font-size: 18px; }
.game-body { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.game-body.reverse { grid-template-columns: 1fr minmax(220px, 340px); }
.game-body.reverse .phone { order: 2; }
.phone { border: 1px solid rgba(127, 224, 255, 0.35); border-radius: 34px; padding: 10px; background: #000;
	box-shadow: 0 0 40px rgba(127, 224, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.phone video { width: 100%; aspect-ratio: 886 / 1920; border-radius: 26px; background: #000; object-fit: cover; }
.copy p { color: #c3d0dd; }
.features { list-style: none; padding: 0; margin: 22px 0 28px; }
.features li { padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid rgba(127, 224, 255, 0.08); }
.features li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 10px;
	border: 1px solid var(--line); transform: rotate(45deg); box-shadow: var(--glow); }
.note { color: var(--hot); font: 14px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }

/* App Store button (own drawing; Apple's official badge can replace it: developer.apple.com/app-store/marketing/guidelines) */
.store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; background: #000;
	color: #fff; border: 1px solid #a6a6a6; border-radius: 10px; text-decoration: none; }
.store-badge svg { width: 26px; height: 26px; fill: #fff; }
.store-badge span { font: 600 21px/1 var(--sans); }
.store-badge small { display: block; font: 11px/1.3 var(--sans); }
.store-badge:hover { border-color: var(--line); box-shadow: var(--glow); }

/* screenshots: a strip that drifts sideways while scrolling */
.gallery-title { margin: 12vh 0 22px; }
.gallery { overflow: hidden; margin: 0 calc(-1 * clamp(16px, 6vw, 96px)); padding: 10px 0 30px; }
.strip { display: flex; gap: 22px; width: max-content; padding-left: clamp(16px, 6vw, 96px); will-change: transform; }
.strip img, .mini-gallery img { width: clamp(160px, 20vw, 240px); height: auto; border-radius: 18px;
	border: 1px solid rgba(127, 224, 255, 0.2); }
.mini-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.mini-gallery img { width: 100%; border-radius: 12px; }

.upcoming { border-top: 1px solid rgba(255, 90, 60, 0.18); }
.upcoming .phone { border-color: rgba(255, 90, 60, 0.4); box-shadow: 0 0 40px rgba(255, 90, 60, 0.15); }
.upcoming .icon { box-shadow: 0 0 30px rgba(255, 90, 60, 0.2); }

.contact { text-align: center; padding: 14vh 16px 10vh; }
.contact p { color: var(--dim); }

footer { border-top: 1px solid rgba(127, 224, 255, 0.12); padding: 30px clamp(16px, 4vw, 48px) 40px; display: flex;
	flex-wrap: wrap; gap: 10px 26px; align-items: center; color: #5d6b7a; font-size: 13px; }
footer a { color: var(--dim); text-decoration: none; font-family: var(--mono); letter-spacing: 0.08em; }
footer p { flex-basis: 100%; margin: 6px 0 0; }

/* --- legal pages --- */
.legal-body { max-width: 760px; margin: 0 auto; padding: 8vh 16px; }
.legal-body h1 { font-size: clamp(30px, 5vw, 44px); }
.legal-body h2 { font-size: 20px; margin-top: 34px; color: var(--line); }
.legal-body p { color: #c3d0dd; }
.legal-body .hint { color: var(--dim); font-style: italic; }
mark { background: rgba(255, 224, 102, 0.18); color: var(--accent); padding: 0 4px; border-radius: 3px; }

/* --- roguelikes page: the games' own characters instead of phone screenshots --- */
.hero.short { min-height: 68vh; }
.glyphs { position: absolute; right: clamp(0px, 5vw, 90px); top: 9vh; margin: 0; font: clamp(22px, 3.9vw, 52px)/1.25 var(--mono);
	color: var(--line); opacity: 0.4; text-shadow: var(--glow); user-select: none; }
.icon.glyph { display: grid; place-items: center; flex-shrink: 0; background: #000; border: 1px solid rgba(127, 224, 255, 0.35);
	font: 600 58px/1 var(--mono); color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, 0.6); }
.game-body.wide { grid-template-columns: minmax(300px, 560px) 1fr; }
.term { display: block; border: 1px solid rgba(127, 224, 255, 0.35); border-radius: 14px; padding: 20px 18px 14px; background: #000;
	box-shadow: 0 0 40px rgba(127, 224, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.04); text-decoration: none;
	overflow: hidden; }
.term:hover { border-color: var(--line); }
.term pre { margin: 0; font: clamp(9px, 1.55vw, 14px)/1.3 var(--mono); color: #6e6e6e; }
.term b { font-weight: 400; }
/* FIREFOX is black and white, so is its picture */
.term .w { color: #a0a0a0; } .term .r { color: #383838; } .term .s, .term .d { color: #fff; font-weight: 700; }
.term .p { color: #fff; font-weight: 700; } .term .g { color: #000; background: #fff; font-weight: 700; } .term .c { color: #8a8a8a; } .term .x { color: #fff; font-weight: 700; }
.term-foot { display: block; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(127, 224, 255, 0.12);
	font: 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.button.play { margin: 0 0 18px; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 14px rgba(255, 224, 102, 0.4); }
.button.play:hover { background: rgba(255, 224, 102, 0.1); }
nav a[aria-current] { color: var(--line); }

/* --- small screens --- */
@media (max-width: 760px) {
	.game-body, .game-body.reverse { grid-template-columns: 1fr; }
	.game-body.reverse .phone { order: 0; }
	.phone { max-width: 300px; margin: 0 auto; }
	.game-head { gap: 16px; }
	.icon { width: 72px; height: 72px; border-radius: 16px; }
	.mini-gallery { grid-template-columns: repeat(2, 1fr); }
	nav a:not(.lang) { display: none; }
	.planet { width: 120vw; right: -40vw; top: 4vh; opacity: 0.35; }
	.brand .sun { width: 38px; height: 38px; }
	.brand .word { font-size: 26px; }
	.glyphs { right: -6vw; top: 1vh; font-size: 24px; opacity: 0.14; }
	.game-body.wide { grid-template-columns: 1fr; }
	.term pre { font-size: clamp(8px, 2.6vw, 13px); }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ===================================================================================================================
   VHS skin: the site as an 80s rental tape. Scan lines, a tracking band that rolls through the picture, colour fringes
   on the type, stripes like on the old cassette sleeves, stickers and hard drop shadows. Everything above
   still does the layout; this block only repaints it.
   =================================================================================================================== */
:root {
	/* Black, white and greys - plus exactly one colour. Change --acc and the whole site follows. */
	--acc: #ff2d2d;
	--bg: #000000;
	--ink: #f2f2f2;
	--dim: #9a9a9a;
	--line: #ffffff;
	--accent: var(--acc);
	--hot: var(--acc);
	--glow: 0 0 14px rgba(255, 255, 255, 0.35);
	--fringe: 1px 0 var(--acc), -1px 0 rgba(255, 255, 255, 0.22);
	--stripes: linear-gradient(90deg, #ffffff 0 20%, #b4b4b4 20% 40%, var(--acc) 40% 60%, #787878 60% 80%, #3c3c3c 80% 100%);
	--stripes-down: linear-gradient(180deg, #ffffff 0 20%, #b4b4b4 20% 40%, var(--acc) 40% 60%, #787878 60% 80%, #3c3c3c 80% 100%);
	--vcr: "Arial Black", "Helvetica Neue", Impact, sans-serif;
}

/* the tube: scan lines over everything, and a band of tracking noise rolling down */
body::before { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 3px, rgba(0, 0, 0, 0.11) 3px 4px); }
body::after { content: ""; position: fixed; left: 0; right: 0; top: -14vh; height: 9vh; z-index: 51; pointer-events: none;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0.06) 50%,
		rgba(255, 255, 255, 0.02) 58%, transparent);
	animation: vhs-track 16s linear infinite; }
@keyframes vhs-track { to { transform: translateY(150vh); } }
.sky { background: radial-gradient(ellipse at 72% 0%, #2a2a2a 0%, transparent 62%),
	linear-gradient(to bottom, #000 0%, #000 55%, #161616 100%); }
.stars.near i { box-shadow: 0 0 6px #fff; }
.sky::after { content: ""; position: absolute; inset: 0; opacity: 0.05;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* the recorder's own writing on the screen */
.osd { position: fixed; left: clamp(12px, 3vw, 28px); bottom: 14px; z-index: 40; display: flex; gap: 22px; pointer-events: none;
	font: 700 16px/1 var(--mono); letter-spacing: 0.14em; color: #fff; text-shadow: var(--fringe); }
.osd { opacity: 0.7; }
.osd .play { animation: vhs-blink 2.4s steps(2, jump-none) infinite; }
@keyframes vhs-blink { 50% { opacity: 0.45; } }

/* header: the stripe from the cassette sleeve runs under it */
.top { background: rgba(0, 0, 0, 0.88); border-bottom: 0; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: var(--stripes); }
.brand .sun { fill: var(--acc); filter: drop-shadow(3px 3px 0 #fff); }
.brand .sun .core { fill: #000; }
.brand .word { font: 900 italic 31px/0.9 var(--vcr); text-transform: uppercase; letter-spacing: -0.03em; color: #fff;
	text-shadow: var(--fringe); transform: skewX(-6deg); transform-origin: left bottom; }
.brand .sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; padding-left: 0; font: 700 10px/1 var(--mono);
	letter-spacing: 0.5em; color: #fff; text-shadow: none; }
.brand .sub::before { content: ""; width: 38px; height: 8px; background: var(--stripes); }
nav a { font-weight: 700; color: var(--ink); }
nav a:hover, nav a[aria-current] { color: var(--hot); }
nav a.lang { color: #000; background: #fff; border: 0; border-radius: 0; box-shadow: 3px 3px 0 var(--acc); }

/* type: fringes on the big lines, sleeve lettering for the titles */
h1 { color: #fff; text-shadow: 2px 0 var(--acc), -1px 0 rgba(255, 255, 255, 0.25); }
h2 { font: 900 italic clamp(28px, 4.6vw, 50px)/1 var(--vcr); text-transform: uppercase; letter-spacing: -0.02em;
	text-shadow: var(--fringe); }
.kicker { color: var(--line); font-weight: 700; }
.tag { display: inline-block; padding: 6px 11px 5px; background: #fff; color: #000; font-weight: 700;
	transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--acc); }
.tag.soon { background: var(--acc); color: #fff; box-shadow: 3px 3px 0 #fff; }
.note { color: var(--hot); font-weight: 700; }
.copy p, .legal-body p { color: #d6d6d6; }

/* hero: a magenta wire planet over the sleeve stripes */
.hero::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 7vh; height: clamp(46px, 7vw, 84px);
	background: var(--stripes-down); transform: rotate(-3deg); opacity: 0.92; }
.hero-text { z-index: 1; }
.hero.short { padding-bottom: 22vh; }
.hero.short::after { bottom: 4vh; }
.planet { stroke: #fff; opacity: 0.5; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)); }
.planet .eye { stroke: var(--acc); stroke-width: 1.6; }
.glyphs { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.5); }

/* buttons: chunky, with the recorder's play triangle */
.button { padding: 14px 22px 13px; border: 0; border-radius: 0; background: var(--hot); color: #fff; font-weight: 700;
	box-shadow: 5px 5px 0 var(--line); transition: transform 0.08s, box-shadow 0.08s; }
.button::before { content: "\25BA\00A0\00A0"; }
.button:hover { background: var(--hot); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--line); }
.button.play { background: #fff; color: #000; border: 0; box-shadow: 5px 5px 0 var(--acc); }
.button.play:hover { background: #fff; box-shadow: 3px 3px 0 var(--acc); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.actions .button { margin: 0; }
.store-badge { border-radius: 0; border: 2px solid #fff; box-shadow: 5px 5px 0 #fff; }
.store-badge:hover { border-color: #fff; box-shadow: 3px 3px 0 #fff; }

/* a game is a tape on the shelf: stickers and hard shadows */
.game { position: relative; }
/* link targets (#moondefender, #solardoom, #firefox, #games …) stop below the sticky header */
[id] { scroll-margin-top: 84px; }
.upcoming { border-top: 0; }
.icon { border-radius: 14px; box-shadow: 5px 5px 0 var(--hot); }
.upcoming .icon { box-shadow: 5px 5px 0 #fff; }
.icon.glyph { border: 2px solid #fff; border-radius: 0; box-shadow: 5px 5px 0 var(--hot); }
.phone { border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 10px 10px 0 #fff; }
.upcoming .phone { border-color: rgba(255, 255, 255, 0.5); box-shadow: 10px 10px 0 var(--hot); }
.features li { border-bottom: 1px dashed rgba(255, 255, 255, 0.16); }
.features li::before { content: "\25BA"; left: 0; top: 9px; width: auto; height: auto; border: 0; transform: none; box-shadow: none;
	font: 11px/1.6 var(--mono); color: var(--hot); }
.strip img, .mini-gallery img { border: 2px solid #000; border-radius: 6px; box-shadow: 5px 5px 0 #fff; }
.gallery { padding-bottom: 36px; }
.term { border: 2px solid #fff; border-radius: 0; box-shadow: 10px 10px 0 var(--hot); }
.term:hover { border-color: #fff; }
.term-foot { color: #9a9a9a; border-top-color: #333; }

.contact h2 { margin-bottom: 14px; }
footer { border-top: 0; position: relative; padding-bottom: 54px; }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--stripes); }
footer a:hover { color: var(--hot); }
.rewind { font: 700 13px/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.legal-body h2 { color: #fff; text-shadow: none; }
footer { color: #777; }
mark { background: rgba(255, 255, 255, 0.14); }

/* Pictures and videos play along in black and white; point at one (or tap it) and its colours come back. */
.icon:not(.glyph), .phone video, .strip img, .mini-gallery img { filter: grayscale(1) contrast(1.08); transition: filter 0.25s; }
.icon:not(.glyph):hover, .phone:hover video, .strip img:hover, .mini-gallery img:hover { filter: none; }

@media (max-width: 760px) {
	.brand .word { font-size: 26px; }
	.osd { font-size: 13px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	body::after { display: none; }
	.osd .play { animation: none; }
}