:root {
	/* modo escuro: cores definidas via HSL */
	--white: hsl(0 0% 100%);
	--site-bg: #0f0f0f; /* fundo escuro */
	--panel-bg: hsl(222 12% 12%); /* modal/panel background (opaque) */
	--text: hsl(210 15% 92%); /* texto claro */
	--muted: hsl(210 10% 70%); /* texto secundário */
	/* espaço vertical uniforme entre título, busca e filtros */
	--section-gap: 1.6rem;
}

html, body {
	overflow-x: hidden;
	width: 100%;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background-color: var(--site-bg);
	color: var(--text);
}

/* Site header */
.site-header {
	padding: 1.5rem 1rem 0.5rem;
}

.site-title {
	margin: 0 0 var(--section-gap);
	font-weight: 700;
	font-size: clamp(1.25rem, 3vw, 2.25rem);
	letter-spacing: 0.02em;
	color: var(--text);
	text-align: center;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1rem;
	box-sizing: border-box;
}

/* Search bar under the title */
.search-wrap {
	max-width: 1000px;
	/* center horizontally; vertical spacing comes from .site-title and --section-gap */
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
}

/* Inner container for input + clear button positioning */
.search-inner {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 520px;
	box-sizing: border-box;
}

.search-input {
	width: 100%;
	max-width: 520px; /* largura máxima em desktop */
	padding: 0.65rem 0.85rem;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(255,255,255,0.02);
	color: var(--text);
	box-sizing: border-box;
	font-size: 1rem;
	text-align: left;
}

/* native placeholder styling (static) */
.search-input::placeholder {
	color: rgba(255, 255, 255, 0.151);
	line-height: normal;
}

/* Hide the blinking caret - show when focused */
.search-input {
    caret-color: transparent;
}

.search-input:focus {
    caret-color: var(--text);
}

/* hide native browser clear buttons */
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-input::-ms-clear { display: none; width: 0; height: 0; }

/* custom clear button inside search */
.search-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: rgba(255,255,255,0.56);
	font-size: 1.05rem;
	line-height: 1;
	padding: 6px 8px;
	cursor: pointer;
	border-radius: 6px;
	z-index: 3;
}
.search-clear:hover { color: var(--text); background: rgba(255,255,255,0.02); }
.search-clear:focus { outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,0.03); }

/* Remove default orange focus and provide a subtle, accessible focus ring */
.search-input:focus {
	outline: none;
}

.search-input:focus-visible {
	outline: none;
	border-color: rgba(255,255,255,0.10);
	/* removed luminescent box-shadow to avoid glow on click */
}

.content {
	max-width: 1100px;
	margin: 0 auto;
	padding: 1.25rem;
}

/* Ensure search input remains static (no width animation) */

/* Source filter chips below the search input */
.search-filters {
	max-width: 1000px;
	margin: var(--section-gap) auto 0;
	padding: 0 1rem;
	display: flex;
	gap: 0.6rem;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
	.search-filters .filter-label {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.4rem 0.6rem;
		border-radius: 6px;
		font-weight: 500;
		font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
		/* improve thin font rendering */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-size: 0.95rem;
		/* no box: transparent background and no border */
		color: rgba(255,255,255,0.151);
		background: transparent;
		border: none;
		cursor: pointer;
		transition: color .12s ease, transform .08s ease;
	}
.search-filters .filter-label.active {
	/* active: no border, only brighten text to match site buttons */
	background: var(--site-bg);
	border-color: transparent;
	color: var(--text);
	box-shadow: none;
	transform: none;
	}
.search-filters input[type="checkbox"] {
	width: 14px;
	height: 14px;
	accent-color: #6ab0ff;
}


/* Clear button removed — styles cleaned up */

.games {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
	margin-top: 1rem;
}

.game-card {
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.04);
	padding: 0;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	min-height: 280px;
	box-sizing: border-box;
	overflow: hidden;
}

/* Game cover image styles */
.game-cover-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 460 / 215;
	overflow: hidden;
	background: rgba(255,255,255,0.02);
	flex-shrink: 0;
}

.game-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.game-cover.loaded {
	opacity: 1;
}

/* Shimmer loading animation for cover */
.game-cover-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.03) 50%,
		rgba(255,255,255,0) 100%
	);
	animation: shimmer 1.5s infinite;
	z-index: 1;
}

.game-cover.loaded + .game-cover-wrap::before,
.game-cover-wrap:has(.game-cover.loaded)::before {
	display: none;
}

@keyframes shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* Card content padding */
.game-card > .game-title,
.game-card > .game-size,
.game-card > .download-btn {
	margin-left: 1rem;
	margin-right: 1rem;
}

.game-card > .game-title {
	margin-top: 0.85rem;
}

.game-card > .download-btn {
	margin-bottom: 1rem;
}

/* Entry animation: start slightly lower and transparent, then rise and fade in */
.game-card {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 360ms cubic-bezier(.2,.8,.2,1), transform 360ms cubic-bezier(.2,.8,.2,1);
	will-change: transform, opacity;
}
.game-card.show {
	opacity: 1;
	transform: translateY(0);
}

/* thin white border on hover to highlight card */
.game-card:hover {
    border-color: rgba(255,255,255,0.12);
}

/* Subtle zoom effect on cover hover */
.game-card:hover .game-cover {
	transform: scale(1.03);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.game-title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
	line-height: 1.3;
	/* Truncate long titles */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text);
}

.game-size {
	font-size: 0.95rem;
	color: var(--muted); /* mais escuro que o texto principal */
	margin-bottom: 0.5rem;
}

.game-source {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

.download-btn {
	box-sizing: border-box;
	display: inline-block;
	padding: 0.45rem 0.9rem;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.06);
	background: transparent;
	color: var(--text);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	transition: transform .12s ease, background-color .12s ease;
	width: auto;
	min-width: 140px;
	max-width: 220px;
	text-align: center;
	margin-top: auto; /* força o botão para a base do card */
	align-self: center;
}

.download-btn:hover {
	background-color: rgba(255,255,255,0.03);
}

.download-btn:focus {
	outline: 2px solid rgba(255,255,255,0.08);
	outline-offset: 2px;
}

.pagination {
	display: flex;
	gap: 0.4rem;
	justify-content: center;
	padding: 1rem 0 0.25rem;
	flex-wrap: wrap;
}

.page-button {
	appearance: none;
	border: 1px solid rgba(255,255,255,0.04);
	background: transparent;
	color: var(--text);
	padding: 0.35rem 0.6rem;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}

.page-button.active {
	background: rgba(255,255,255,0.04);
	font-weight: 700;
}

.page-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.white-bg {
	background-color: var(--white);
} 

/* Placeholder (empty) card to keep layout consistent during search */
.game-card.empty {
	background: rgba(255,255,255,0.01);
	border: 1px dashed rgba(255,255,255,0.03);
	opacity: 0.6;
	pointer-events: none;
}

.game-card.empty .game-cover-wrap {
	visibility: hidden;
}

.game-card.empty .game-cover-wrap::before {
	display: none;
}

.game-card.empty .game-title,
.game-card.empty .game-size,
.game-card.empty .game-source {
	visibility: hidden;
}

.game-card.empty .download-btn {
	visibility: hidden; /* preserves button space but hides it */
}

/* Paginação */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	align-items: center;
	margin: 1.25rem 0 0.5rem;
}

.page-button {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.06);
	color: var(--text);
	padding: 0.35rem 0.55rem;
	border-radius: 6px;
	min-width: 34px;
	height: 34px;
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	font-weight: 600;
}

.page-button:hover:not(:disabled) {
	background: rgba(255,255,255,0.03);
	transform: translateY(-2px);
}

.page-button:disabled {
	opacity: 0.45;
	cursor: default;
}

.page-button.active {
	background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
	border-color: rgba(255,255,255,0.12);
}

.pagination .ellipsis {
	color: var(--muted);
	padding: 0 0.35rem;
}

@media (max-width: 640px) {
	.games { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
	.page-button { min-width: 30px; height: 30px; padding: 0.25rem 0.45rem; }
}

/* Responsive adjustments for tablets */
@media (max-width: 600px) {
    .search-inner { max-width: 100%; }
    .search-input { max-width: 100%; }
    .content { padding: 1rem 0.75rem; }
}

/* Additional phone-specific tweaks */
@media (max-width: 420px) {
    .site-title {
        font-size: clamp(1rem, 6vw, 1.4rem);
        padding: 0 0.75rem;
    }
    .site-header {
        padding: 1rem 0.75rem 0.5rem;
    }
    .search-wrap {
        padding: 0 0.75rem;
    }
    .search-inner { display: block; width: 100%; max-width: 100%; }
    .search-input {
        width: 100%;
        max-width: 100%;
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
    }
    .search-clear { right: 6px; }
    .search-filters {
        gap: 0.4rem;
        justify-content: center;
        padding: 0 0.75rem;
    }
    .search-filters .filter-label { padding: 0.35rem 0.5rem; font-size: 0.9rem; }

    .games { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem; }
    .game-card { padding: 0.9rem; min-height: 150px; }

    .download-btn { min-width: 100px; max-width: 160px; padding: 0.4rem 0.6rem; font-size: 0.88rem; }

    .modal-panel { max-width: calc(100% - 24px); min-width: auto; padding: 0.75rem; border-radius: 10px; }

    .toggle-track { width: 40px; height: 22px; }
    .toggle-thumb { width: 16px; height: 16px; }
    body.light-mode .toggle-thumb { transform: translateX(18px); }

	/* Improve touch targets */
	.filter-label, .page-button, .download-btn { touch-action: manipulation; }
}

/* Modal styles */
.modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1200;
}
.modal.show { display: flex; }
.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.55);
}
.modal-panel {
	position: relative;
	/* size to content (shrink to fit the game name), but cap width */
	display: inline-block;
	/* use site background so modal matches page background */
	background: var(--site-bg);
	border: 1px solid rgba(255,255,255,0.04);
	padding: 1rem;
	width: -moz-fit-content;
	width: fit-content;
	max-width: min(520px, calc(100% - 48px));
	min-width: 260px; /* avoid being too narrow */
	border-radius: 12px;
	box-shadow: 0 8px 22px rgba(0,0,0,0.6);
	max-height: 80vh;
	overflow: auto;
	z-index: 2;
}
.modal-close {
	position: absolute;
	top: 10px; /* slightly lower to align visually with title */
	right: 18px; /* moved further right to leave space from the title */
	background: transparent;
	border: none;
	color: rgba(255,255,255,0.56);
	font-size: 1.2rem;
	cursor: pointer;
}
.modal-title {
	margin: 0 0 0.6rem 0;
	font-size: 1.1rem;
	padding-right: 44px; /* reserve space for the close button */
	word-break: break-word; /* allow long titles to wrap */
}
.modal-links {
    display: flex;
    flex-direction: row; /* horizontal layout */
    gap: 0.6rem;
    /* allow wrapping to multiple rows when there are many links */
    flex-wrap: wrap;
    align-items: center;
    overflow: auto;
    padding-top: 0.5rem;
}
.modal-link {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.7rem;
	border-radius: 8px;
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.06);
	color: var(--text);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	width: auto;
}
.modal-link:hover { background: rgba(255,255,255,0.03); }

/* modal card info (mirror card look) */
.modal-card { margin-bottom: 0.6rem; }
.modal-info { padding: 0; background: transparent; border: none; border-radius: 0; margin-bottom: 0.6rem; }
.modal-info .game-title { display: none; }
.modal-info .game-size { margin: 0 0 0.25rem 0; color: var(--muted); font-size: 0.95rem; }
.modal-info .game-source { margin: 0 0 0.6rem 0; color: var(--muted); font-size: 0.85rem; }

/* =====================================================
   THEME TOGGLE (dark/light mode)
   ===================================================== */

/* Smooth transitions for theme change */
:root, body, .site-header, .search-input, .search-clear, .search-filters .filter-label,
.game-card, .download-btn, .page-button, .modal-panel, .modal-backdrop, .toggle-track {
	transition: background-color 280ms ease, color 280ms ease, border-color 220ms ease, box-shadow 280ms ease;
}

/* Toggle positioned at top-right of header */
.theme-toggle {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 100;
}

.toggle-track {
	display: flex;
	align-items: center;
	width: 48px;
	height: 26px;
	background: rgba(255,255,255,0.12);
	border-radius: 999px;
	padding: 3px;
	box-sizing: border-box;
	transition: background 0.3s ease;
}

.toggle-thumb {
	width: 20px;
	height: 20px;
	background: var(--text);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	transition: transform 0.3s cubic-bezier(.4,.9,.3,1.1), background 0.3s ease;
}

/* When light mode is active, slide thumb to the right */
body.light-mode .toggle-thumb {
	transform: translateX(22px);
}

body.light-mode .toggle-track {
	background: rgba(0,0,0,0.15);
}

/* Header needs position:relative for toggle placement */
.site-header {
	position: relative;
}

/* =====================================================
   LIGHT MODE OVERRIDES
   ===================================================== */
body.light-mode {
	--site-bg: hsl(0, 0%, 96%);
	--panel-bg: hsl(0, 0%, 100%);
	--text: hsl(0, 0%, 12%);
	--muted: hsl(0, 0%, 40%);
	background-color: var(--site-bg);
	color: var(--text);
}

body.light-mode .game-card {
	background: rgba(0,0,0,0.02);
	border-color: rgba(0,0,0,0.06);
}

body.light-mode .game-card:hover {
	border-color: rgba(0,0,0,0.15);
}

body.light-mode .search-input {
	background: rgba(0,0,0,0.03);
	border-color: rgba(0,0,0,0.08);
	color: var(--text);
}

body.light-mode .search-input::placeholder {
	color: rgba(0,0,0,0.35);
}

body.light-mode .search-input:focus {
	caret-color: var(--text);
}

body.light-mode .search-clear {
	color: rgba(0,0,0,0.45);
}
body.light-mode .search-clear:hover {
	color: var(--text);
	background: rgba(0,0,0,0.04);
}

body.light-mode .search-filters .filter-label {
	color: rgba(0,0,0,0.26);
}
body.light-mode .search-filters .filter-label.active {
	color: var(--text);
	background: var(--site-bg);
}

body.light-mode .download-btn {
	background: #ffffff;
	border-color: rgba(0,0,0,0.08);
	color: #111111;
}
body.light-mode .download-btn:hover {
	background: #f3f3f3;
	border-color: rgba(0,0,0,0.12);
}

body.light-mode .page-button {
	border-color: rgba(0,0,0,0.06);
	color: var(--text);
}
body.light-mode .page-button:hover:not(:disabled) {
	background: rgba(0,0,0,0.04);
}
body.light-mode .page-button.active {
	background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
	border-color: rgba(0,0,0,0.12);
}

body.light-mode .modal-backdrop {
	background: rgba(0,0,0,0.35);
}
body.light-mode .modal-panel {
	background: var(--panel-bg);
	border-color: rgba(0,0,0,0.08);
}
body.light-mode .modal-close {
	color: rgba(0,0,0,0.5);
}
body.light-mode .modal-link {
	background: rgba(0,0,0,0.03);
	border-color: rgba(0,0,0,0.08);
	color: var(--text);
}
body.light-mode .modal-link:hover {
	background: rgba(0,0,0,0.06);
}