/*!
 * gnb-tool.css — all styling for the nickname generator. Mobile-first.
 *
 * Everything is scoped under .gnb so a host theme cannot leak in and the tool
 * cannot leak out. The per-game accent arrives as inline custom properties on
 * .gnb from the game's config, so a new game restyles itself without touching
 * this file.
 */

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */
.gnb {
	/* The whole scale sits one step above a dark page on purpose: the tool
	   reading as a lighter panel is what marks where it starts and ends, so
	   the border does not have to shout. Every surface keeps its relative
	   contrast, so nothing below needs to know about this.

	   O cinza-azulado do build em inglês virou um verde-quase-preto. É a única
	   mudança de cor que o olho não registra conscientemente e mesmo assim
	   muda tudo: é o chão em que todo o resto se apoia. Um verde saturado no
	   fundo brigaria com o laranja do Free Fire — este é escuro o bastante
	   para não brigar e verde o bastante para não ser cinza. */
	--gnb-bg: #0e1512;
	--gnb-surface: #16201b;
	--gnb-surface-2: #1d2a23;
	--gnb-surface-3: #25342c;
	--gnb-line: rgba(255, 255, 255, 0.07);
	--gnb-line-strong: rgba(255, 255, 255, 0.14);
	/* Branco levemente quente em vez de azulado, pelo mesmo motivo. */
	--gnb-text: #eaf2ec;
	--gnb-text-dim: #93a89b;
	--gnb-text-faint: #66796d;
	--gnb-ok: #4ade80;
	--gnb-warn: #fbbf24;
	--gnb-bad: #fb7185;

	/* Overridden inline per game. Os fallbacks aqui são a dupla verde-amarelo:
	   um jogo que não declarar tema já entra na identidade certa. */
	--gnb-accent: #00d563;
	--gnb-accent-ink: #04140a;
	--gnb-accent-soft: rgba(0, 213, 99, 0.14);
	--gnb-glow: rgba(0, 213, 99, 0.2);
	--gnb-accent-alt: #ffd400;

	/* A faixa é o traço mais forte da pele brasileira: sempre que algo precisa
	   dizer "isto é a marca do site", é este gradiente que aparece — topo do
	   painel, barra de baixo, puxador da gaveta, chave ligada. */
	--gnb-band: linear-gradient(90deg, var(--gnb-accent) 0%, var(--gnb-accent-alt) 100%);

	--gnb-radius: 16px;
	--gnb-radius-sm: 11px;
	--gnb-gap: 12px;
	--gnb-ease: cubic-bezier(0.22, 0.8, 0.3, 1);

	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 18px 14px 0;
	max-width: 1180px;
	/* Neutral boundary. The accent is reserved for whatever is currently
	   selected — when everything is highlighted, nothing is. */
	border: 1px solid var(--gnb-line-strong);
	border-radius: 22px;
	/* Três camadas, nenhuma imagem e nenhuma requisição: um brilho da cor do
	   jogo saindo do topo, uma trama diagonal fininha que dá textura de rua sem
	   virar estampa, e o fundo chapado embaixo de tudo. As duas primeiras são
	   fracas de propósito — quem olha não vê textura, vê que o painel tem
	   profundidade. */
	background:
		radial-gradient(120% 70% at 50% -10%, var(--gnb-glow) 0%, transparent 62%),
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.016) 0 2px,
			transparent 2px 9px
		),
		var(--gnb-bg);
	box-shadow: 0 20px 60px -34px rgba(0, 0, 0, 0.95);
	color: var(--gnb-text);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	/* No overflow clipping here on purpose: a non-visible overflow value on an
	   ancestor stops position:sticky resolving against the viewport, which
	   would break both the sticky input and the sticky bottom bar. The two
	   full-bleed children round their own outer corners instead. */
}

/* A faixa verde-amarela no topo do painel.
   Pseudo-elemento em vez de border-top porque a borda não aceita gradiente, e
   posicionado com inset em vez de overflow:hidden porque cortar o overflow
   aqui quebraria os dois elementos sticky (veja o comentário acima). */
.gnb::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 3px;
	border-radius: 22px 22px 0 0;
	background: var(--gnb-band);
	pointer-events: none;
}

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

.gnb button {
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.gnb svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gnb :focus-visible {
	outline: 2px solid var(--gnb-accent);
	outline-offset: 2px;
	border-radius: 8px;
}

.gnb-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

body.gnb-locked {
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
.gnb-head {
	padding-bottom: 14px;
}

/* Icon is inline with the title, not a block beside it: as a separate column
   it left roughly 130px for the heading, which wrapped it over four lines.

   O título é caixa-alta, pesado e com o espaçamento aberto. Não é decoração:
   o plugin não carrega webfont nenhuma (nem uma requisição a mais), então o
   peso e o tracking são a única forma de conseguir energia de cartaz com a
   fonte do sistema. Caixa-alta também resolve um problema prático — "Gerador
   de nick para Free Fire" em caixa mista some no meio da página. */
.gnb-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--gnb-text);
	font-size: clamp(16px, 4.3vw, 19px);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* O ícone ganhou uma pastilha na cor do jogo. Antes era cinza e sumia; agora é
   a primeira coisa que diz de que jogo é esta página. */
.gnb-mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--gnb-accent-soft);
	color: var(--gnb-accent);
	box-shadow: inset 0 0 0 1px var(--gnb-accent-soft);
}

.gnb-mark svg {
	width: 17px;
	height: 17px;
	stroke-width: 1.9;
}

.gnb-sub {
	margin: 5px 0 0;
	color: var(--gnb-text-dim);
	font-size: 13px;
	line-height: 1.35;
}

/* Um traço curto da dupla verde-amarelo fechando o cabeçalho. É o mesmo
   gradiente da faixa do topo, repetido pequeno — repetição é o que faz um
   detalhe virar identidade em vez de enfeite solto. */
.gnb-head::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 12px;
	border-radius: 3px;
	background: var(--gnb-band);
}

/* ------------------------------------------------------------------ *
 * Layout
 * ------------------------------------------------------------------ */
.gnb-layout {
	display: block;
}

.gnb-main {
	min-width: 0;
}

.gnb-rail {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Input field
 * ------------------------------------------------------------------ */
/* The input owns its whole row. Counter and clear live inside it, so the
   primary control is also the largest thing on screen. */
.gnb-field {
	position: sticky;
	top: 0;
	z-index: 6;
	margin: 0 -14px;
	padding: 10px 14px;
	background: linear-gradient(var(--gnb-bg) 72%, transparent);
}

.gnb-field__box {
	position: relative;
	width: 100%;
}

.gnb-input {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 92px 0 16px;
	border: 1px solid var(--gnb-line-strong);
	border-radius: 14px;
	background: var(--gnb-surface);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
	color: var(--gnb-text);
	/* 16px minimum: anything smaller makes iOS zoom on focus. */
	font-size: 17px;
	font-weight: 550;
	letter-spacing: 0.01em;
	transition: border-color 0.18s var(--gnb-ease), box-shadow 0.18s var(--gnb-ease);
	-webkit-appearance: none;
	appearance: none;
}

.gnb-input::placeholder {
	color: var(--gnb-text-faint);
	font-weight: 450;
}

.gnb-input:focus {
	border-color: var(--gnb-accent);
	box-shadow: 0 0 0 4px var(--gnb-accent-soft);
	outline: none;
}

.gnb-field__inline {
	position: absolute;
	top: 50%;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 3px;
	transform: translateY(-50%);
}

.gnb-inputcount {
	color: var(--gnb-text-faint);
	font-size: 12px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	pointer-events: none;
	transition: color 0.15s linear;
}

.gnb-inputcount.is-at {
	color: var(--gnb-warn);
}

.gnb-inputcount.is-over {
	color: var(--gnb-bad);
}

.gnb-clear {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	color: var(--gnb-text-dim);
	transition: background-color 0.15s linear, color 0.15s linear;
}

.gnb-clear:hover {
	background: var(--gnb-surface-3);
	color: var(--gnb-text);
}

.gnb-clear svg {
	width: 16px;
	height: 16px;
}

/* Labelled chips instead of bare icons: there is no hover on touch, so an
   unlabelled dice or sliders glyph is unguessable. */
.gnb-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 0 0 12px;
}

.gnb-quick__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--gnb-line-strong);
	border-radius: 999px;
	background: var(--gnb-surface);
	color: var(--gnb-text);
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.15s linear, border-color 0.15s linear;
}

.gnb-quick__btn svg {
	width: 16px;
	height: 16px;
	color: var(--gnb-text-dim);
}

.gnb-quick__btn:hover {
	background: var(--gnb-surface-2);
}

.gnb-quick__btn:active {
	transform: scale(0.97);
}

.gnb-iconbtn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	color: var(--gnb-text-dim);
	transition: background-color 0.15s linear, color 0.15s linear;
}

.gnb-iconbtn:hover {
	background: var(--gnb-surface-2);
	color: var(--gnb-text);
}

.gnb-iconbtn:active {
	transform: scale(0.94);
}

/* ------------------------------------------------------------------ *
 * Active frame chip
 * ------------------------------------------------------------------ */
.gnb-active {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 0 10px;
}

.gnb-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 11px;
	border: 1px solid var(--gnb-line-strong);
	border-radius: 999px;
	background: var(--gnb-surface-2);
	font-size: 12.5px;
	font-weight: 600;
}

.gnb-chip__label {
	color: var(--gnb-text-faint);
}

.gnb-chip__value {
	color: var(--gnb-accent);
	font-size: 14px;
}

.gnb-chip--reset {
	color: var(--gnb-text-dim);
	font-weight: 550;
}

.gnb-chip--reset:hover {
	border-color: var(--gnb-bad);
	color: var(--gnb-bad);
}

/* ------------------------------------------------------------------ *
 * Results
 * ------------------------------------------------------------------ */
.gnb-results {
	display: grid;
	gap: 10px;
	padding-bottom: 4px;
}

.gnb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
	padding: 13px 14px 10px;
	border: 1px solid var(--gnb-line);
	border-radius: var(--gnb-radius);
	background: var(--gnb-surface);
	text-align: left;
	cursor: pointer;
	transition: transform 0.16s var(--gnb-ease), border-color 0.16s linear, background-color 0.16s linear;
}

.gnb-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--gnb-accent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--gnb-ease);
}

.gnb-card.is-copied::after {
	opacity: 0.16;
	transition: opacity 0.06s linear;
}

.gnb-card:hover {
	border-color: var(--gnb-line-strong);
	background: var(--gnb-surface-2);
}

.gnb-card:active {
	transform: scale(0.988);
}

.gnb-card__head {
	display: flex;
	align-items: center;
	gap: 6px;
}

.gnb-card__style {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gnb-text-faint);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* The styled nickname is the hero of the card — everything else stays quiet. */
.gnb-card__text {
	display: block;
	min-height: 1.35em;
	color: #fff;
	font-size: clamp(18px, 5vw, 23px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.gnb-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.gnb-card__actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 2px;
}

.gnb-card__act {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	color: var(--gnb-text-faint);
	transition: background-color 0.14s linear, color 0.14s linear;
}

.gnb-card__act:hover {
	background: var(--gnb-surface-3);
	color: var(--gnb-text);
}

.gnb-card__act svg {
	width: 17px;
	height: 17px;
}

/* The card being previewed is a selected thing, so it gets the accent. */
.gnb-card.is-previewing {
	border-color: var(--gnb-accent);
}

.gnb-card.is-previewing .gnb-card__act--eye {
	color: var(--gnb-accent);
}

.gnb-card__caveat {
	display: grid;
	place-items: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--gnb-warn);
	color: #201400;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

.gnb-badge {
	flex: 0 0 auto;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(74, 222, 128, 0.11);
	color: var(--gnb-ok);
	font-size: 11.5px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.gnb-badge.is-bad {
	background: rgba(251, 113, 133, 0.12);
	color: var(--gnb-bad);
}

.gnb-card.is-over {
	border-color: rgba(251, 113, 133, 0.22);
	background: rgba(251, 113, 133, 0.035);
}

.gnb-card.is-over .gnb-card__text {
	color: #f3d9dd;
}

/* Divider between results that fit and results that do not. */
.gnb-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0 4px;
	color: var(--gnb-text-faint);
}

.gnb-divider::before,
.gnb-divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gnb-line-strong), transparent);
}

.gnb-divider__label {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.gnb-more {
	display: block;
	width: 100%;
	margin: 14px 0 4px;
	padding: 14px;
	border: 1px solid var(--gnb-line-strong);
	border-radius: 13px;
	background: var(--gnb-surface);
	color: var(--gnb-text);
	font-size: 14px;
	font-weight: 620;
	transition: background-color 0.15s linear, border-color 0.15s linear;
}

.gnb-more:hover {
	border-color: var(--gnb-accent);
	background: var(--gnb-surface-2);
	color: var(--gnb-accent);
}

/* Trailing card in the results grid. Neutral by default — it is an offer,
   not the selected state. */
.gnb-cta {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 72px;
	padding: 16px;
	border: 1px dashed var(--gnb-line-strong);
	border-radius: var(--gnb-radius);
	background: transparent;
	color: var(--gnb-text-dim);
	font-size: 13px;
	font-weight: 620;
	line-height: 1.4;
	text-align: center;
	transition: border-color 0.15s linear, color 0.15s linear, background-color 0.15s linear;
}

.gnb-cta:hover {
	border-color: var(--gnb-accent);
	background: var(--gnb-accent-soft);
	color: var(--gnb-text);
}

/* Empty state is a worked example. Muted on purpose and with no copy
   control — a demo card that looks like a result gets tapped. */
.gnb-demo {
	padding: 18px 16px 16px;
	border: 1px dashed var(--gnb-line-strong);
	border-radius: var(--gnb-radius);
}

.gnb-demo__title {
	margin: 0 0 12px;
	color: var(--gnb-text-faint);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gnb-demo__list {
	display: grid;
	gap: 8px;
}

.gnb-demo__card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 11px 13px;
	border: 1px solid var(--gnb-line);
	border-radius: var(--gnb-radius-sm);
	opacity: 0.72;
}

.gnb-demo__label {
	color: var(--gnb-text-faint);
	font-size: 10.5px;
	font-weight: 650;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.gnb-demo__text {
	color: var(--gnb-text-dim);
	font-size: 18px;
	font-weight: 600;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ *
 * Bottom bar (mobile)
 * ------------------------------------------------------------------ */
.gnb-bar {
	position: sticky;
	bottom: 0;
	z-index: 7;
	display: flex;
	gap: 8px;
	margin: 14px -14px 0;
	padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
	border-radius: 0 0 21px 21px;
	background: rgba(14, 21, 18, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* A mesma faixa do topo do painel, agora fechando embaixo. O border-top de 1px
   que estava aqui virou este pseudo-elemento porque borda não aceita gradiente.
   Fica mais apagada que a de cima de propósito: o topo apresenta a marca, este
   só fecha a moldura. */
.gnb-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--gnb-band);
	opacity: 0.5;
	pointer-events: none;
}

.gnb-bar__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* min-width: 0 is the load-bearing half: without it a long label sets the
	   button's floor width and pushes the bar past the container edge. */
	flex: 1 1 0;
	min-width: 0;
	gap: 4px;
	padding: 8px 4px;
	border-radius: 12px;
	color: var(--gnb-text-dim);
	font-size: 11.5px;
	font-weight: 600;
	transition: background-color 0.15s linear, color 0.15s linear;
}

.gnb-bar__btn:hover,
.gnb-bar__btn:active {
	background: var(--gnb-surface-2);
	color: var(--gnb-accent);
}

.gnb-bar__btn span {
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Bottom sheet
 * ------------------------------------------------------------------ */
.gnb-sheet[hidden] {
	/* Belt-and-braces: some themes/page-builders ship CSS that overrides the
	   browser's default [hidden] behaviour. Without this, an overridden sheet
	   silently covers the whole viewport and blocks every click, tap and
	   keystroke on the page, including the input field. */
	display: none !important;
}

.gnb-sheet {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: flex-end;
}

.gnb-sheet__scrim {
	position: absolute;
	inset: 0;
	background: rgba(4, 6, 9, 0.62);
	opacity: 0;
	transition: opacity 0.24s var(--gnb-ease);
}

.gnb-sheet.is-open .gnb-sheet__scrim {
	opacity: 1;
}

.gnb-sheet__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 82vh;
	max-height: 82dvh;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	border: 1px solid var(--gnb-line-strong);
	border-bottom: 0;
	border-radius: 22px 22px 0 0;
	background: var(--gnb-surface);
	box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
	transform: translateY(100%);
	transition: transform 0.26s var(--gnb-ease);
}

.gnb-sheet.is-open .gnb-sheet__panel {
	transform: translateY(0);
}

/* O puxador é a primeira coisa que aparece quando a gaveta sobe, então leva a
   faixa também — é o detalhe que faz a gaveta parecer parte da ferramenta e
   não uma folha branca genérica do celular. */
.gnb-sheet__grab {
	width: 38px;
	height: 4px;
	margin: 9px auto 2px;
	border-radius: 999px;
	background: var(--gnb-band);
	opacity: 0.85;
}

.gnb-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px 10px 18px;
	border-bottom: 1px solid var(--gnb-line);
}

.gnb-sheet__title {
	margin: 0;
	font-size: 15px;
	font-weight: 650;
}

.gnb-sheet__body {
	flex: 1 1 auto;
	padding: 14px 16px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.gnb-panelstore {
	display: none;
}

/* Tools ride inside the Frame sheet, so a second panel needs a visible seam. */
.gnb-sheet__body .gnb-panel + .gnb-panel {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--gnb-line);
}

/* ------------------------------------------------------------------ *
 * Panels (shared between rail and sheet)
 * ------------------------------------------------------------------ */
.gnb-panel__title {
	margin: 0 0 10px;
	color: var(--gnb-text);
	font-size: 13px;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Frames — multi-select. Only "None" is checked on load. */
.gnb-frames__bar {
	display: flex;
	margin-bottom: 11px;
}

.gnb-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--gnb-line);
	border-radius: var(--gnb-radius-sm);
	background: var(--gnb-surface-2);
	color: var(--gnb-text);
	font-size: 13px;
	font-weight: 620;
	text-align: left;
}

.gnb-switch__track {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 23px;
	border-radius: 999px;
	background: var(--gnb-surface-3);
	box-shadow: inset 0 0 0 1px var(--gnb-line-strong);
	transition: background-color 0.18s var(--gnb-ease), box-shadow 0.18s linear;
}

.gnb-switch__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--gnb-text-dim);
	transition: transform 0.18s var(--gnb-ease), background-color 0.18s linear;
}

/* On is a selected state, so this is one of the few places accent belongs.
   Aqui vai a faixa inteira e não só a cor do jogo: ligar todas as molduras é a
   ação de maior impacto da ferramenta, e merece o gradiente da marca. */
.gnb-switch[aria-checked="true"] .gnb-switch__track {
	background: var(--gnb-band);
	box-shadow: none;
}

.gnb-switch[aria-checked="true"] .gnb-switch__knob {
	background: var(--gnb-accent-ink);
	transform: translateX(17px);
}

.gnb-frames__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.gnb-frame {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 64px;
	padding: 10px 6px 8px;
	border: 1px solid var(--gnb-line);
	border-radius: var(--gnb-radius-sm);
	background: var(--gnb-surface-2);
	transition: border-color 0.15s linear, background-color 0.15s linear, transform 0.15s var(--gnb-ease);
}

.gnb-frame:active {
	transform: scale(0.96);
}

.gnb-frame__sample {
	color: var(--gnb-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	word-break: break-all;
}

.gnb-frame__cost {
	color: var(--gnb-text-faint);
	font-size: 10.5px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.gnb-frame[aria-checked="true"] {
	border-color: var(--gnb-accent);
	background: var(--gnb-accent-soft);
}

.gnb-frame[aria-checked="true"] .gnb-frame__sample {
	color: var(--gnb-accent);
}

/* Checked marker — the swatch itself is the control, so this is decoration. */
.gnb-frame[aria-checked="true"]::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gnb-accent);
}

/* Symbols panel keeps its own readout because the sheet covers the results. */
.gnb-symbols__live {
	overflow: hidden;
	margin: 0 0 14px;
	padding: 12px 13px;
	border: 1px solid var(--gnb-line);
	border-radius: var(--gnb-radius-sm);
	background: var(--gnb-surface-3);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gnb-symbols__live.is-empty {
	color: var(--gnb-text-faint);
	font-weight: 450;
}

.gnb-budget {
	margin: 12px 0 0;
	padding: 9px 11px;
	border-radius: 10px;
	background: var(--gnb-surface-3);
	color: var(--gnb-text-dim);
	font-size: 12.5px;
	line-height: 1.4;
}

.gnb-budget.is-tight {
	background: rgba(251, 113, 133, 0.1);
	color: var(--gnb-bad);
}

/* Symbols */
.gnb-symgroup + .gnb-symgroup {
	margin-top: 16px;
}

.gnb-symgroup__title {
	margin: 0 0 8px;
	color: var(--gnb-text-faint);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gnb-symgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
	gap: 6px;
}

.gnb-sym {
	display: grid;
	place-items: center;
	min-height: 46px;
	border: 1px solid var(--gnb-line);
	border-radius: 11px;
	background: var(--gnb-surface-2);
	font-size: 19px;
	line-height: 1;
	transition: border-color 0.14s linear, background-color 0.14s linear, transform 0.14s var(--gnb-ease);
}

.gnb-sym:hover {
	border-color: var(--gnb-accent);
	background: var(--gnb-accent-soft);
	color: var(--gnb-accent);
}

.gnb-sym:active {
	transform: scale(0.92);
}

/* Tools */
.gnb-toolsec + .gnb-toolsec {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--gnb-line);
}

.gnb-toolsec__title {
	margin: 0 0 9px;
	color: var(--gnb-text-faint);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gnb-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.gnb-pill {
	padding: 9px 13px;
	border: 1px solid var(--gnb-line-strong);
	border-radius: 999px;
	background: var(--gnb-surface-2);
	color: var(--gnb-text);
	font-size: 13px;
	font-weight: 600;
	transition: border-color 0.14s linear, background-color 0.14s linear, color 0.14s linear;
}

.gnb-pill:hover {
	border-color: var(--gnb-accent);
	background: var(--gnb-accent-soft);
	color: var(--gnb-accent);
}

.gnb-note {
	margin: 9px 0 0;
	color: var(--gnb-text-faint);
	font-size: 12px;
	line-height: 1.45;
}

/* Recent copies */
.gnb-recent__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--gnb-line);
	border-radius: var(--gnb-radius-sm);
	background: var(--gnb-surface-2);
	text-align: left;
	transition: border-color 0.14s linear;
}

.gnb-recent__item + .gnb-recent__item {
	margin-top: 6px;
}

.gnb-recent__item:hover {
	border-color: var(--gnb-accent);
}

.gnb-recent__text {
	overflow: hidden;
	color: var(--gnb-text);
	font-size: 16px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gnb-recent__count {
	flex: 0 0 auto;
	color: var(--gnb-text-faint);
	font-size: 11.5px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Preview stage — primitives that games/{key}/preview.js composes.
 * A new game reuses these; it never needs new CSS here.
 * ------------------------------------------------------------------ */
.gnb-tabs {
	display: flex;
	gap: 5px;
	margin-bottom: 12px;
	padding: 4px;
	border-radius: 12px;
	background: var(--gnb-surface-3);
}

.gnb-tab {
	flex: 1 1 0;
	padding: 8px 6px;
	border-radius: 9px;
	color: var(--gnb-text-dim);
	font-size: 12.5px;
	font-weight: 620;
	transition: background-color 0.15s linear, color 0.15s linear;
}

.gnb-tab[aria-selected="true"] {
	background: var(--gnb-accent);
	color: var(--gnb-accent-ink);
}

.gnb-stage {
	padding: 16px;
	border: 1px solid var(--gnb-line);
	border-radius: var(--gnb-radius);
	background:
		radial-gradient(90% 70% at 50% 0%, var(--gnb-accent-soft), transparent 70%),
		#0a1210;
}

.gnb-pv-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--gnb-line-strong);
	border-radius: 13px;
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
}

.gnb-pv-avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid var(--gnb-line-strong);
	border-radius: 12px;
	background: var(--gnb-accent-soft);
	color: var(--gnb-accent);
	font-size: 17px;
	font-weight: 700;
}

.gnb-pv-body {
	min-width: 0;
	flex: 1 1 auto;
}

.gnb-pv-name {
	overflow: hidden;
	color: #fff;
	font-size: 16px;
	font-weight: 650;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gnb-pv-meta {
	margin-top: 3px;
	color: var(--gnb-text-faint);
	font-size: 11.5px;
	font-weight: 550;
	letter-spacing: 0.02em;
}

.gnb-pv-tag {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--gnb-accent);
	color: var(--gnb-accent-ink);
	font-size: 10px;
	font-weight: 750;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 2px;
}

.gnb-pv-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.035);
	font-size: 13.5px;
}

.gnb-pv-row + .gnb-pv-row {
	margin-top: 5px;
}

.gnb-pv-row.is-you {
	background: var(--gnb-accent-soft);
	box-shadow: inset 2px 0 0 var(--gnb-accent);
}

.gnb-pv-rank {
	flex: 0 0 22px;
	color: var(--gnb-text-faint);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.gnb-pv-cell {
	overflow: hidden;
	flex: 1 1 auto;
	color: var(--gnb-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gnb-pv-num {
	flex: 0 0 auto;
	color: var(--gnb-text-dim);
	font-size: 12px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.gnb-pv-bar {
	height: 4px;
	margin-top: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.gnb-pv-bar > i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--gnb-accent);
}

.gnb-pv-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	color: var(--gnb-text-faint);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Toast
 * ------------------------------------------------------------------ */
.gnb-toast {
	position: fixed;
	bottom: 26px;
	left: 50%;
	z-index: 1000;
	padding: 11px 18px;
	border: 1px solid var(--gnb-line-strong);
	border-radius: 999px;
	background: #1a251f;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
	color: var(--gnb-text);
	font-size: 13.5px;
	font-weight: 620;
	opacity: 0;
	transform: translate(-50%, 14px) scale(0.96);
	pointer-events: none;
	transition: opacity 0.2s var(--gnb-ease), transform 0.2s var(--gnb-ease);
}

.gnb-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}

/* ------------------------------------------------------------------ *
 * Desktop — 768px and up
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
	.gnb {
		padding: 24px 24px 24px;
	}

	.gnb-head {
		gap: 14px;
		padding-bottom: 18px;
	}

	.gnb-mark {
		width: 44px;
		height: 44px;
	}

	.gnb-title {
		font-size: 20px;
	}

	.gnb-sub {
		font-size: 13.5px;
	}

	.gnb-layout {
		display: grid;
		grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
		gap: 22px;
		align-items: start;
	}

	/* Controls expanded inline on the left, results on the right. */
	.gnb-main {
		order: 2;
	}

	/* No nested scroller: a second scrollbar here means the page will not
	   scroll while the cursor is over this column. It grows in page flow
	   instead, even if that makes it taller than the results. */
	.gnb-rail {
		display: block;
		order: 1;
		min-width: 0;
	}

	.gnb-panel {
		padding: 16px;
		border: 1px solid var(--gnb-line);
		border-radius: var(--gnb-radius);
		background: var(--gnb-surface);
	}

	.gnb-panel + .gnb-panel {
		margin-top: 12px;
	}

	.gnb-panel.is-flash {
		border-color: var(--gnb-accent);
		box-shadow: 0 0 0 3px var(--gnb-accent-soft);
	}

	.gnb-field {
		margin: 0;
		padding: 0 0 14px;
		background: var(--gnb-bg);
	}

	.gnb-results {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		align-content: start;
		gap: 12px;
	}

	.gnb-divider {
		grid-column: 1 / -1;
	}

	.gnb-demo {
		grid-column: 1 / -1;
	}

	.gnb-demo__list {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}

	.gnb-card__text {
		font-size: clamp(17px, 1.3vw, 20px);
	}

	.gnb-bar {
		display: none;
	}

	.gnb-frames__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gnb-toast {
		bottom: 32px;
		left: auto;
		right: 32px;
		transform: translate(0, 14px) scale(0.96);
	}

	.gnb-toast.is-on {
		transform: translate(0, 0) scale(1);
	}
}

@media (min-width: 1100px) {
	.gnb-layout {
		grid-template-columns: 340px minmax(0, 1fr);
		gap: 26px;
	}

	.gnb-results {
		grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	}
}

/* ------------------------------------------------------------------ *
 * Reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.gnb *,
	.gnb *::before,
	.gnb *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.gnb-card:active,
	.gnb-iconbtn:active,
	.gnb-frame:active,
	.gnb-sym:active {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Theme conflict guard
 *
 * WordPress themes routinely style bare `input`, `h2`, `p` with selectors
 * like `.entry-content input[type="text"]` that out-rank our single-class
 * rules. These doubled-class + element selectors (plus !important on the
 * input, the most aggressively themed element) keep the tool intact no
 * matter what the host theme ships. Symptoms this prevents: white shrunken
 * input, placeholder/counter overlapping, giant title wrapping one word
 * per line.
 * ------------------------------------------------------------------ */
.gnb.gnb .gnb-field__box {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: none;
}

.gnb.gnb input.gnb-input {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 52px !important;
	margin: 0 !important;
	padding: 0 92px 0 16px !important;
	border: 1px solid var(--gnb-line-strong) !important;
	border-radius: 14px !important;
	background: var(--gnb-surface) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
	color: var(--gnb-text) !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 550 !important;
	line-height: normal !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.gnb.gnb input.gnb-input:focus {
	border-color: var(--gnb-accent) !important;
	background: var(--gnb-surface) !important;
	color: var(--gnb-text) !important;
	box-shadow: 0 0 0 4px var(--gnb-accent-soft) !important;
	outline: none !important;
}

.gnb.gnb input.gnb-input::placeholder {
	color: var(--gnb-text-faint) !important;
	opacity: 1 !important;
}

/* Estes valores TÊM que acompanhar .gnb-title e .gnb-sub lá em cima. É esta
   regra que ganha no site de verdade — mexer só na de cima e esquecer desta
   faz a mudança simplesmente não aparecer, e o CSS local não denuncia nada. */
.gnb.gnb h2.gnb-title {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--gnb-text) !important;
	font-family: inherit !important;
	font-size: clamp(16px, 4.3vw, 19px) !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
}

.gnb.gnb p.gnb-sub {
	margin: 5px 0 0 !important;
	padding: 0 !important;
	color: var(--gnb-text-dim) !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
}

/* ------------------------------------------------------------------ *
 * Forced colours / high contrast
 * ------------------------------------------------------------------ */
@media (forced-colors: active) {
	.gnb-card,
	.gnb-frame,
	.gnb-sym,
	.gnb-pill,
	.gnb-more {
		border: 1px solid ButtonBorder;
	}

	.gnb-frame[aria-checked="true"] {
		border: 2px solid Highlight;
	}
}