/* ---------- RESET & BASE ---------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background:
		radial-gradient(circle at 16% 18%, rgba(74, 144, 218, 0.2), transparent 34%),
		radial-gradient(circle at 84% 12%, rgba(255, 190, 92, 0.14), transparent 30%),
		linear-gradient(145deg, #0b1628, #132742);
	transition: background 2.2s ease;
	min-height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: "Poppins", sans-serif;
}

/* ---------- LAYOUT ---------- */
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 90px 20px 24px 20px;
	width: 100%;
	max-width: 100vw;
	overflow: hidden;
}

.generator-stage {
	display: grid;
	grid-template-columns: minmax(360px, 420px) minmax(340px, 420px) minmax(360px, 420px);
	column-gap: 28px;
	row-gap: 18px;
	align-items: start;
	justify-content: center;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 10px 12px 0;
}

.generator-left,
.generator-center,
.generator-right {
	min-width: 0;
}

.generator-left {
	display: flex;
	justify-content: flex-start;
	align-self: start;
	margin-top: 0;
}

.generator-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding-top: 6px;
}

.generator-right {
	position: relative;
	padding-top: 6px;
	justify-self: end;
	align-self: start;
}

/* ---------- TOP NAVBAR ---------- */
:root {
	--nav-bg:
		radial-gradient(circle at 16% 18%, rgba(74, 144, 218, 0.16), transparent 34%),
		radial-gradient(circle at 84% 12%, rgba(255, 190, 92, 0.11), transparent 30%),
		linear-gradient(145deg, rgba(8, 18, 33, 0.92), rgba(16, 33, 59, 0.9));
	--nav-fg: #eaf1ff;
	--nav-border: rgba(255, 255, 255, 0.22);
	--nav-hover: rgba(255, 255, 255, 0.14);
	--profile-dropdown-bg: linear-gradient(160deg, rgba(11, 26, 46, 0.96), rgba(16, 39, 65, 0.94));
	--profile-dropdown-border: rgba(255, 255, 255, 0.18);
	--profile-dropdown-hover: rgba(255, 255, 255, 0.14);
}

#top-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 70px;
	background: var(--nav-bg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: none;
	border-bottom: 1px solid var(--nav-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30px;
	z-index: 999;
}

.navbar-brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.brand-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--nav-fg);
	margin: 0;
	line-height: 1.2;
}

.brand-subtitle {
	font-size: 0.85rem;
	color: rgba(234, 241, 255, 0.78);
	margin: 0;
	font-weight: 400;
}

.navbar-toggle {
	display: block;
	background: rgba(8, 18, 33, 0.38);
	border: none;
	box-shadow: none;
	font-size: 1.5rem;
	color: var(--nav-fg);
	cursor: pointer;
	padding: 8px;
	border-radius: 8px;
	transition: all 0.3s ease;
	margin-left: auto;
}

.navbar-toggle:hover {
	background: var(--nav-hover);
}

.navbar-toggle i {
	display: block;
	transition: transform 0.3s ease;
}

.navbar-toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.navbar-links {
	display: flex;
	gap: 20px;
	align-items: center;
	position: static;
	background: transparent;
	flex-direction: row;
}

.navbar-links.collapsed {
	position: absolute;
	top: 50%;
	right: 72px;
	left: auto;
	width: max-content;
	max-width: calc(100vw - 140px);
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	border: none;
	display: none;
	flex-direction: row;
	gap: 8px;
	padding: 0;
	border-radius: 0;
	overflow: visible;
	transform: translateY(-50%);
	white-space: nowrap;
	z-index: 998;
}

.navbar-links.collapsed.open {
	display: flex;
}

.navbar-links.collapsed .nav-link {
	border-radius: 8px;
	padding: 10px 12px;
	justify-content: center;
	white-space: nowrap;
	border-bottom: none;
	background: transparent;
}

.navbar-links.collapsed .nav-link:last-child {
	border-bottom: none;
}

.navbar-links.collapsed .nav-link:hover {
	background: transparent;
}

.nav-link {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--nav-fg);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 8px 16px;
	border-radius: 8px;
	transition: all 0.3s ease;
	border: none;
	box-shadow: none;
	background: none;
	cursor: pointer;
}

.nav-link:hover {
	background: var(--nav-hover);
	color: #1f2a37;
}

.nav-link i {
	font-size: 1rem;
}

.nav-profile-menu {
	position: relative;
	display: flex;
	align-items: center;
}

.nav-profile-trigger {
	min-width: 170px;
	justify-content: flex-start;
	gap: 10px;
}

.nav-profile-trigger .fa-chevron-down {
	margin-left: auto;
	font-size: 0.8rem;
	opacity: 0.85;
	transition: transform 0.25s ease;
}

.nav-profile-menu.open .nav-profile-trigger .fa-chevron-down,
.nav-profile-menu:hover .nav-profile-trigger .fa-chevron-down {
	transform: rotate(180deg);
}

.nav-profile-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	flex-shrink: 0;
}

.nav-profile-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 220px;
	display: none;
	flex-direction: column;
	padding: 10px 8px 8px;
	background: var(--profile-dropdown-bg);
	border: 1px solid var(--profile-dropdown-border);
	border-radius: 12px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
	z-index: 1100;
	gap: 4px;
}

.nav-profile-menu.open .nav-profile-dropdown,
.nav-profile-menu:hover .nav-profile-dropdown {
	display: flex;
}

.nav-profile-option {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--nav-fg);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.nav-profile-option:hover,
.nav-profile-option:focus-visible {
	background: var(--profile-dropdown-hover);
	color: #ffffff;
	outline: none;
}

.nav-profile-signout {
	color: #ffccd3;
}

.nav-profile-signout:hover,
.nav-profile-signout:focus-visible {
	background: rgba(255, 87, 87, 0.2);
	color: #ffe0e0;
}

.signout-btn {
	background: rgba(255, 77, 77, 0.1);
	border: none;
	box-shadow: none;
	cursor: pointer;
}

.signout-btn:hover {
	background: rgba(255, 77, 77, 0.15);
	color: #d32f2f;
}

.anim-toggle-btn {
	border: none;
	box-shadow: none;
	background: rgba(74, 144, 218, 0.1);
	cursor: pointer;
}

.navbar-toggle:focus,
.navbar-toggle:focus-visible,
.nav-link:focus,
.nav-link:focus-visible {
	outline: none;
	box-shadow: none;
}

.anim-toggle-btn:hover {
	background: rgba(74, 144, 218, 0.18);
}

/* ---------- 3D FLIP + TILT ---------- */
#flip-container {
	perspective: 1200px;
	cursor: pointer;
	transition: filter 0.28s ease;
}

#flip-container.flipped .flipper {
	transform: rotateY(180deg);
}

.flipper {
	width: 320px;
	height: 540px;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.4s ease;
	transform-origin: center center;
	will-change: transform;
}

#card {
	transform-style: preserve-3d;
	transform-origin: center;
	transition: transform 0.2s ease;
	will-change: transform;
	font-size: 0.8rem;
}

/* ---------- FRONT & BACK ---------- */
.front,
.back {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	padding: 0;
	overflow: hidden;
}

.card-back-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 6px;
}

.info-block {
	border-top: 1px dashed #aaa;
	padding: 8px 0;
}

.info-block h3 {
	font-size: 12px;
	margin-bottom: 3px;
	font-weight: 600;
	color: #333;
}

.info-block p {
	font-size: 11px;
	color: #555;
	line-height: 1.4;
}

.card {
	background: #fff;
	border: 8px solid #f3d250;
	border-image: linear-gradient(to bottom, #f3d250, #f29559) 1;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	border-radius: 15px;
	padding: 12px;
	overflow: hidden;
}

.back {
	transform: rotateY(180deg);
	background: transparent;
	padding: 0;
}

/* ---------- CONTENT STYLING ---------- */
.top-bar {
	display: flex;
	align-items: center;
	/* vertically center all children */
	justify-content: space-between;
	gap: 10px;
	/* space between badges */
	margin-bottom: 10px;
}

.badge {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 50px;
	padding: 5px 12px;
	font-weight: 600;
	font-size: 12px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	height: 26px;
	/* consistent height */
	line-height: 1;
	/* avoid height variations */
}

#poke-name {
	font-size: 20px;
	font-weight: 700;
	margin-top: 8px;
	text-align: center;
}

.poke-id {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	margin-bottom: 8px;
	text-align: center;
}

.img-container {
	width: calc(100% + 24px);
	margin-left: -12px;
	margin-right: -12px;
	max-width: none;
	height: 180px;
	margin-top: 8px;
	margin-bottom: 10px;
	background: transparent;
	border-radius: 0;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.img-container img {
	width: 100%;
	height: 100%;
	padding: 12px;
	object-fit: contain;
}

/* ---------- TYPES ---------- */
.types {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 10px 0;
}

.types span {
	padding: 4px 12px;
	border-radius: 20px;
	font-weight: 600;
	font-size: 12px;
	color: white;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ---------- TEXT SECTIONS ---------- */
.region,
.description,
.extra,
.abilities,
#evolution {
	font-size: 11px;
	margin: 5px 0;
	text-align: center;
}

/* ---------- STATS ---------- */
.stats {
	display: flex;
	justify-content: space-around;
	margin: 10px 0;
}

.stats div h3 {
	font-size: 16px;
	font-weight: 700;
	color: #111;
	transition: all 0.3s ease;
}

.stats div h3:hover {
	animation: statPulse 1s ease-in-out infinite alternate;
}

@keyframes statPulse {
	0% {
		color: #ffd700;
		text-shadow: 0 0 5px #ffd700;
	}

	100% {
		color: #ffa500;
		text-shadow: 0 0 10px #ffa500, 0 0 20px #ffa500;
	}
}

/* ---------- BUTTONS ---------- */

button {
	margin: 0 5px;
	padding: 8px 20px;
	font-size: 13px;
	font-weight: 600;
	color: black;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid black;

	border-radius: 8px;
	cursor: pointer;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

	-webkit-backdrop-filter: blur(6px);
	/* Safari */
	backdrop-filter: blur(6px);

	transition: background-color 0.3s, border 0.3s, color 0.3s;
}

button:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #f1f1f1;
	border-color: #333;
}

/* ---------- SEARCH & CONTROLS ---------- */
.search-wrapper {
	position: sticky;
	top: 92px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	z-index: 100;
	width: 100%;
}

.controls-panel {
	position: relative;
	flex-direction: column;
	display: flex;
	gap: 8px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 12px;
	padding: 10px 10px 12px;
	width: 100%;
	max-width: 90vw;
	max-height: calc(100vh - 108px);
	overflow-x: hidden;
	overflow-y: auto;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	z-index: 101;
}

.controls-hero {
	background: rgba(255, 255, 255, 0.72);
	padding: 8px 10px 9px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	margin-bottom: 2px;
}

.panel-kicker {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #5d74a0;
	margin-bottom: 4px;
}

.controls-title {
	font-size: 1.02rem;
	line-height: 1.1;
	margin-bottom: 4px;
	color: #1c2740;
}

.controls-summary {
	font-size: 0.75rem;
	line-height: 1.3;
	color: #4f5970;
}

.analysis-panel {
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #223;
	position: sticky;
	top: 92px;
	max-height: calc(100vh - 108px);
	overflow-y: auto;
}

.analysis-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.55), transparent 50%);
	pointer-events: none;
}

.analysis-hero,
.analysis-section {
	position: relative;
	z-index: 1;
}

.analysis-hero {
	background: rgba(255, 255, 255, 0.72);
	padding: 10px 11px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0 0 12px 12px;
	margin: -2px -2px 10px;
}

.radar-panel {
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	padding: 8px;
}

.radar-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	min-width: 0;
}

.radar-heading .filter-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	grid-column: auto;
}

.radar-help {
	position: relative;
	flex: 0 0 auto;
}

.radar-help-button {
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background: rgba(255, 255, 255, 0.92);
	color: #223;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.radar-help-tooltip {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	width: min(250px, calc(100vw - 72px));
	max-width: calc(100vw - 72px);
	padding: 10px 11px;
	border-radius: 10px;
	background: rgba(28, 39, 64, 0.96);
	color: #f6f8ff;
	font-size: 0.72rem;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: break-word;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	z-index: 5;
	pointer-events: none;
}

.radar-help:hover .radar-help-tooltip,
.radar-help:focus-within .radar-help-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.radar-canvas-wrap {
	width: 100%;
	min-height: 320px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 10px;
	padding: 8px;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

#stats-radar-chart {
	width: 100% !important;
	height: 320px !important;
	display: block;
}

.radar-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 10px;
	align-items: end;
}

.radar-actions select {
	grid-column: 1 / -1;
	width: 100%;
	font-size: 12px;
	padding: 8px 10px;
	font-weight: 600;
	color: #223;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	outline: none;
	text-shadow: none;
}

.radar-actions button {
	padding: 8px 10px;
	font-size: 12px;
	margin: 0;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.analysis-kicker {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #5d74a0;
	margin-bottom: 4px;
}

#analysis-name {
	font-size: 1.15rem;
	line-height: 1.1;
	margin-bottom: 5px;
	color: #1c2740;
}

#analysis-summary {
	font-size: 0.78rem;
	line-height: 1.35;
	color: #4f5970;
}

.analysis-section {
	background: rgba(255, 255, 255, 0.45);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	padding: 9px 10px;
	margin-bottom: 8px;
}

.analysis-section.compact {
	margin-bottom: 0;
	height: 100%;
}

.analysis-section h3 {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #40506f;
	margin-bottom: 6px;
}

.analysis-section p {
	font-size: 0.8rem;
	line-height: 1.35;
	color: #25324c;
}

.analysis-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 8px;
}

.analysis-chip-row,
.analysis-evolution {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.analysis-chip,
.analysis-chip-row .evo-link,
.analysis-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: #21304d;
	transform: translateY(0) scale(1);
	transform-origin: center;
	box-shadow: 0 2px 8px rgba(20, 36, 64, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.analysis-chip-row .evo-link {
	cursor: pointer;
	text-decoration: none;
}

.analysis-chip:hover,
.analysis-chip:focus-visible,
.analysis-chip-row .evo-link:hover,
.analysis-chip-row .evo-link:focus-visible,
.analysis-meta-pill:hover,
.analysis-meta-pill:focus-visible {
	transform: translateY(-4px) scale(1.08);
	background: rgba(255, 255, 255, 0.96);
	border-color: rgba(30, 60, 108, 0.26);
	box-shadow: 0 10px 20px rgba(18, 37, 67, 0.22), 0 0 0 1px rgba(74, 144, 218, 0.2);
	outline: none;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.analysis-chip,
	.analysis-chip-row .evo-link,
	.analysis-meta-pill {
		transition: none;
	}

	.analysis-chip:hover,
	.analysis-chip:focus-visible,
	.analysis-chip-row .evo-link:hover,
	.analysis-chip-row .evo-link:focus-visible,
	.analysis-meta-pill:hover,
	.analysis-meta-pill:focus-visible {
		transform: none;
	}
}

.analysis-evolution .evo-arrow {
	font-weight: 700;
	color: #7383a4;
	padding: 0 2px;
}

.analysis-placeholder {
	font-size: 0.75rem;
	color: #6f7b95;
	line-height: 1.3;
}

.generator-nav {
	background: rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 8px;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.generator-nav .nav-items {
	justify-content: space-between;
	gap: 6px;
}

.generator-nav .nav-items li a {
	color: #333;
	padding: 6px 8px;
	font-size: 0.85rem;
}

.generator-nav .nav-items li a:hover {
	background: rgba(0, 0, 0, 0.15);
}

.search-row {
	display: flex;
	gap: 8px;
	align-items: center;
	position: relative;
	bottom: auto;
	background: transparent;
	padding-top: 0;
	z-index: auto;
}

#search-input {
	width: 100%;
	padding: 8px 12px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 5px;
	outline: none;
}

#search-btn {
	padding: 8px 12px;
	font-size: 16px;
	background: #f0f0f0;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	margin: 0;
}

/* ---------- BUTTON ROW ---------- */
.btn-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 0;
}

/* ---------- WELCOME SCREEN ---------- */

#welcome-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	color: #fff;
	text-align: left;
	animation: fadeIn 1s ease;
	z-index: 999;
	overflow: hidden;
}

.welcome-bg-layer {
	position: absolute;
	inset: -4%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1.03) translate3d(0, 0, 0);
	transition: opacity 1600ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 8200ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform, opacity;
	z-index: -2;
}

.welcome-bg-layer.active {
	opacity: 1;
}

.welcome-bg-layer.motion-a.active {
	transform: scale(1.14) translate3d(-1.8%, -1.2%, 0);
}

.welcome-bg-layer.motion-b.active {
	transform: scale(1.08) translate3d(1.6%, 1.1%, 0);
}

.welcome-bg-layer.motion-c.active {
	transform: scale(1.12) translate3d(1.9%, -1.4%, 0);
}

.welcome-bg-layer.motion-d.active {
	transform: scale(1.07) translate3d(-1.5%, 1.3%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.welcome-bg-layer {
		transition: opacity 400ms ease;
		transform: scale(1.02);
	}
}

#welcome-screen .welcome-layout {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	position: relative;
	z-index: 1;
}

.welcome-panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1rem;
	padding: 4.25rem 1.1rem 1rem;
	width: min(430px, 36vw);
	height: 100vh;
	margin: 0;
	margin-left: auto;
	background: rgba(6, 12, 22, 0.38);
	border-radius: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-right: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.welcome-panel h1 {
	font-size: clamp(1.3rem, 2.1vw, 1.95rem);
	line-height: 1.2;
}

.welcome-panel p {
	font-size: clamp(0.82rem, 1.05vw, 0.95rem);
	line-height: 1.55;
	color: #e9eef7;
}

.signup-form {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin-top: 0.3rem;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 12px;
}

.signup-form h2 {
	font-size: 1.1rem;
	letter-spacing: 0.2px;
}

.signup-form input {
	width: 100%;
	padding: 0.72rem 0.8rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: rgba(15, 24, 40, 0.45);
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 0.92rem;
	outline: none;
}

.signup-form input::placeholder {
	color: rgba(236, 240, 245, 0.85);
}

.signup-form input:focus {
	border-color: #9ad9ff;
	box-shadow: 0 0 0 2px rgba(154, 217, 255, 0.22);
}

.password-strength {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.75rem;
	margin-top: -0.3rem;
}

.strength-bar {
	width: 100%;
	height: 4px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 2px;
	overflow: hidden;
}

.strength-fill {
	height: 100%;
	width: 0%;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-fill.weak {
	width: 25%;
	background-color: #ff6b6b;
}

.strength-fill.fair {
	width: 50%;
	background-color: #ffd93d;
}

.strength-fill.good {
	width: 75%;
	background-color: #6bcf7f;
}

.strength-fill.strong {
	width: 100%;
	background-color: #2ecc71;
}

.strength-text {
	color: rgba(236, 240, 245, 0.7);
}

.strength-text.text-weak {
	color: #ff6b6b;
}

.strength-text.text-fair {
	color: #ffd93d;
}

.strength-text.text-good {
	color: #6bcf7f;
}

.strength-text.text-strong {
	color: #2ecc71;
}

.signup-form #register-btn {
	margin: 0.2rem 0 0;
	width: 100%;
}

.auth-box {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem;
}

.auth-tab {
	margin: 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.08);
	color: #f1f4f9;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	text-shadow: none;
}

.auth-tab.active {
	background: rgba(154, 217, 255, 0.3);
	border-color: rgba(154, 217, 255, 0.9);
	color: #fff;
}

.auth-panel {
	display: none;
}

.auth-panel.active {
	display: flex;
}



/* Optional: subtle dark overlay behind content for readability */
#welcome-screen::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.22);
	z-index: -1;
}

/* Ensure all welcome screen children appear above overlay */


/* ---------- ANIMATIONS ---------- */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.slide-in {
	animation: slideIn 0.6s ease-out;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(100px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ---------- RESPONSIVE ---------- */
@media (max-height: 700px) {
	#card {
		transform: scale(0.85);
	}
}

/*----------------Evo------------*/

.evo-link {
	color: #1976d2;
	cursor: pointer;
	font-weight: 600;
	transition: color 0.2s;
}

.evo-link:hover {
	color: #0d47a1;
	text-decoration: underline;
}

/* ---------- RARITY STYLES ---------- */
.card.legendary {
	border: 10px solid #ffd700;
	box-shadow: 0 0 20px 4px #ffd700;
	animation: glowLegendary 1.5s ease-in-out infinite alternate;
}

.card.mythical {
	border: 10px solid #e040fb;
	box-shadow: 0 0 20px 4px #e040fb;
	animation: glowMythical 1.5s ease-in-out infinite alternate;
}

.card.ultra {
	border: 10px solid #00e5ff;
	box-shadow: 0 0 20px 4px #00e5ff;
	animation: glowUltra 1.5s ease-in-out infinite alternate;
}

@keyframes glowUltra {
	from {
		box-shadow: 0 0 10px 2px #00e5ff;
	}

	to {
		box-shadow: 0 0 20px 6px #00bcd4;
	}
}

.badge.rarity {
	font-size: 14px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 50px;
	display: inline-block;
	margin: 5px 0;
}

@keyframes glowLegendary {
	from {
		box-shadow: 0 0 10px 2px #ffd700;
	}

	to {
		box-shadow: 0 0 20px 6px #ffea00;
	}
}

@keyframes glowMythical {
	from {
		box-shadow: 0 0 10px 2px #e040fb;
	}

	to {
		box-shadow: 0 0 20px 6px #ba68c8;
	}
}

.hidden {
	display: none !important;
	opacity: 0 !important;
}

#custom-alert {
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--alert-bg, linear-gradient(135deg, #0e1e35, #122540));
	border: 1px solid var(--alert-border, rgba(123, 194, 255, 0.35));
	border-left: 4px solid var(--alert-accent, #4a90da);
	color: #e8f4ff;
	padding: 1rem 2rem;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	max-width: 420px;
	width: 90%;
	text-align: center;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(74, 144, 218, 0.15);
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	animation: slideFade 0.3s ease;
}

#custom-alert.show {
	opacity: 1;
	transform: translateX(-50%) scale(1);
	/* ✅ No vertical movement */
	pointer-events: auto;
}

.pokemon-day-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: rgba(6, 10, 18, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	z-index: 3500;
	animation: fadeIn 0.24s ease;
}

.pokemon-day-dialog {
	position: relative;
	width: min(860px, 100%);
	max-height: 82vh;
	overflow: auto;
	padding: 18px;
	border-radius: 26px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background:
		radial-gradient(circle at 16% 18%, rgba(74, 144, 218, 0.18), transparent 34%),
		radial-gradient(circle at 82% 14%, rgba(255, 190, 92, 0.16), transparent 28%),
		linear-gradient(145deg, rgba(11, 22, 40, 0.96), rgba(19, 39, 66, 0.95));
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	color: #edf4ff;
	transition: background 0.45s ease;
}

.pokemon-day-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	color: #edf4ff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 0;
}

.pokemon-day-close:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: scale(1.06);
}

.pokemon-day-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 14px;
	padding-right: 56px;
}

.pokemon-day-kicker {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(234, 241, 255, 0.72);
	margin-bottom: 8px;
}

#pokemon-day-name {
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	line-height: 1;
	margin: 0 0 6px;
	background: linear-gradient(90deg, #f7fbff, #8fd1ff 62%, #ffd88c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.pokemon-day-date {
	margin: 0;
	color: rgba(234, 241, 255, 0.76);
	font-size: 0.88rem;
	line-height: 1.35;
}

.pokemon-day-rarity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.82rem;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	white-space: nowrap;
	align-self: flex-start;
}

.pokemon-day-layout {
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.pokemon-day-visual,
.pokemon-day-info {
	min-width: 0;
}

.pokemon-day-art-shell {
	position: relative;
	min-height: 220px;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.14), transparent 42%),
		linear-gradient(155deg, rgba(74, 144, 218, 0.22), rgba(255, 190, 92, 0.12));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 36px rgba(0, 0, 0, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	overflow: hidden;
	margin-bottom: 10px;
}

#pokemon-day-image {
	max-width: 100%;
	max-height: 190px;
	object-fit: contain;
	filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.32));
	image-rendering: auto;
	transform: scale(1.02);
	transition: transform 0.25s ease;
}

.pokemon-day-art-shell:hover #pokemon-day-image {
	transform: scale(1.06);
}

.pokemon-day-toggle-row,
.pokemon-day-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pokemon-day-toggle-row {
	margin-bottom: 8px;
}

.pokemon-day-mini-btn,
.pokemon-day-primary,
.pokemon-day-secondary {
	border: none;
	border-radius: 999px;
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	width: auto;
}

.pokemon-day-mini-btn {
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.08);
	color: #edf4ff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.82rem;
	box-shadow: none;
}

.pokemon-day-mini-btn:hover:not(:disabled),
.pokemon-day-primary:hover,
.pokemon-day-secondary:hover {
	transform: translateY(-1px);
}

.pokemon-day-mini-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.pokemon-day-types {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pokemon-day-type {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: capitalize;
	box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
}

.pokemon-day-flavor {
	margin: 0 0 10px;
	font-size: 0.9rem;
	line-height: 1.45;
	color: rgba(237, 244, 255, 0.9);
}

.pokemon-day-stats-grid,
.pokemon-day-detail-grid {
	display: grid;
	gap: 8px;
	margin-bottom: 10px;
}

.pokemon-day-stats-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.pokemon-day-stat,
.pokemon-day-detail-block {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 18px;
	padding: 10px;
}

.pokemon-day-stat {
	text-align: center;
}

.pokemon-day-stat-value {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 2px;
}

.pokemon-day-stat-label,
.pokemon-day-detail-block h3 {
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(234, 241, 255, 0.62);
}

.pokemon-day-detail-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pokemon-day-detail-block h3 {
	margin: 0 0 4px;
	font-weight: 700;
}

.pokemon-day-detail-block p {
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.35;
	color: rgba(237, 244, 255, 0.94);
	word-break: break-word;
	text-transform: none;
}

.pokemon-day-moves-block {
	margin-bottom: 0;
}

.pokemon-day-actions {
	justify-content: flex-end;
	margin-top: 2px;
}

.pokemon-day-primary,
.pokemon-day-secondary {
	padding: 9px 12px;
	font-size: 0.84rem;
	min-width: 140px;
}

.pokemon-day-primary {
	background: linear-gradient(135deg, #4a90da, #72aef1);
	color: #fff;
	box-shadow: 0 12px 26px rgba(74, 144, 218, 0.26);
}

.pokemon-day-secondary {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #edf4ff;
	box-shadow: none;
}

.guess-pokemon-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: rgba(7, 12, 20, 0.74);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	z-index: 3600;
}

.guess-pokemon-dialog {
	position: relative;
	width: min(560px, 100%);
	max-height: 80vh;
	overflow: auto;
	padding: 16px;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background:
		radial-gradient(circle at 18% 15%, rgba(116, 143, 201, 0.22), transparent 34%),
		radial-gradient(circle at 84% 14%, rgba(238, 213, 53, 0.2), transparent 30%),
		linear-gradient(150deg, rgba(10, 21, 40, 0.95), rgba(19, 38, 66, 0.93));
	box-shadow: 0 26px 64px rgba(0, 0, 0, 0.5);
	color: #edf4ff;
	transition: background 0.45s ease;
}

.guess-pokemon-dialog.correct-gradient {
	background:
		radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.14), transparent 34%),
		radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.1), transparent 30%),
		linear-gradient(132deg,
			var(--guess-type-1, rgba(74, 144, 218, 0.64)),
			var(--guess-type-2, rgba(116, 143, 201, 0.58)),
			var(--guess-type-1, rgba(74, 144, 218, 0.64))
		);
	background-size: 100% 100%, 100% 100%, 220% 220%;
	animation: guessTypeGradientDrift 9s ease-in-out infinite;
}

@keyframes guessTypeGradientDrift {
	0% {
		background-position: 0% 0%, 100% 0%, 0% 50%;
	}
	50% {
		background-position: 0% 0%, 100% 0%, 100% 50%;
	}
	100% {
		background-position: 0% 0%, 100% 0%, 0% 50%;
	}
}

.guess-pokemon-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.08);
	color: #edf4ff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}

.guess-pokemon-close:hover {
	background: rgba(255, 255, 255, 0.16);
}

.guess-pokemon-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding-right: 48px;
	margin-bottom: 6px;
}

#guess-pokemon-title {
	margin: 0;
	font-size: clamp(1.3rem, 2.8vw, 1.7rem);
	line-height: 1;
	background: linear-gradient(90deg, #f8fbff, #9ad9ff 60%, #ffd66f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.guess-pokemon-timer-wrap {
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.guess-pokemon-timer-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(236, 244, 255, 0.66);
	font-weight: 700;
}

.guess-pokemon-timer {
	font-size: 1rem;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	min-width: 58px;
	text-align: center;
}

.guess-pokemon-subtitle {
	margin: 0 0 8px;
	color: rgba(236, 244, 255, 0.82);
	font-size: 0.86rem;
}

.guess-pokemon-image-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 170px;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	background: rgba(255, 255, 255, 0.05);
	margin-bottom: 8px;
	padding: 10px;
}

.guess-pokemon-image {
	max-width: 100%;
	max-height: 140px;
	object-fit: contain;
	filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.3));
	transition: filter 0.28s ease;
}

.guess-pokemon-image.silhouette {
	filter: brightness(0) contrast(1.05) drop-shadow(0 12px 20px rgba(0, 0, 0, 0.42));
}

.guess-pokemon-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 8px;
}

.guess-option-btn,
#guess-pokemon-submit,
#guess-pokemon-new {
	border: none;
	border-radius: 12px;
	padding: 8px 10px;
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
	width: auto;
}

.guess-option-btn {
	background: rgba(255, 255, 255, 0.09);
	color: #edf4ff;
	border: 1px solid rgba(255, 255, 255, 0.14);
	text-transform: capitalize;
}

.guess-option-btn:hover,
#guess-pokemon-submit:hover,
#guess-pokemon-new:hover {
	transform: translateY(-1px);
}

.guess-pokemon-input-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	margin-bottom: 6px;
}

#guess-pokemon-input {
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.08);
	color: #edf4ff;
	padding: 8px 10px;
	font-family: "Poppins", sans-serif;
	font-size: 0.86rem;
	outline: none;
}

#guess-pokemon-input::placeholder {
	color: rgba(236, 244, 255, 0.55);
}

#guess-pokemon-submit,
#guess-pokemon-new {
	background: linear-gradient(135deg, #4a90da, #75b3f1);
	color: #fff;
	padding: 8px 12px;
	box-shadow: 0 10px 22px rgba(74, 144, 218, 0.24);
}

.guess-pokemon-result {
	margin: 0;
	min-height: 16px;
	font-weight: 600;
	font-size: 0.88rem;
	color: #eaf4ff;
}

.guess-pokemon-reveal {
	margin-top: 6px;
	padding: 8px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.82rem;
	line-height: 1.35;
}

.guess-pokemon-reveal p {
	margin: 0 0 2px;
	text-transform: none;
	color: rgba(237, 244, 255, 0.92);
}

.guess-pokemon-actions {
	margin-top: 8px;
	display: flex;
	justify-content: flex-end;
}

@keyframes slideFade {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.nav-items i {
	margin-right: 8px;
}

@media (max-width: 900px) {
	#top-navbar {
		padding: 0 20px;
	}

	.brand-title {
		font-size: 1.2rem;
	}

	.brand-subtitle {
		font-size: 0.8rem;
		display: none;
	}

	.navbar-links.collapsed {
		right: 60px;
		max-width: calc(100vw - 100px);
	}

	.navbar-links.collapsed.open {
		display: flex;
	}

	.nav-link {
		font-size: 0.9rem;
		padding: 7px 12px;
	}

	.nav-profile-trigger {
		min-width: 155px;
	}

	.nav-profile-dropdown {
		min-width: 200px;
	}
}

@media (max-width: 600px) {
	#top-navbar {
		height: 60px;
		padding: 0 15px;
		flex-wrap: wrap;
	}

	.brand-title {
		font-size: 1.1rem;
	}

	.brand-subtitle {
		font-size: 0.7rem;
		display: none;
	}

	.navbar-links.collapsed {
		right: 52px;
		max-width: calc(100vw - 85px);
		padding: 6px;
		gap: 6px;
	}

	.navbar-links.collapsed.open {
		display: flex;
	}

	.nav-link {
		font-size: 0.8rem;
		padding: 6px 9px;
	}

	.nav-profile-trigger {
		min-width: 142px;
	}

	.nav-profile-dropdown {
		right: -4px;
		min-width: 190px;
	}

	.nav-link i {
		font-size: 0.85rem;
	}

	#welcome-screen {
		padding: 0;
	}

	#welcome-screen .welcome-layout {
		display: block;
		height: 100%;
	}

	.welcome-panel {
		width: 100%;
		max-width: none;
		height: 100vh;
		padding: 4rem 0.9rem 0.9rem;
		border-radius: 0;
		gap: 0.8rem;
	}

	.container {
		padding: 70px 8px 8px 8px;
		max-width: 100vw;
	}

	.generator-stage {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 6px 0 0;
	}

	.generator-left,
	.generator-center,
	.generator-right {
		width: 100%;
	}

	.flipper {
		width: 95vw;
		height: 60vw;
		min-height: 320px;
		max-width: 98vw;
		max-height: 80vw;
	}

	#card {
		font-size: 0.85rem;
		transform: scale(0.85);
	}

	.img-container {
		max-width: 240px;
		height: 160px;
	}

	.top-bar,
	.stats {
		flex-direction: column;
		gap: 6px;
	}

	.search-wrapper {
		position: relative;
		top: 0;
		left: 0;
		flex-direction: column;
		width: 100%;
		align-items: stretch;
		gap: 4px;
	}

	.search-row {
		position: relative;
		bottom: auto;
		padding-top: 0;
	}

	.controls-panel {
		position: relative;
		top: 0;
		width: 100%;
		max-width: none;
		max-height: none;
	}

	.radar-canvas-wrap {
		min-height: 260px;
	}

	#stats-radar-chart {
		height: 260px !important;
	}

	.radar-actions {
		grid-template-columns: 1fr;
	}

	.generator-right {
		order: 3;
	}

	.analysis-panel {
		position: relative;
		top: 0;
		padding: 16px;
	}

	.analysis-columns {
		grid-template-columns: 1fr;
	}

	.generator-nav .nav-items {
		flex-wrap: wrap;
	}

	#search-input {
		width: 100%;
	}

	button,
	#search-btn {
		width: 100%;
		font-size: 1rem;
		padding: 10px 0;
	}

	#custom-alert {
		font-size: 1rem;
		padding: 0.8rem 1.2rem;
		max-width: 98vw;
	}

	.pokemon-day-modal {
		padding: 12px;
	}

	.pokemon-day-dialog {
		padding: 18px;
		max-height: 92vh;
	}

	.pokemon-day-header {
		flex-direction: column;
		padding-right: 42px;
	}

	.pokemon-day-layout {
		grid-template-columns: 1fr;
	}

	.pokemon-day-art-shell {
		min-height: 240px;
	}

	#pokemon-day-image {
		max-height: 220px;
	}

	.pokemon-day-stats-grid,
	.pokemon-day-detail-grid {
		grid-template-columns: 1fr 1fr;
	}

	.pokemon-day-actions,
	.pokemon-day-toggle-row {
		flex-direction: column;
	}

	.pokemon-day-primary,
	.pokemon-day-secondary,
	.pokemon-day-mini-btn {
		width: 100%;
		min-width: 0;
	}

	.guess-pokemon-modal {
		padding: 10px;
	}

	.guess-pokemon-dialog {
		padding: 16px;
	}

	.guess-pokemon-header {
		flex-direction: column;
		padding-right: 40px;
	}

	.guess-pokemon-timer-wrap {
		text-align: left;
	}

	.guess-pokemon-options {
		grid-template-columns: 1fr;
	}

	.guess-pokemon-input-row {
		grid-template-columns: 1fr;
	}

	#guess-pokemon-submit,
	#guess-pokemon-new {
		width: 100%;
	}
}