@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

:root {
	--navbar: #02030ecc;
	--navbar-border: #2f3350;
	--searchbar: #171927;
	--searchbar-placeholder: #adb2e1;
	--highlight: #e2e5ff;
	--popup: #151624;
	--popup-border: #2d2f44;
	--card: #181a26;
	--card-border: #2d2f44;
	--text: #d6daff;
	--text-muted: #acb0d1;
	--hover: #1d1f2d;
	--bg: #08090f;
}

* {
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: var(--hover) transparent;
}

*::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background: var(--hover);
	border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--card-border);
}

html,
body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	font-family: "Montserrat", Arial, sans-serif;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

button {
	font-family: inherit;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.browser {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: var(--bg);
	color: var(--text);
}

.tabstrip {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 6px 6px 0 6px;
	background: var(--bg);
	overflow-x: auto;
	scrollbar-width: none;
	flex-shrink: 0;
}

.tabstrip.tabstrip-hidden {
	display: none;
}

.tabstrip::-webkit-scrollbar {
	display: none;
}

.tab {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	min-width: 140px;
	max-width: 220px;
	padding: 0 10px;
	border-radius: 8px 8px 0 0;
	background: transparent;
	color: var(--text-muted);
	flex-shrink: 0;
	transition: background 0.12s, color 0.12s;
}

.tab:hover {
	background: var(--hover);
	color: var(--text);
}

.tab.active {
	background: var(--searchbar);
	color: var(--highlight);
}

.tab-favicon {
	font-size: 12px;
	color: var(--text-muted);
	flex-shrink: 0;
}

.tab-title {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12.5px;
	font-weight: 500;
	text-align: left;
}

.tab-close {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 10px;
	transition: transform 0.12s, color 0.12s;
}

.tab-close:hover {
	transform: scale(1.2);
	color: var(--highlight);
}

.new-tab-btn {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	flex-shrink: 0;
	font-size: 12px;
	transition: transform 0.12s, color 0.12s;
}

.new-tab-btn:hover {
	transform: scale(1.15);
	color: var(--highlight);
}

.toolbar {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 44px;
	padding: 0 10px;
	background: var(--navbar);
	border-bottom: 1px solid var(--navbar-border);
	flex-shrink: 0;
}

.nav-btn,
.icon-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	flex-shrink: 0;
	font-size: 14px;
	transition: transform 0.12s, color 0.12s;
}

.nav-btn:hover:not(:disabled),
.icon-btn:hover {
	transform: scale(1.15);
	color: var(--highlight);
}

.nav-btn:disabled {
	color: var(--text-muted);
	opacity: 0.35;
	cursor: default;
}

.omnibox {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	margin: 0 6px;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--searchbar);
	border: 2px solid var(--card-border);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.omnibox:focus-within {
	border-color: var(--card-border);
	box-shadow: 0 0 10px var(--card-border), 0 0 20px var(--card-border);
}

.omnibox-icon {
	font-size: 13px;
	color: var(--searchbar-placeholder);
	flex-shrink: 0;
}

#omnibox {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	color: var(--highlight);
	font-family: inherit;
	font-size: 13.5px;
	text-align: center;
}

#omnibox::placeholder {
	color: var(--searchbar-placeholder);
}

.star-btn {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--searchbar-placeholder);
	flex-shrink: 0;
	font-size: 13px;
	transition: transform 0.12s, color 0.12s;
}

.star-btn:hover:not(:disabled) {
	transform: scale(1.2);
	color: var(--highlight);
}

.star-btn:disabled {
	color: var(--searchbar-placeholder);
	opacity: 0.35;
	cursor: default;
}

.icon-btn {
	font-size: 13px;
	font-weight: 700;
}

.bookmarks-bar {
	display: none;
	align-items: center;
	gap: 4px;
	height: 30px;
	padding: 0 10px;
	background: var(--navbar);
	border-bottom: 1px solid var(--navbar-border);
	overflow-x: auto;
	scrollbar-width: none;
	flex-shrink: 0;
}

.bookmarks-bar::-webkit-scrollbar {
	display: none;
}

.bookmarks-bar.visible {
	display: flex;
}

.bookmark-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 8px;
	border-radius: 5px;
	color: var(--text-muted);
	font-size: 12px;
	white-space: nowrap;
	flex-shrink: 0;
}

.bookmark-chip:hover {
	background: var(--hover);
	color: var(--text);
}

.bookmark-chip i:first-child {
	font-size: 10px;
	color: var(--text-muted);
}

.bookmark-chip .bookmark-remove {
	font-size: 10px;
	color: var(--text-muted);
	margin-left: 4px;
}

.bookmark-chip .bookmark-remove:hover {
	color: var(--text);
}

.viewport {
	position: relative;
	z-index: 0;
	flex: 1;
	background: var(--bg);
}

#particles-js {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.tab-view {
	position: absolute;
	inset: 0;
	display: none;
}

.tab-view.active {
	display: block;
}

.tab-view iframe {
	width: 100%;
	height: 100%;
	border: none;
	background: var(--bg);
}

.newtab {
	position: relative;
	z-index: 0;
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.tab-error {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 40px;
	text-align: center;
	color: var(--text-muted);
}

.newtab-logo {
	max-width: 480px;
	width: 80%;
}

.newtab-logo img {
	width: 100%;
	height: auto;
}

.newtab-omnibox {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 80vw;
	max-width: 800px;
	padding: 12px 20px;
	border-radius: 8px;
	background: var(--searchbar);
	border: 2px solid var(--card-border);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.newtab-omnibox:focus-within {
	border-color: var(--card-border);
	box-shadow: 0 0 10px var(--card-border), 0 0 20px var(--card-border);
}

.newtab-omnibox i {
	font-size: 16px;
	color: var(--searchbar-placeholder);
	flex-shrink: 0;
}

.newtab-omnibox input {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	color: var(--highlight);
	font-family: inherit;
	font-size: 18px;
	text-align: center;
}

.newtab-omnibox input::placeholder {
	color: var(--searchbar-placeholder);
	font-size: 16px;
}

.shortcuts-row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
}

.shortcut {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 72px;
}

.shortcut-icon {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--card);
	border: 1px solid var(--card-border);
	color: var(--text);
	font-size: 22px;
	transition: transform 0.12s, background 0.12s;
}

.shortcut:hover .shortcut-icon {
	transform: scale(1.06);
	background: var(--hover);
}

.shortcut-label {
	font-size: 13px;
	color: var(--text-muted);
	font-weight: 500;
}

.shortcut-remove {
	display: none;
	position: absolute;
	top: -4px;
	right: -4px;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hover);
	color: var(--text-muted);
	font-size: 9px;
}

.shortcut:hover .shortcut-remove {
	display: flex;
}

.shortcut-remove:hover {
	background: var(--popup-border);
	color: var(--text);
}

.shortcut-add-wrap {
	position: relative;
}

.shortcut-popover {
	position: absolute;
	top: 78px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 220px;
	padding: 12px;
	border-radius: 10px;
	background: var(--popup);
	border: 1px solid var(--popup-border);
	z-index: 10;
}

.shortcut-popover[hidden] {
	display: none;
}

.shortcut-popover input {
	height: 32px;
	padding: 0 10px;
	border-radius: 6px;
	background: var(--card);
	border: 1px solid var(--card-border);
	color: var(--text);
	font-family: inherit;
	font-size: 12.5px;
	outline: none;
}

.shortcut-popover input::placeholder {
	color: var(--text-muted);
}

.shortcut-popover input:focus {
	border-color: var(--popup-border);
}

.shortcut-popover-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

.shortcut-popover-actions button {
	height: 28px;
	padding: 0 10px;
	border-radius: 6px;
	background: var(--hover);
	color: var(--text);
	font-size: 12px;
	font-weight: 600;
}

.shortcut-popover-actions button:hover {
	background: var(--popup-border);
}

.sc-navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	padding: 0 20px;
	background: var(--bg);
	border-bottom: 1px solid var(--navbar-border);
	flex-shrink: 0;
}

.sc-navbar-logo {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.sc-navbar-logo img {
	height: 22px;
	display: block;
}

.sc-navbar-icons {
	display: flex;
	align-items: center;
	gap: 20px;
}

.sc-navbar-icons a {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.12s, transform 0.12s;
}

.sc-navbar-icons a i {
	font-size: 15px;
}

.sc-navbar-icons a:hover {
	color: var(--highlight);
	transform: scale(1.06);
}

.grid-page {
	position: relative;
	z-index: 0;
	flex: 1;
	overflow-y: auto;
	scrollbar-gutter: stable both-edges;
	width: 100%;
	padding: 48px 24px;
}

.grid-page-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.grid-card {
	width: 160px;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.22s ease;
	user-select: none;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	position: relative;
}

.grid-card:hover {
	transform: scale(1.15);
	z-index: 10;
}

.grid-card-img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.grid-card-info {
	padding: 0.5rem 0.5rem 0.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
}

.grid-card-title {
	font-size: 0.8rem;
	color: var(--text);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	transition: color 0.2s ease;
}

.grid-card:hover .grid-card-title {
	color: var(--highlight);
}

.grid-card-desc {
	font-size: 0.6rem;
	color: var(--text-muted);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	transition: color 0.2s ease;
}

.grid-card:hover .grid-card-desc {
	color: var(--text);
}

.grid-page-status {
	color: var(--text-muted);
	font-size: 0.875rem;
	text-align: center;
	padding: 3rem 0;
	width: 100%;
}

.settings {
	height: 100%;
	overflow-y: auto;
	max-width: 560px;
	margin: 0 auto;
	padding: 48px 24px;
}

.settings-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 18px 0;
	border-bottom: 1px solid var(--popup-border);
}

.settings-group label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}

.settings-group select,
.settings-group input[type="text"] {
	width: 100%;
	height: 36px;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--card);
	border: 1px solid var(--bg);
	color: var(--text);
	font-family: inherit;
	font-size: 13px;
	outline: none;
}

.settings-group select::placeholder,
.settings-group input[type="text"]::placeholder {
	color: var(--text-muted);
}

.settings-group select:focus,
.settings-group input[type="text"]:focus {
	border-color: var(--card-border);
}

.settings-group button {
	height: 34px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--hover);
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
}

.settings-group button:hover {
	background: var(--popup-border);
}

.settings-status {
	font-size: 12px;
	color: var(--text-muted);
}

.frame-area {
	position: relative;
	z-index: 0;
	flex: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 140px;
}

#gameframe {
	display: flex;
	color: white;
	font-family: Montserrat, Arial, sans-serif;
}

#gameframe .gameDisplay {
	margin: auto;
	outline: 0.2vw solid #ffffff26;
	box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.24);
	width: min(72.5vw, calc((100vh - 200px) * 1.8831));
	height: min(38.5vw, calc(100vh - 200px));
	background-color: #ffffff26;
	border-radius: 0.5vw;
	overflow: hidden;
}

#gameframe .game {
	margin: auto;
	width: 100%;
	height: calc(100% - 2.3vw - 1.5vh);
	background-color: #ffffff26;
	background-repeat: no-repeat;
	background-position: center;
}

#gameframe .game iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

#gameframe .options {
	margin: auto;
	width: 100%;
	height: 2.3vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1.5vh;
}

#gameframe .options .left {
	display: flex;
	align-items: center;
}

#gameframe .options .right {
	display: flex;
	margin-top: 2.2vw;
	margin-right: 1.5vw;
	align-items: center;
	justify-content: flex-end;
}

.gameicon {
	margin-left: 0.6vw;
	margin-top: 1.9vw;
	border-radius: 0.5vw;
	background: #19191b;
	width: 2.6vw;
	height: 2.6vw;
	margin-top: 0.2vw;
	transition: 0.4s;
}

.margin {
	margin-top: 0.3vw;
	margin-left: 0.7vw;
}

.flex {
	display: flex;
}

#titletext {
	margin-left: 20px;
	font-size: 1.4vw;
	padding: 0 0.5vw 0.5vw 0 0;
	color: #ffffff;
	width: 45vw;
}

.bytext {
	display: block;
	color: #cfcfcf;
	font-size: 1.1vw;
	margin: 0.2vw 0 0;
	letter-spacing: 0.3px;
	font-size: 0.8vw;
}

.gametext {
	font-size: 1.25vw;
	display: flex;
	margin-top: 2vw;
}

.adtext {
	font-size: 0.5vw;
	text-transform: uppercase;
	text-align: center;
	opacity: 0.7;
	letter-spacing: 0.05vw;
	position: absolute;
	right: 15vw;
	padding-top: 10px;
	margin-top: 32.2vw;
	transform-origin: right center;
}

#gameframe .options .right .game-button {
	float: right;
	margin-right: 1vw;
	height: 70%;
}

.bottom-addisplay {
	width: 90%;
	max-width: 728px;
	height: auto;
	aspect-ratio: 728 / 90;
	background-color: #272727;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	outline: 2px solid #ffffff26;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24);
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 30px;
}

.bottom-addisplay .adtext {
	font-size: min(12px, 2vw);
	text-transform: uppercase;
	text-align: center;
	opacity: 0.7;
	letter-spacing: 0.05em;
	position: absolute;
	bottom: -15px;
	width: 100%;
	color: white;
	font-family: notitle;
}

@media screen and (max-width: 1080px) {
	#gameframe .gameDisplay .game .options {
		height: 500px;
	}
	.bottom-addisplay {
		left: 40%;
		bottom: 1%;
	}
}

@media screen and (max-width: 1366px) {
	#gameframe {
		flex-direction: column;
		margin-right: 0;
		font-size: 2.5vw;
		margin-top: 6.5vw;
	}

	#gameframe .gameDisplay {
		width: 80vw;
		height: auto;
		font-size: 2.5vw;
	}

	#gameframe .game {
		width: 100%;
		height: 60vh;
		font-size: 2.5vw;
	}

	#gameframe .game iframe {
		width: 100%;
		height: 60vh;
		font-size: 2.5vw;
	}

	#gameframe .options {
		height: auto;
		font-size: 2.5vw;
	}
}

@media screen and (max-width: 480px) {
	.bottom-addisplay {
		bottom: 180px;
	}

	.bottom-addisplay .adtext {
		font-size: 10px;
	}
}

#gameframe .options .game-button,
.fullscreenbtn,
.reloadbtn,
.downloadbtn {
	color: white;
	cursor: pointer;
	margin-left: 1.2vw;
	font-size: 1.6vw;
	transition: transform 0.3s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fullscreenbtn:hover {
	transform: scaleX(1.2) scaleY(1.2) rotate(-10deg);
}

.reloadbtn:hover {
	transform: scaleX(1.2) scaleY(1.2) rotate(360deg);
}

.downloadbtn:hover {
	transform: scaleX(1.2) scaleY(1.2);
}

@font-face {
	font-family: notitle;
	src: url(../assets/RedditSans-Medium.ttf);
}

@font-face {
	font-family: title;
	src: url(../assets/ClashDisplayBold.otf);
}