/* Tungsten 3422 — estilos do site. Um arquivo só, escrito à mão. */

@font-face {
	font-family: "IBM Plex Sans";
	src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Chakra Petch";
	src: url("/assets/fonts/chakra-petch-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

:root {
	--bg: #0f1420;      /* azul-marinho da marca */
	--text: #e6eaf0;
	--muted: #8d97a8;
	--line: #2a3548;
	--accent: #ff4519;  /* brasa da marca */
	--sans: "IBM Plex Sans", system-ui, sans-serif;
	/* Rótulos: navbar, labels, placar, rodapé. A Plex Sans cobre o que faltar na Chakra Petch (ex.: ↗). */
	--label: "Chakra Petch", "IBM Plex Sans", sans-serif;
	--wrap: 1200px;
	--gutter: 24px;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 1rem/1.6 var(--sans);
}

img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

.wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}
main { flex: 1; }

/* Navbar */

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 16px;
	padding: 0 28px 0 12px;
	border: 1px solid var(--line);
}
/* O SVG do logo é uma grade de 70×25 com o respiro incluído: só escala inteira (3× aqui). */
.site-logo img { width: 210px; height: 75px; }
.site-header nav { margin-left: auto; }
.site-nav {
	display: flex;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 0.9375rem/1 var(--label);
}
.site-nav a {
	display: block;
	padding: 8px 2px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current] { border-bottom-color: var(--accent); }
.site-header__mark {
	width: 12px;
	height: 12px;
	margin-left: 48px;
	background: var(--accent);
}

/* Títulos: quadrado da marca + nome em minúsculas */

.section-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}
.section-title::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background: var(--accent);
}

/* Cabeçalho simples: quadrado da marca + título */

.page-head {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 32px;
	padding: 48px 0 32px;
	border-bottom: 1px solid var(--line);
}
.page-head::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: var(--accent);
}

/* Topo da página: lâmpada + título à esquerda, imagem à direita, na grade dos painéis */

.hero {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: center;
	gap: 24px;
	margin-bottom: 40px;
	padding: 48px 0 40px;
	border-bottom: 1px solid var(--line);
}
.hero__main {
	display: flex;
	align-items: center;
	gap: 40px;
}
/* O ícone é uma grade de 16×16 com coordenadas em meio pixel: só escala par (8× aqui). */
.hero__icon {
	flex: none;
	width: 128px;
	height: 128px;
}
.page-title {
	margin: 0;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.2;
}
.lead {
	max-width: 60ch;
	margin: 12px 0 0;
	font-size: 1.125rem;
}

/* Imagem com legenda */

.shot { margin: 0; }
.shot img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
}
.shot figcaption {
	margin-top: 10px;
	color: var(--muted);
	font: 400 0.8125rem/1.4 var(--label);
}
.shot a { text-decoration: none; }
.shot a:hover { color: var(--accent); }
.shot a:hover img { border-color: var(--accent); }

/* Painéis */

.panels {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
}
.panel {
	padding: 24px 28px 28px;
	border: 1px solid var(--line);
}
.panel > .section-title { margin-bottom: 24px; }

/* about the name */

.name {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px 32px;
}
.name p {
	flex: 1 1 260px;
	max-width: 56ch;
	margin: 0;
	font-size: 1.125rem; /* mesmo corpo do .lead */
}
.element {
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	flex: none;
	width: 112px;
	height: 128px;
	padding: 8px 10px 10px;
	border: 1px solid var(--text);
}
.element__number { font: 400 0.875rem/1 var(--label); }
.element__symbol {
	place-self: center;
	font-size: 3rem;
	font-weight: 600;
	line-height: 1;
}
.element__name {
	justify-self: center;
	font-size: 0.8125rem;
	line-height: 1.3;
}
.element__weight {
	justify-self: center;
	color: var(--muted);
	font: 400 0.8125rem/1.3 var(--label);
}

/* Lista de links */

.links {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}
.links li { border-bottom: 1px solid var(--line); }
.links a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	text-decoration: none;
}
.links__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
}
.links__icon svg { width: 18px; height: 18px; }
.links__text { display: grid; }
.links__label {
	color: var(--muted);
	font: 400 0.8125rem/1.4 var(--label);
}
.links__value { line-height: 1.4; }
/* Sem JS, o "@" do e-mail vem do CSS (fora do HTML); com JS, email.js põe o texto real. */
.at::before { content: "@"; }
.links__arrow {
	color: var(--accent);
	transition: transform 0.15s;
}
.links a:hover .links__icon { border-color: var(--accent); }
.links a:hover .links__value { color: var(--accent); }
.links a:hover .links__arrow { transform: translateX(3px); }

/* Botões */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	border: 1px solid var(--line);
	background: none;
	color: var(--text);
	font: 400 0.875rem/1 var(--label);
	text-decoration: none;
	cursor: pointer;
}
.button:hover,
.button[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.button--icon { width: 38px; padding: 0; }
.button svg { width: 16px; height: 16px; }

/* Home */

.home-hero {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: center;
	gap: 24px;
	margin-bottom: 40px;
	padding: 48px 0 40px;
	border-bottom: 1px solid var(--line);
}
.home-hero__brand {
	display: grid;
	grid-template-areas: "icon logo" "icon title";
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 40px;
}
/* 12× (escala par): o desenho da lâmpada (14 px de grade = 168 px) cobre da logo ao fim do texto.
   A margem negativa tira a linha vazia de cima e de baixo da grade de 16. */
.home-hero__icon {
	grid-area: icon;
	width: 192px;
	height: 192px;
	margin: -12px 0;
}
/* Logo em 6×; as margens negativas descontam o respiro do SVG (4 px de grade = 24 px). */
.home-hero__logo {
	grid-area: logo;
	max-width: none; /* nunca encolher: só escala inteira */
	width: 420px;
	height: 150px;
	margin: -24px 0 -16px -24px;
}
.home-hero__title {
	grid-area: title;
	max-width: 34ch;
	margin: 0;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.45;
}

.toy {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
}
.toy__field {
	position: relative;
	flex: none;
}
.toy canvas {
	display: block;
	width: 168px;
	height: 216px;
	border: 1px solid var(--line);
	background: #0b0f19;
}
.toy__message {
	position: absolute;
	inset: 1px;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 12px;
	background: rgb(15 20 32 / 0.75);
	font: 400 0.8125rem/1.6 var(--label);
	text-align: center;
	white-space: pre-line;
}
.toy__message[hidden] { display: none; }
.toy__side {
	display: grid;
	gap: 16px;
	min-width: 0;
}
.toy__keys {
	display: grid;
	gap: 6px;
}
.toy__keys span { display: flex; gap: 4px; }
.toy__touch {
	display: none;
	margin: 0;
	font: 400 0.8125rem/1.4 var(--label);
}
.toy__hint {
	margin: 0;
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.4;
}
.toy__score {
	display: flex;
	gap: 20px;
	margin: 0;
}
.toy__score dt {
	color: var(--muted);
	font: 400 0.75rem/1.4 var(--label);
}
.toy__score dd {
	margin: 0;
	font: 400 1.5rem/1.2 var(--label);
}
@media (hover: none) and (pointer: coarse) {
	.toy__keys { display: none; }
	.toy__touch { display: block; }
}

.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.section-head a {
	color: var(--accent);
	font: 400 0.875rem/1 var(--label);
	text-decoration: none;
}
.section-head a:hover { text-decoration: underline; }

.contact-strip {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 24px;
	padding: 20px 28px;
}
.contact-strip .section-title {
	flex: none;
	margin-bottom: 0;
}
.links--row {
	display: flex;
	flex: 1;
	justify-content: flex-end;
	gap: 48px;
	border-top: 0;
}
.links--row li { border-bottom: 0; }
.links--row a { padding: 0; }

/* Lista de jogos */

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--line);
	text-decoration: none;
}
.card a:hover { border-color: var(--accent); }
.card img {
	width: 100%;
	height: auto;
	border-bottom: 1px solid var(--line);
}
.card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 24px 22px;
}
.card__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}
.card__text { margin: 8px 0 20px; }
.card__more {
	margin-top: auto;
	color: var(--accent);
	font: 400 0.875rem/1 var(--label);
}

/* Card largo: imagem em 2/3 e texto em 1/3 (games com um jogo só e o "latest game" da home). */
.card--wide { grid-column: 1 / -1; }
.card--wide a {
	display: grid;
	grid-template-columns: 2fr 1fr;
}
.card--wide img {
	border-right: 1px solid var(--line);
	border-bottom: 0;
}
.card--wide .card__body {
	justify-content: center;
	padding: 32px;
}
.card--wide .card__title { font-size: 1.75rem; }
.card--wide .card__more { margin-top: 8px; }

/* Página do jogo */

.back {
	margin: 32px 0 16px;
	font: 400 0.875rem/1.4 var(--label);
}
.back a { color: var(--accent); text-decoration: none; }
.back a:hover { text-decoration: underline; }

.game { margin-bottom: 24px; }
.game__banner {
	width: 100%;
	height: auto;
	margin-bottom: 24px;
	border: 1px solid var(--line);
}
.game__play { border: 1px solid var(--line); }
.game__stage {
	border-bottom: 1px solid var(--line);
	background: #0a0d14;
}
/* Mantém a proporção do jogo e cabe na altura da tela, com a barra embaixo. */
.player {
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, calc((100vh - 120px) * var(--ratio)));
	width: min(100%, calc((100svh - 120px) * var(--ratio)));
	aspect-ratio: var(--ratio);
	margin: 0 auto;
	background: #0c0f17;
}
.player iframe,
.player__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.player__poster {
	object-fit: cover;
	opacity: 0.45;
}
.player:fullscreen {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	background: #000;
}
.player__start {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	background: var(--accent);
	color: var(--bg);
	font: 600 1.0625rem/1 var(--sans);
	text-decoration: none;
}
.player__start:hover { background: #ff6a44; }
.player__start svg { width: 14px; height: 14px; }

.controls {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 1;
	width: min(320px, calc(100% - 32px));
	padding: 14px 16px 16px;
	border: 1px solid var(--line);
	background: var(--bg);
}
.controls__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.controls__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}
.controls__close {
	padding: 2px 6px;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.controls__close:hover { color: var(--accent); }
.controls dl {
	display: grid;
	gap: 10px;
	margin: 0;
}
.controls dl div {
	display: grid;
	grid-template-columns: 4rem 1fr;
	align-items: center;
	gap: 8px;
}
.controls dt {
	color: var(--muted);
	font: 400 0.8125rem/1.4 var(--label);
}
.controls dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: 0.9375rem;
}
kbd {
	min-width: 1.9em;
	padding: 3px 6px;
	border: 1px solid var(--muted);
	font: 400 0.8125rem/1.2 var(--label);
	text-align: center;
}
.sep {
	padding: 0 2px;
	color: var(--muted);
	font: 400 0.8125rem/1 var(--label);
}

.game__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 12px 12px 20px;
}
.game__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}
.game__actions { display: flex; gap: 8px; }

/* Nada acima usa a grade de 1/3 aqui; com 3/4 + 1/4 as screenshots ficam da altura do about. */
.panels--game { grid-template-columns: 3fr 1fr; }

/* Texto em Markdown (about do jogo) */

.prose p {
	max-width: 64ch;
	margin: 0 0 16px;
}
.prose h3 {
	margin: 28px 0 10px;
	color: var(--muted);
	font: 400 0.8125rem/1.4 var(--label);
}
.prose ul {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.prose li {
	position: relative;
	margin: 6px 0;
	padding-left: 20px;
}
.prose li::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 2px;
	width: 6px;
	height: 6px;
	background: var(--accent);
}
.prose a {
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
}
.prose a:hover { color: var(--accent); }
/* inline-block: o ↗ fica fora do sublinhado. */
.prose a[target="_blank"]::after {
	content: "↗";
	content: "↗" / " (opens in a new tab)";
	display: inline-block;
	margin-left: 0.15em;
}
.prose > :last-child { margin-bottom: 0; }

.shots {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.shots img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
}
.shots a:hover img { border-color: var(--accent); }

/* Visualizador das screenshots (<dialog>) */

html:has(.viewer[open]) { overflow: hidden; }
.viewer {
	width: fit-content;
	max-width: calc(100vw - 32px);
	max-height: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text);
	overflow: visible;
}
.viewer::backdrop { background: rgb(6 9 15 / 0.92); }
.viewer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	color: var(--muted);
	font: 400 0.875rem/1 var(--label);
}
.viewer__close {
	padding: 4px 6px;
	border: 0;
	background: none;
	color: var(--text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.viewer__close:hover { color: var(--accent); }
.viewer__frame { position: relative; }
.viewer__image {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 96px);
	border: 1px solid var(--line);
	background: #0c0f17;
}
.viewer__nav {
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--text);
	font: 400 1.125rem/1 var(--label);
	cursor: pointer;
	transform: translateY(-50%);
}
.viewer__nav:hover { border-color: var(--accent); color: var(--accent); }
.viewer__nav--prev { left: 12px; }
.viewer__nav--next { right: 12px; }

/* 404: centralizada no espaço entre a navbar e o rodapé */

main:has(.notfound) {
	display: grid;
	align-content: center;
}
/* padding-top igual à margem de cima do rodapé: o bloco fica no centro de verdade. */
.notfound {
	display: grid;
	justify-items: center;
	padding-top: 72px;
	text-align: center;
}
/* Mesma regra do topo da studio: ícone só em escala par. */
.notfound__icon {
	width: 128px;
	height: 128px;
	margin-bottom: 28px;
}
.notfound__title {
	margin: 0;
	font-size: 3rem;
	font-weight: 600;
	line-height: 1;
}
.notfound .lead { margin-top: 14px; }
.notfound__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

/* Rodapé */

.site-footer {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 72px;
	padding: 20px 0 28px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font: 400 0.8125rem/1.4 var(--label);
}
.site-footer p { margin: 0; }
.mark {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mark::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--accent);
}

/* Telas menores */

@media (max-width: 1099px) {
	.home-hero { grid-template-columns: 1fr; }
	.toy { justify-self: start; }
	.panels { grid-template-columns: 1fr; }
	.cards { grid-template-columns: repeat(2, 1fr); }
	.shots { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 760px) {
	.hero { grid-template-columns: 1fr; }
	.shot { max-width: 480px; }
}

@media (max-width: 640px) {
	:root { --gutter: 16px; }
	.site-header {
		margin-top: 12px;
		padding: 0 10px 0 0;
	}
	.site-logo img { width: 140px; height: 50px; } /* 2×, o mínimo do logo */
	.site-nav {
		gap: 16px;
		font-size: 0.875rem;
	}
	.site-header__mark { display: none; }
	.hero {
		gap: 28px;
		margin-bottom: 32px;
		padding: 32px 0;
	}
	.hero__main {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.hero__icon { width: 64px; height: 64px; } /* 4× */
	.page-title { font-size: 1.75rem; }
	.lead, .name p { font-size: 1.0625rem; }
	.panel { padding: 20px; }
	.links a { gap: 12px; }
	.links__icon { width: 40px; height: 40px; }
	.home-hero {
		gap: 28px;
		margin-bottom: 32px;
		padding: 32px 0;
	}
	.home-hero__brand {
		grid-template-areas: "icon logo" "title title";
		column-gap: 20px;
		row-gap: 20px;
	}
	.home-hero__icon { width: 64px; height: 64px; margin: 0; } /* 4× */
	.home-hero__logo {
		width: 210px; /* 3× */
		height: 75px;
		margin: -12px 0 -12px -12px;
	}
	.home-hero__title { font-size: 1.1875rem; }
	.toy {
		justify-self: stretch;
		gap: 16px;
	}
	.contact-strip {
		display: block;
		padding: 20px;
	}
	.links--row {
		display: block;
		margin-top: 16px;
		border-top: 1px solid var(--line);
	}
	.links--row li { border-bottom: 1px solid var(--line); }
	.links--row a { padding: 14px 0; }
	.page-head {
		gap: 16px;
		margin-bottom: 24px;
		padding: 32px 0 24px;
	}
	.page-head::before { width: 12px; height: 12px; }
	.cards { grid-template-columns: 1fr; }
	.card--wide a { display: flex; }
	.card--wide img {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.card--wide .card__body { padding: 20px; }
	.card--wide .card__title { font-size: 1.25rem; }
	.notfound { padding-top: 56px; }
	.notfound__icon { width: 64px; height: 64px; margin-bottom: 20px; } /* 4× */
	.notfound__title { font-size: 2.5rem; }
	.back { margin: 20px 0 12px; }
	.game__banner { margin-bottom: 16px; }
	.game__bar { padding: 10px 10px 10px 14px; }
	.game__title { font-size: 1.125rem; }
	.site-footer { margin-top: 56px; }
}

/* O e-mail precisa de ~238 px: sem a seta (a linha toda é o link) ele cabe a partir de 360 px. */
@media (max-width: 400px) {
	.panel { padding: 16px; }
	.links a { grid-template-columns: auto 1fr; }
	.links__arrow { display: none; }
	.links__value { font-size: 0.9375rem; }
}

/* Abaixo de 360 px a navbar desce para uma segunda linha e o toy empilha. */
@media (max-width: 359px) {
	.toy {
		flex-direction: column;
		align-items: stretch;
	}
	.toy__field { align-self: center; }
	.site-header { padding-bottom: 6px; }
}