:root {
	--brand_red: #d62828;
	--brand_gold: #f7b733;
	--brand_white: #fcfcfc;
	--brand_paper: #f4efe6;
	--text_dark: #1a1a1a;
	--text_soft: #6d4c41;
	--shadow_depth: 0 20px 40px rgba(0, 0, 0, 0.15);
	--border_standard: 3px solid #e0d5c5;
	--nori_black: #1a1a1a;
	--wood_light: #e8d5b7;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	corner-shape: squircle;
}
::-webkit-scrollbar {
	width: 12px;
	background: var(--brand_paper);
}
::-webkit-scrollbar-thumb {
	background: var(--brand_red);
	border-radius: 20px;
	border: 3px solid var(--brand_paper);
}
::-webkit-scrollbar-thumb:hover {
	background: #b71c1c;
}
::selection {
	background: var(--brand_gold);
	color: var(--text_dark);
}
html,
body {
	background-color: #2a2a2a;
	background-image: repeating-linear-gradient(
			90deg,
			transparent,
			transparent 100px,
			rgba(214, 40, 40, 0.03) 100px,
			rgba(214, 40, 40, 0.03) 101px
		),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 100px,
			rgba(214, 40, 40, 0.03) 100px,
			rgba(214, 40, 40, 0.03) 101px
		);
}
body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: "Nunito", sans-serif;
	color: var(--text_dark);
	overflow: hidden;
}

.no_select {
	user-select: none;
}

.intro_overlay {
	position: fixed;
	inset: 0;
	background: var(--brand_red);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
	background-image: linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.05) 25%,
			transparent 25%
		),
		linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
		linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
	background-size: 60px 60px;

	.intro_logo_box {
		width: 280px;
		animation: intro_bounce 2s infinite ease-in-out;
		img {
			width: 100%;
			height: auto;
			filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
		}
	}

	h1 {
		color: var(--brand_white);
		margin-top: 2rem;
		letter-spacing: 0.6rem;
		font-family: "Fredoka", sans-serif;
		font-size: 3.5rem;
		text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	}

	&.hidden {
		transform: translateY(-100%);
	}
}

.bento_wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.app_shell {
	width: 1400px;
	min-width: 1400px;
	max-width: calc(100vw - 40px);
	height: 94vh;
	background: linear-gradient(135deg, var(--brand_paper) 0%, #e8ddd0 100%);
	border-radius: 40px;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5),
		inset 0 2px 0 rgba(255, 255, 255, 0.5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	border: 12px solid var(--brand_red);
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='none'/%3E%3Cpath d='M10 10h80v80H10z' stroke='%23e0d5c5' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/svg%3E");
	corner-shape: squircle;
	flex-shrink: 0;

	@media (max-width: 1440px) {
		width: 100%;
		min-width: 0;
	}

	.header_bar {
		background: var(--brand_white);
		padding: 8px 35px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 4px solid var(--brand_gold);
		position: relative;
		z-index: 10;
		flex-shrink: 0;

		.brand_logo {
			height: 90px;
			cursor: pointer;
			transition: transform 0.3s;
			display: flex;
			align-items: center;
			display: flex;
			align-items: center;
			gap: 12px;
			cursor: pointer;
			transition: transform 0.3s;
			font-family: "Fredoka", sans-serif;
			font-size: 1.8rem;
			font-weight: 700;

			img {
				height: 100%;
				width: auto;
			}
			span span {
				color: var(--brand_red);
			}

			&:hover {
				transform: scale(1.05);
			}
		}

		.player_stats {
			display: flex;
			align-items: center;
			gap: 20px;
			background: var(--brand_paper);
			padding: 4px 18px 4px 8px;
			border-radius: 50px;
			border: 2px solid rgba(214, 40, 40, 0.1);

			.user_profile_mini {
				display: flex;
				align-items: center;
				gap: 12px;

				.mini_avatar {
					width: 44px;
					height: 44px;
					border-radius: 50%;
					border: 2px solid var(--brand_gold);
					overflow: hidden;
					background: white;
					box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.user_meta {
					display: flex;
					flex-direction: column;
					line-height: 1.2;

					.header_name {
						font-weight: 800;
						font-size: 0.95rem;
						color: var(--brand_red);
						font-family: "Fredoka", sans-serif;
					}

					.belt_info {
						display: flex;
						align-items: center;
						gap: 6px;
						font-size: 0.75rem;
						font-weight: 700;
						color: var(--text_soft);

						.belt_node {
							width: 12px;
							height: 12px;
							border-radius: 50%;
							background: #fff;
							border: 1px solid #ddd;
							transition: background-color 0.4s;

							&.status_white {
								background: #ffffff;
								border-color: #ddd;
							}
							&.status_yellow {
								background: #ffeb3b;
								border-color: #fbc02d;
							}
							&.status_orange {
								background: #ff9800;
								border-color: #e65100;
							}
							&.status_green {
								background: #4caf50;
								border-color: #2e7d32;
							}
							&.status_blue {
								background: #2196f3;
								border-color: #1565c0;
							}
							&.status_purple {
								background: #9c27b0;
								border-color: #6a1b9a;
							}
							&.status_black {
								background: #212121;
								border-color: #000;
							}
						}
					}
				}
			}

			.xp_track_wrapper {
				display: flex;
				flex-direction: column;
				gap: 4px;

				.xp_track {
					width: 100px;
					height: 6px;
					background: #e0d5c5;
					border-radius: 10px;
					overflow: hidden;

					.xp_fill {
						height: 100%;
						width: 0%;
						background: linear-gradient(90deg, var(--brand_gold), #ffd54f);
						transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
					}
				}

				.stat_counter {
					font-weight: 800;
					font-size: 0.85rem;
					display: flex;
					align-items: center;
					gap: 5px;
					i {
						color: var(--brand_gold);
					}
					#ui_header_xp_val {
						color: var(--text_dark);
					}
				}
			}
		}
	}

	.navigation_tabs {
		display: flex;
		gap: 8px;
		padding: 15px 30px;
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.9),
			rgba(255, 255, 255, 0.7)
		);
		backdrop-filter: blur(10px);
		border-bottom: 3px solid rgba(214, 40, 40, 0.1);
		position: relative;
		z-index: 10;
		flex-shrink: 0;

		.tab_trigger {
			padding: 12px 24px;
			border: none;
			background: var(--brand_paper);
			font-family: "Fredoka", sans-serif;
			font-weight: 600;
			color: var(--text_soft);
			border-radius: 20px;
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

			&.active {
				background: var(--brand_red);
				color: white;
				box-shadow: 0 8px 20px rgba(214, 40, 40, 0.4);
				transform: translateY(-2px);
			}

			&:hover:not(.active) {
				background: #fff;
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			}
		}
	}

	.viewport_content {
		flex: 1;
		overflow-y: scroll;
		scrollbar-gutter: stable;
		padding: 30px;
		position: relative;
		z-index: 5;
		width: 100%;

		.view_section {
			display: none;
			width: 100%;
			max-width: 100%;

			&.active {
				display: block;
				animation: view_slide 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
			}

			.section_title {
				font-family: "Fredoka", sans-serif;
				font-size: 2.2rem;
				margin-bottom: 20px;
				color: var(--brand_red);
			}

			.section_paragraph {
				color: var(--text_soft);
				margin-bottom: 15px;
				font-size: 1.1rem;
				line-height: 1.7;
			}

			&.resources_layout {
				.resources_hero {
					background: var(--brand_red);
					color: white;
					padding: 60px 40px;
					border-radius: 32px;
					margin-bottom: 40px;
					text-align: center;
					box-shadow: var(--shadow_depth);
					position: relative;
					overflow: hidden;

					.hero_bg_img {
						position: absolute;
						inset: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
						opacity: 0.15;
						mix-blend-mode: overlay;
					}

					.hero_content {
						position: relative;
						z-index: 2;
					}

					h1 {
						font-family: "Fredoka";
						font-size: 3rem;
						margin-bottom: 1.5rem;
						text-transform: uppercase;
						letter-spacing: 2px;
					}
					p {
						font-size: 1.3rem;
						opacity: 0.95;
						line-height: 1.6;
						max-width: 900px;
						margin: 0 auto;
					}
				}

				.history_bento {
					display: grid;
					grid-template-columns: repeat(12, 1fr);
					gap: 20px;
					margin-bottom: 40px;

					.history_card {
						background: white;
						padding: 35px;
						border-radius: 28px;
						box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
						border-bottom: 6px solid var(--brand_gold);
						position: relative;
						overflow: hidden;

						&.img_card {
							padding: 0;
							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}

						&.span_8 {
							grid-column: span 8;
						}
						&.span_4 {
							grid-column: span 4;
						}
						&.span_12 {
							grid-column: span 12;
						}

						h3 {
							font-family: "Fredoka";
							font-size: 1.8rem;
							margin-bottom: 15px;
							color: var(--brand_red);
						}
						blockquote {
							border-left: 5px solid var(--brand_gold);
							padding: 15px 25px;
							background: var(--brand_paper);
							margin: 20px 0;
							font-style: italic;
							border-radius: 0 15px 15px 0;
						}
						ul {
							margin-left: 20px;
							margin-top: 15px;
							li {
								margin-bottom: 12px;
								font-weight: 600;
								color: var(--text_soft);
							}
						}
					}

					@media (max-width: 992px) {
						.history_card {
							grid-column: span 12 !important;
						}
					}
				}

				.book_shelf {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
					gap: 20px;
					margin-top: 20px;

					.book_card {
						background: var(--brand_paper);
						padding: 25px;
						border-radius: 20px;
						border-left: 6px solid var(--brand_red);
						h4 {
							font-family: "Fredoka";
							margin-bottom: 5px;
							color: var(--text_dark);
						}
						p {
							font-size: 0.95rem;
							opacity: 0.8;
							font-weight: 700;
						}
					}
				}

				.creation_showcase {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
					gap: 20px;
					margin-top: 20px;
					.creation_item {
						background: white;
						border-radius: 24px;
						border: 2px solid var(--brand_gold);
						overflow: hidden;
						display: flex;
						flex-direction: column;

						.creation_img {
							width: 100%;
							height: 180px;
							object-fit: cover;
							border-bottom: 2px solid var(--brand_gold);
						}

						.creation_details {
							padding: 20px;
							text-align: center;
							strong {
								display: block;
								font-family: "Fredoka";
								font-size: 1.1rem;
								color: var(--brand_red);
							}
							span {
								font-size: 0.9rem;
								opacity: 0.7;
								font-weight: 600;
							}
						}
					}
				}
			}

			&.community_layout {
				.leaderboard_container {
					background: white;
					border-radius: 32px;
					overflow: hidden;
					box-shadow: var(--shadow_depth);

					.leaderboard_header {
						background: var(--nori_black);
						color: white;
						padding: 30px 40px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						h2 {
							font-family: "Fredoka";
							margin: 0;
							font-size: 1.8rem;
						}
						span {
							opacity: 0.7;
							font-weight: 600;
							font-size: 0.9rem;
						}
					}

					.leaderboard_list {
						.rank_item {
							padding: 20px 40px;
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1px solid rgba(0, 0, 0, 0.05);
							transition: 0.3s;

							&:hover {
								background: rgba(247, 183, 51, 0.08);
								transform: translateX(5px);
							}
							&:last-child {
								border-bottom: none;
							}

							.user_info {
								display: flex;
								align-items: center;
								gap: 25px;
								.rank_num {
									font-weight: 900;
									color: var(--brand_gold);
									font-size: 1.4rem;
									width: 40px;
								}
								.user_avatar {
									width: 50px;
									height: 50px;
									border-radius: 50%;
									background: var(--brand_paper);
									border: 2px solid var(--brand_gold);
									overflow: hidden;
									img {
										width: 100%;
										height: 100%;
										object-fit: cover;
									}
								}
								.user_name {
									font-weight: 800;
									font-size: 1.2rem;
									color: var(--text_dark);
								}
							}

							.user_xp {
								font-weight: 900;
								color: var(--brand_red);
								font-size: 1.1rem;
							}
						}
					}
				}

				.join_club {
					margin-top: 40px;
					background: var(--brand_gold);
					padding: 50px;
					border-radius: 40px;
					text-align: center;
					box-shadow: 0 15px 35px rgba(247, 183, 51, 0.3);

					h2 {
						font-family: "Fredoka";
						font-size: 2.5rem;
						margin-bottom: 15px;
						color: var(--text_dark);
					}
					p {
						font-size: 1.3rem;
						margin-bottom: 30px;
						font-weight: 600;
						color: var(--text_dark);
					}
				}
			}
		}

		.bento_grid {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			grid-auto-rows: min-content;
			gap: 20px;
			margin-bottom: 30px;
			width: 100%;

			.bento_cell {
				background: white;
				border-radius: 24px;
				padding: 25px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
				position: relative;
				overflow: hidden;
				transition: transform 0.3s, box-shadow 0.3s;
				border: 3px solid rgba(0, 0, 0, 0.03);
				corner-shape: squircle;
				min-width: 0;

				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					height: 4px;
					background: var(--brand_gold);
					opacity: 0.8;
				}

				&.bento_large {
					grid-column: span 8;
					grid-row: span 2;

					.hero_layout_box {
						display: flex;
						gap: 30px;
						align-items: center;

						.hero_text_side {
							flex: 1;
						}
						.hero_img_side {
							width: 320px;
							height: 320px;
							border-radius: 28px;
							overflow: hidden;
							border: 4px solid var(--brand_gold);
							box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
					}

					.hero_title {
						font-family: "Fredoka", sans-serif;
						font-size: 3.5rem;
						line-height: 1.1;
						margin-bottom: 1rem;
						color: var(--brand_red);
					}
					.hero_action {
						margin-top: 30px;
					}
				}

				&.bento_medium {
					grid-column: span 4;
					.stat_block {
						text-align: center;
						i {
							font-size: 3.5rem;
							margin-bottom: 10px;
							&.fire {
								color: var(--brand_red);
							}
							&.trophy {
								color: var(--brand_gold);
							}
						}
						h3 {
							margin-bottom: 5px;
							font-family: "Fredoka";
						}
						.stat_value {
							font-size: 2.8rem;
							font-weight: 800;
							&.gold {
								color: var(--brand_gold);
							}
							&.red {
								color: var(--brand_red);
							}
						}
					}
				}

				&.bento_wide {
					grid-column: span 8;
				}
				&.bento_full {
					grid-column: span 12;
				}

				&:hover {
					transform: translateY(-5px);
					box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
				}

				.featured_wrap {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 15px;
				}
				.picks_grid {
					display: grid;
					grid-template-columns: repeat(1, 1fr);
					gap: 15px;
				}
			}
		}

		.ui_card {
			background: white;
			border-radius: 32px;
			padding: 30px;
			margin-bottom: 30px;
			box-shadow: var(--shadow_depth);
			border-left: 8px solid var(--brand_gold);
			corner-shape: squircle;
			width: 100%;

			&.premium {
				border-left-color: var(--brand_red);
			}

			.adventure_grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
				gap: 20px;
			}
		}

		form {
			display: flex;
			flex-direction: column;
			gap: 20px;

			input,
			textarea,
			select {
				width: 100%;
				padding: 16px 24px;
				border: 3px solid #e0d5c5;
				border-radius: 20px;
				font-family: inherit;
				font-size: 1.1rem;
				font-weight: 600;
				color: var(--brand_white);
				background: var(--brand_white);
				transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

				&:focus {
					outline: none;
					border-color: var(--brand_red);
					box-shadow: 0 0 0 4px rgba(214, 40, 40, 0.1);
				}
			}

			.select_wrapper {
				position: relative;
				width: 100%;

				&::after {
					content: "\f0d7";
					font-family: "Font Awesome 6 Free";
					font-weight: 900;
					position: absolute;
					right: 24px;
					top: 50%;
					transform: translateY(-50%);
					color: var(--brand_red);
					pointer-events: none;
					font-size: 1.2rem;
				}

				select {
					appearance: none;
					background-color: var(--brand_white);
					color: var(--text_dark);
					cursor: pointer;
					padding-right: 60px;
					width: 100%;

					&:hover {
						border-color: var(--brand_red);
					}

					&:focus {
						outline: none;
						border-color: var(--brand_red);
						box-shadow: 0 0 0 3px
							color-mix(in srgb, var(--brand_primary) 20%, transparent);
					}

					option {
						background-color: var(--brand_white);
						color: var(--text_dark);
						padding: 15px;
						font-weight: 600;

						&:hover,
						&:focus,
						&:checked {
							background-color: var(--brand_red);
							color: var(--brand_white);
						}
					}
				}
			}
		}

		.profile_bento {
			.avatar_cell {
				text-align: center;
				.avatar_box {
					width: 130px;
					height: 130px;
					background: var(--brand_paper);
					border-radius: 50%;
					margin: 0 auto 20px;
					border: 6px solid var(--brand_gold);
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 10px 30px rgba(247, 183, 51, 0.3);
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.display_name {
					margin: 0;
					color: var(--brand_red);
					font-family: "Fredoka", sans-serif;
					font-size: 2.5rem;
				}
				.profile_title {
					font-weight: 800;
					opacity: 0.7;
					margin-top: 4px;
					color: var(--text_soft);
					font-size: 1.1rem;
				}
				.stat_pill_group {
					margin-top: 20px;
					display: flex;
					justify-content: center;
					gap: 12px;
					.stat_pill {
						background: var(--brand_paper);
						padding: 8px 18px;
						border-radius: 30px;
						font-weight: 800;
						font-size: 1rem;
						border: 2px solid rgba(0, 0, 0, 0.03);
					}
				}
			}
			.performance_cell {
				.perf_header {
					margin-top: 0;
					font-family: "Fredoka";
					font-size: 2rem;
					color: var(--brand_red);
				}
				.perf_grid {
					display: flex;
					gap: 25px;
					margin-top: 25px;
					.perf_card {
						flex: 1;
						text-align: center;
						padding: 35px;
						background: var(--brand_paper);
						border-radius: 28px;
						border: 3px solid transparent;
						transition: 0.3s;
						&:hover {
							border-color: var(--brand_gold);
							background: white;
						}
						.perf_value {
							font-size: 3.5rem;
							font-weight: 900;
							&.red {
								color: var(--brand_red);
							}
							&.gold {
								color: var(--brand_gold);
							}
						}
						.perf_label {
							font-weight: 800;
							color: var(--text_soft);
							font-size: 1.1rem;
							margin-top: 5px;
						}
					}
				}
			}
		}

		.mastery_grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
			gap: 20px;
		}
	}
}

.menu_label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--brand_red);
	color: white;
	padding: 8px 20px;
	border-radius: 20px;
	font-weight: 700;
	font-size: 0.9rem;
	margin-bottom: 15px;
	box-shadow: 0 4px 12px rgba(214, 40, 40, 0.3);
	&.nori {
		background: var(--nori_black);
	}
}

.level_display {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 20px;
	.level_label {
		background: linear-gradient(90deg, var(--brand_gold), #ffd54f);
		color: var(--text_dark);
		padding: 10px 24px;
		border-radius: 50px;
		font-weight: 800;
		font-size: 1rem;
		align-self: flex-start;
		box-shadow: 0 4px 12px rgba(247, 183, 51, 0.4);
	}
	.progress_dots {
		display: flex;
		gap: 12px;
		.dot {
			width: 42px;
			height: 42px;
			border-radius: 50%;
			background: #f0e0d0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 800;
			color: var(--text_soft);
			transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
			border: 2px solid transparent;
			&.active {
				background: var(--brand_gold);
				color: var(--brand_red);
				transform: scale(1.1);
				border-color: var(--brand_red);
			}
		}
	}
}

.quest_tile {
	background: white;
	border-radius: 28px;
	padding: 25px;
	text-align: center;
	border-bottom: 6px solid #e0d5c5;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: pointer;
	position: relative;
	corner-shape: squircle;

	&:hover {
		transform: translateY(-10px) rotate(2deg);
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	}
	&.completed {
		border-bottom-color: #4caf50;
	}
	&.completed::before {
		content: "\f058";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		position: absolute;
		top: 15px;
		right: 15px;
		color: #4caf50;
		font-size: 1.5rem;
	}
	.tile_icon {
		font-size: 3.5rem;
		color: var(--text_dark);
		margin-bottom: 15px;
		display: block;
	}
	.tile_title {
		font-weight: 800;
		font-size: 1.2rem;
	}
	&.mastery_item {
		padding: 20px;
		.tile_icon {
			font-size: 2.5rem;
		}
		.tile_title {
			font-size: 1rem;
		}
	}
}

.sushi_card {
	background: white;
	border-radius: 50px;
	padding: 15px 30px;
	display: flex;
	align-items: center;
	gap: 15px;
	border-left: 6px solid var(--nori_black);
	transition: all 0.3s;
	cursor: pointer;
	&:hover {
		transform: translateX(10px);
		box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.1);
	}
	.icon {
		width: 50px;
		height: 50px;
		background: linear-gradient(135deg, var(--brand_red), #ff5252);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 1.5rem;
	}
	.pick_name {
		font-weight: 800;
		font-size: 1.1rem;
		color: var(--text_dark);
	}
}

.modal_overlay {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 26, 0.95);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 5000;
	backdrop-filter: blur(10px);
	&.active {
		display: flex;
	}
	.modal_box {
		background: white;
		border-radius: 40px;
		padding: 40px;
		width: 90%;
		max-width: 550px;
		border: 6px solid var(--brand_gold);
		position: relative;
		corner-shape: squircle;
		.close_trigger {
			position: absolute;
			top: 25px;
			right: 25px;
			background: none;
			border: none;
			font-size: 2.5rem;
			cursor: pointer;
			color: var(--text_soft);
			width: 50px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			&:hover {
				color: var(--brand_red);
				transform: rotate(90deg);
			}
		}
		h2 {
			color: var(--brand_red);
			font-family: "Fredoka";
			font-size: 2.2rem;
		}
		.step_preview {
			background: var(--brand_paper);
			border-radius: 24px;
			padding: 40px;
			margin: 25px 0;
			text-align: center;
			i {
				font-size: 5rem;
				color: var(--brand_red);
			}
		}
		.step_indicator {
			font-weight: 800;
			color: var(--brand_gold);
			text-align: center;
			margin-bottom: 10px;
			font-size: 1.2rem;
		}
		.instruction_text {
			font-size: 1.4rem;
			margin-bottom: 30px;
			text-align: center;
			color: var(--text_dark);
			font-weight: 600;
		}
		.modal_actions {
			display: flex;
			gap: 15px;
			.cta_btn {
				&.back {
					flex: 1;
				}
				&.next,
				&.finish {
					flex: 2;
				}
			}
		}
	}
}

.cta_btn {
	background: linear-gradient(135deg, var(--brand_red), #ff5252);
	color: white;
	border: none;
	padding: 16px 30px;
	border-radius: 50px;
	font-weight: 800;
	cursor: pointer;
	transition: all 0.3s;
	font-family: "Fredoka", sans-serif;
	font-size: 1.1rem;
	box-shadow: 0 8px 20px rgba(214, 40, 40, 0.3);
	&:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 30px rgba(214, 40, 40, 0.4);
	}
	&.secondary {
		background: #f5f5f5;
		color: var(--text_dark);
		box-shadow: none;
	}
	&.success {
		background: linear-gradient(135deg, #4caf50, #66bb6a);
		box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
	}
}

.toast_hub {
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 15px;
	pointer-events: none;
	.toast_item {
		background: white;
		border-left: 8px solid var(--brand_red);
		padding: 20px 30px;
		border-radius: 20px;
		box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
		transform: translateX(450px);
		transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		&.visible {
			transform: translateX(0);
		}
		h4 {
			color: var(--brand_red);
			margin-bottom: 4px;
			font-family: "Fredoka";
		}
		p {
			font-size: 0.95rem;
			color: var(--text_soft);
		}
	}
}

@keyframes intro_bounce {
	0%,
	100% {
		transform: scale(1) rotate(0deg);
	}
	50% {
		transform: scale(1.1) rotate(5deg);
	}
}
@keyframes view_slide {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}