/* Jade Theme - Custom Variables */
:root {
    --bg-primary: #003800;
    --bg-secondary: #002200;
    --bg-tertiary: #004400;
    --text-primary: #eeeeee;
    --text-secondary: #cccccc;
    --border-color: #006600;
    --link-color: #66ff66;
    --link-hover: #88ff88;
    --offcanvas-width: 280px;
    
    /* Override Bootstrap 5 dark mode variables */
    --bs-body-bg: #003800;
    --bs-body-color: #eeeeee;
    --bs-link-color: #66ff66;
    --bs-link-hover-color: #88ff88;
    --bs-border-color: #006600;
}

/* Mini-doll Styling */
.minidoll {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 90px;
	padding: 0 8px;
	position: relative;
}
.minidoll-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-bottom: 4px;
}
.minidoll-images {
	width: 90px;
	height: 90px;
	position: relative;
	overflow: visible; /* Allow remove icon to show outside */
	background: rgba(100, 100, 100, 0.2);
	border-radius: 50%;
	border: 2px solid var(--border-color);
	box-shadow: 0 0 8px rgba(102, 255, 102, 0.3);
}
.minidoll .miniavatarlayer {
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	height: 90px;
	border-radius: 50%; /* Clip to circular shape */
	overflow: hidden;
}
.minidoll .miniavatarlayer img {
	width: 90px;
	height: 90px;
	object-fit: cover;
	object-position: center;
}
.minidoll-remove-icon {
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 10;
	background: white;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	text-decoration: none;
	transition: all 0.2s;
}
.minidoll-remove-icon:hover {
	transform: scale(1.1);
	box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}
.minidoll-remove-icon i {
	font-size: 16px;
	color: #dc3545;
	line-height: 1;
}

/* Info Badge Styling (Random/Clear buttons) */
.info-badge {
	display: inline-block;
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 4px 12px;
	margin: 2px 5px 8px 5px;
	color: var(--link-color);
	font-weight: 500;
	transition: all 0.3s;
}
.info-badge:hover {
	background-color: var(--border-color);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 255, 0, 0.2);
}

/* Layer Tabs Styling - Button-like Appearance */
#tabs {
	border: none;
	gap: 0;
	justify-content: flex-start;
	position: relative;
}
#tabs .nav-link {
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: 6px 6px 0 0;
	color: var(--text-secondary);
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 13px;
	transition: all 0.3s;
	margin: 0 2px 0 0;
	border-bottom: none;
	position: relative;
}
#tabs .nav-link:hover {
	background-color: var(--border-color);
	color: var(--text-primary);
}
#tabs .nav-link.active {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	border-color: var(--border-color);
	border-bottom: 2px solid var(--bg-secondary);
}

/* Layer tabs container - no rounded top corners, negative margin to connect with tabs */
#layer-tabs {
	border-radius: 0 0 8px 8px;
	margin-top: -1px;
}

/* Grid button styling */
.gridbutton {
	border: 1px solid var(--border-color);
	border-radius: 4px;
	margin: 3px;
}

/* Compact Popover Styling */
.compact-popover .popover-arrow {
	display: none !important;
}
.compact-popover .popover-body {
	font-size: 11px;
	padding: 4px 8px;
	line-height: 1.2;
}

/* Player Navigation Accordion Styling */
#playerNavAccordion .accordion-item {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid rgba(0, 56, 0, 0.3);
}
#playerNavAccordion .accordion-item:last-child {
	border-bottom: none;
}
#playerNavAccordion .accordion-button {
	background-color: transparent;
	color: #d1ffd1;
	font-weight: bold;
	font-size: 14px;
	padding: 0.75rem 1rem;
	border: none;
	box-shadow: none;
	border-left: 3px solid transparent;
	transition: all 0.2s ease;
}
#playerNavAccordion .accordion-button:not(.collapsed) {
	background-color: rgba(1, 93, 1, 0.2);
	color: #ffffff;
	box-shadow: none;
	border-left-color: #d1ffd1;
}
#playerNavAccordion .accordion-button:hover {
	background-color: rgba(1, 93, 1, 0.3);
}
#playerNavAccordion .accordion-button:focus {
	box-shadow: none;
	border-color: transparent;
}
#playerNavAccordion .accordion-button::after {
	filter: brightness(0) saturate(100%) invert(95%) sepia(8%) saturate(1054%) hue-rotate(54deg) brightness(107%) contrast(100%);
}
#playerNavAccordion .accordion-button:not(.collapsed)::after {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}
#playerNavAccordion .accordion-body {
	background-color: transparent;
	padding: 0;
}
#playerNavAccordion .accordion-collapse {
	border: none;
}

/* Effects and Save Options Accordion Styling */
#effectsAccordion .accordion-button::after,
#saveOptionsAccordion .accordion-button::after {
	/* White chevron icon for collapsed state */
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

#effectsAccordion .accordion-button:not(.collapsed)::after,
#saveOptionsAccordion .accordion-button:not(.collapsed)::after {
	/* White chevron icon for expanded state */
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

#effectsAccordion .accordion-button,
#saveOptionsAccordion .accordion-button {
	/* Remove bottom border on collapsed state */
	border-bottom: none !important;
	box-shadow: none !important;
}

#effectsAccordion .accordion-button:focus,
#saveOptionsAccordion .accordion-button:focus {
	/* Remove focus outline */
	box-shadow: none !important;
	outline: none !important;
}

/* Details Accordion Styling */
#detailsAccordion .accordion-button {
	border: none !important;
	box-shadow: none !important;
}

#detailsAccordion .accordion-button:focus,
#detailsAccordion .accordion-button:hover,
#detailsAccordion .accordion-button:active {
	box-shadow: none !important;
	outline: none !important;
	background-color: var(--bg-secondary) !important;
}

#detailsAccordion .accordion-button:not(.collapsed) {
	background-color: var(--bg-secondary) !important;
	color: var(--text-primary) !important;
}

#detailsAccordion .accordion-button::after {
	filter: brightness(0) invert(1);
}

#detailsAccordion .accordion-button:not(.collapsed)::after {
	filter: brightness(0) invert(1);
}

/* Details Accordion Content Styling */
#detailsAccordion .accordion-body {
	background: var(--bg-secondary) !important;
	padding: 40px 20px !important;
}

#detailsAccordion .accordion-body .container {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 15px;
	padding: 40px;
	color: #212529;
	max-width: 960px;
}

#detailsAccordion .accordion-body h2,
#detailsAccordion .accordion-body h3,
#detailsAccordion .accordion-body h4,
#detailsAccordion .accordion-body h5,
#detailsAccordion .accordion-body h6 {
	color: #212529;
}

#detailsAccordion .accordion-body .card {
	background: #f8f9fa;
	color: #212529;
	border: 1px solid #dee2e6;
}

#detailsAccordion .accordion-body .card-header {
	background: #e9ecef;
	color: #212529;
	border-bottom: 1px solid #dee2e6;
}

#detailsAccordion .accordion-body .list-group-item {
	background: transparent;
	color: #212529;
	border-color: #dee2e6;
}

#detailsAccordion .accordion-body .alert {
	color: #212529;
}

#detailsAccordion .accordion-body .alert-success {
	background: #d1e7dd;
	border-color: #badbcc;
}

#detailsAccordion .accordion-body .alert-info {
	background: #cfe2ff;
	border-color: #b6d4fe;
}

#detailsAccordion .accordion-body pre {
	background: #2a2a2a !important;
	color: #e0e0e0 !important;
}

#detailsAccordion .accordion-body code {
	color: #d63384;
}

/* Layer Tabs Accordion Styling */
#layerTabsAccordion {
	--bs-accordion-bg: transparent;
	--bs-accordion-border-color: transparent;
}

#layerTabsAccordion .accordion-item {

	border-radius: 6px;
	overflow: hidden;
}

/* When accordion is collapsed, show bottom strip with rounded corners */
#layerTabsAccordion .accordion-header:has(.accordion-button.collapsed) {
	border-bottom: 8px solid #006600;
	border-radius: 6px;
}

#layerTabsAccordion .accordion-button {
	border-bottom: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

#layerTabsAccordion .accordion-button:focus {
	box-shadow: none !important;
	outline: none !important;
}

/* Show the toggle indicator (chevron) on the separate toggle button */
#layerTabsAccordion .accordion-button::after {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
	margin: 0;
}

#layerTabsAccordion .accordion-button:not(.collapsed)::after {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
	margin: 0;
}

/* Make tabs clickable inside accordion button */
#layerTabsAccordion .nav-tabs {
	pointer-events: all;
	background: transparent;
	padding: 0;
	border: none;
	display: flex;
	flex-wrap: nowrap !important;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
#layerTabsAccordion .nav-tabs::-webkit-scrollbar {
	display: none;
}

#layerTabsAccordion .nav-item {
	background: transparent;
	border-radius: 6px 6px 0 0;
	margin: 0 2px 0 0;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
}

/* Active tab styling - taller and higher z-index */
#layerTabsAccordion .nav-item:has(.nav-link.active) {
	z-index: 10;
}

#layerTabsAccordion .nav-tabs .nav-link {
	background: linear-gradient(180deg, #004400 0%, #006600 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-bottom: none !important;
	border-radius: 6px 6px 0 0 !important;
	margin: 0;
	padding: 3px 8px !important;
	color: rgba(255, 255, 255, 0.8);
	transition: all 0.2s ease;
	white-space: nowrap;
	font-size: 0.8rem;
	line-height: 1.2;
	position: relative;
}

#layerTabsAccordion .nav-tabs .nav-link:hover {
	background: linear-gradient(180deg, #005500 0%, #007700 100%) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: white;
}

#layerTabsAccordion .nav-tabs .nav-link.active {
	background: linear-gradient(180deg, #006600 0%, #008800 100%) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	color: white;
	font-weight: 600;
	padding: 6px 8px !important;
	font-size: 0.9rem;
	margin-bottom: -1px;
	z-index: 10;
}

/* Make tabs more compact to fit more in the row */
.nav-tabs .nav-link {
  font-size: 10px !important;
  padding: 4px 8px !important;
}

/* Make tabs span full width and distribute evenly */
.nav-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.nav-tabs .nav-item {
  flex: 0 1 auto !important;
}

/* Base Styling & Dark Mode Overrides */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    padding-top: 56px; /* Height of fixed navbar */
}
body a {
  color: #88ff88;
}

/* Navbar Styling */
.navbar-nav {
  color: #88ff88;
}
body .navbar {
    background-color: var(--bg-secondary) !important;
    border-bottom: 2px solid var(--border-color);
}

body .navbar .btn-toggle {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

body .navbar .btn-toggle:hover {
    background-color: var(--border-color);
}

.navbar-text {
    color: var(--text-secondary) !important;
    margin: 0 10px;
}

body .navbar-brand {
    color: var(--link-color);
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.08em;
}

body .navbar-brand:focus,
body .navbar-brand:hover {
    color: var(--link-hover);
}

body .nav-icon-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

body .nav-icon-link:hover,
body .nav-icon-link:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--link-color);
    color: var(--link-color);
}

body .nav-icon-link .label-text {
    display: none;
}

body .nav-icon-link .badge {
    font-size: 0.65rem;
}

body .nav-icon-link .status-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--link-color);
    box-shadow: 0 0 4px rgba(0,0,0,0.6);
}

/* Offcanvas Styling - Using Bootstrap Defaults, just customizing colors/size */
.offcanvas {
    width: var(--offcanvas-width);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    z-index: 1060 !important;
}

.offcanvas-backdrop {
    z-index: 1055 !important;
}

.offcanvas-start {
    border-right: 2px solid var(--border-color);
}

.offcanvas-end {
    border-left: 2px solid var(--border-color);
}

.offcanvas-header {
    border-bottom: 1px solid var(--border-color);
}

.btn-close-white { /* For dark theme */
     filter: invert(1) grayscale(100%) brightness(200%);
}

/* Main Content Styles */
.main-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

/* Page title styling */
.pagetitle {
    color: var(--link-color);
    font-size: 1.5em;
    font-weight: 600;
    display: block;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

/* Content container for sidebar and main wrapper */
.content-container {
    display: flex;
    min-height: calc(100vh - 56px); /* Full height minus navbar */
    position: relative;
}

/* Left sidebar column */
.left-sidebar {
    background-color: var(--bg-secondary);
    border-right: 2px solid var(--border-color);
    padding: 20px 15px;
    transition: margin-left 0.3s ease;
    width: var(--offcanvas-width);
    flex-shrink: 0;
    overflow-y: auto;
}

.left-sidebar.hidden {
    margin-left: calc(-1 * var(--offcanvas-width));
}

.left-sidebar-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.left-sidebar-header h5 {
    margin: 0;
    color: var(--link-color);
}

/* Main wrapper adjustment when sidebar is visible */
.main-wrapper {
    flex: 1;
    transition: margin-left 0.3s ease;
}

.main-wrapper.sidebar-visible {
    margin-left: 0; /* No longer needed - flexbox handles layout */
}

/* Ensure sections after content-container are always full width */
.content-container ~ .container-fluid,
.content-container ~ .footer {
    margin-left: 0 !important;
    width: 100%;
}

/* Footer Styling */
.footer {
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.85em;
}

/* Mobile responsiveness */
@media (max-width: 991px) {
    .left-sidebar {
        margin-left: calc(-1 * var(--offcanvas-width));
    }
    
    .left-sidebar.visible {
        margin-left: 0;
    }
    
    .main-wrapper.sidebar-visible {
        margin-left: 0;
    }
}


/* Constrain tab images */
.tabup img, .tabdown img { 
  max-width: 100%; 
  height: auto; 
}

/* Constrain grid button images */
.gridbutton img { 
  max-width: 100%; 
  height: auto; 
  object-fit: contain; 
}

/* Avatar layers container - display area with border */
.avatarlayers,
#avatarlayers {
  border: 2px solid #88ff88;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden; /* Prevent scaled layers from covering border */
  position: relative;
}

/* Ensure avatar layers stack properly - don't constrain these */
.avatarlayer { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.avatarlayer img { 
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  margin: 0;
  padding: 0;
}

/* Fix minidoll row layout - allow container to expand */
#doll-overhead {
  overflow: visible;
  height: auto !important;
  min-height: 90px;
  gap: 8px;
}

/* Override only fixed widths, keep float for internal layout but clear parent floats */
.gridcontainer {
  width: auto !important;
}

.gridindex {
  width: auto !important;
  clear: both;
}

/* Contain floated children */
#grid-navigation {
  overflow: auto;
}

#grid-items {
  overflow: auto;
}

/* Clear floats in nested row */
#right-side-container > .row.g-0 {
  clear: both;
}

/* Style pagination with Bootstrap look */
#grid-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
}

#grid-navigation .griditem {
  width: auto !important;
  height: auto !important;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 6px 12px;
  background: white;
  transition: all 0.2s;
}

#grid-navigation .griditem:hover {
  background: #e9ecef;
}

#grid-navigation .griditem1 {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

#grid-navigation .griditem1:hover {
  background: #c82333;
}

#grid-navigation .griditem6 b,
#grid-navigation .griditem11 b {
  font-weight: 600;
  color: #495057;
  font-size: 13px;
}

#grid-navigation a {
  color: #007bff;
  text-decoration: none;
  font-size: 13px;
}

#grid-navigation .griditem1 a {
  color: white;
}

.borderclass        img {padding: 1px; border: 0px;}
.borderclass:hover  img {padding: 0px; border: 1px solid navy;}
.borderclass:active img {padding: 0px; border: 1px solid lightblue;}

/* Fixed: Converted SCSS nesting to plain CSS */
.gridcontainer {
  position: relative;
  float: left;
  left: 2px;
  top: 2px;
  width: 515px;
}

.gridcontainer .gridbutton {
  position: relative;
  float: left; 
  padding: 1px;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.gridcontainer .hangerimage {
  position: absolute;
  top: 2px;
  left: 33px;
}

.gridcontainer .gridlabel {
  position: absolute;
  bottom: 2px;
  left: 22px;
  width: 36px;
  height: 12px;
  text-align: center;
  font-family: sans-serif;
  font-size: 10px;
  font-weight: bold;
  background-color: #6C6C6C;
  color: #ffffff;
}


/* ===== Content from maker.css merged above ===== */

/* Ensure main content row displays as flexbox */
#dollmaker-main > .row {
  display: flex !important;
  flex-wrap: nowrap !important;
}

#doll-container, #right-side-container {
  float: none !important;
}

/* Enhanced pagination button styling */
#grid-navigation .griditem {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px !important;
  height: 32px !important;
}

#grid-navigation .griditem a,
#grid-navigation .griditem b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #495057;
  font-size: 13px;
  font-weight: 500;
}

#grid-navigation .griditem a:hover {
  background: #e9ecef;
  color: #212529;
}

/* Current page indicator */
#grid-navigation .griditem b {
  background: #0d6efd !important;
  color: white !important;
  font-weight: bold;
}

/* Total count styling */
#grid-navigation .griditem11 {
  background: #6c757d !important;
  color: white !important;
  font-weight: bold;
  min-width: 50px !important;
}

#grid-navigation .griditem11 b {
  background: transparent !important;
}

/* Trash button - already styled above */
#grid-navigation .griditem1 a {
  background: transparent !important;
}

#grid-navigation .griditem1 a:hover {
  background: #dc3545 !important;
  opacity: 0.9;
}

/* Hide empty pagination items */
#grid-navigation .griditem a:empty,
#grid-navigation .griditem b:empty {
  display: none;
}

#grid-navigation .griditem:has(a:empty),
#grid-navigation .griditem:has(b:empty) {
  display: none !important;
}

/* Clear button styling */
#doll-clear-button a:hover {
  background: #c82333 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.2s;
}

/* ===== LAYOUT ENHANCEMENTS ===== */

/* Body padding for fixed navbar - CRITICAL! */
body {
    padding-top: 56px !important;
    background-color: #e9ecef; /* Visible background to verify padding */
}

/* Fixed navbar */
.navbar.fixed-top {
    padding: 0.5rem 1rem;
    z-index: 1000;
}

.navbar .btn-toggle {
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: #212529;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar .btn-toggle:hover {
    background-color: #e9ecef;
}

.navbar-brand {
    font-weight: 600;
    color: #0066cc;
}

/* Container padding for spacing */
#dollmaker-main {
    padding-top: 20px;
}

/* ============================================================================ */
/* THEME STYLES (merged from css/theme.css) */
/* ============================================================================ */

/* ============================================================================ */
/* COMPONENT STYLES (moved from embedded <style> blocks in index.php) */
/* ============================================================================ */

/* Newest Player Banner Styling */
.newest-player-banner {
	background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
	border: 2px solid var(--link-color);
	border-radius: 12px;
	padding: 20px;
	margin: 20px auto;
	text-align: center;
	max-width: 500px;
	box-shadow: 0 8px 16px rgba(0, 255, 0, 0.3);
	animation: pulse 2s infinite;
}
.fanfare {
	font-size: 1.2em;
	color: var(--link-hover);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.player-name {
	font-size: 1.5em;
	color: var(--link-color);
	font-weight: 700;
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2);
	animation: glow 2s ease-in-out infinite;
}
.login-instruction {
	background-color: var(--bg-secondary);
	border-left: 4px solid var(--link-color);
	padding: 15px 20px;
	margin: 20px 0;
	color: var(--text-primary);
	font-size: 1.1em;
}
@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.02); }
}
@keyframes glow {
	0%, 100% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2); }
	50% { text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.6), 0 0 50px rgba(255, 255, 255, 0.4); }
}

/* ========================================
   LAYER ANIMATION EFFECTS
   ======================================== */

/* Base layer styling with transition support */
.avatarlayer {
  opacity: 1;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Loading state - fade out */
.avatarlayer.layer-loading {
  opacity: 0.3;
}

/* Loaded state - fade in with subtle scale */
.avatarlayer.layer-loaded {
  animation: fadeInLayer 0.4s ease-out forwards;
}

@keyframes fadeInLayer {
  from {
    opacity: 0.3;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Sequential cascade effect for full avatar loads */
.avatarlayers.loading-sequence .avatarlayer {
  opacity: 0;
  animation: cascadeFadeIn 0.5s ease-out forwards;
}

@keyframes cascadeFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered delays for sequential loading (up to 32 layers) */
.avatarlayers.loading-sequence .avatarlayer:nth-child(1) { animation-delay: 0ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(2) { animation-delay: 80ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(3) { animation-delay: 160ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(4) { animation-delay: 240ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(5) { animation-delay: 320ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(6) { animation-delay: 400ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(7) { animation-delay: 480ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(8) { animation-delay: 560ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(9) { animation-delay: 640ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(10) { animation-delay: 720ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(11) { animation-delay: 800ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(12) { animation-delay: 880ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(13) { animation-delay: 960ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(14) { animation-delay: 1040ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(15) { animation-delay: 1120ms; }
.avatarlayers.loading-sequence .avatarlayer:nth-child(16) { animation-delay: 1200ms; }

/* ========================================
   SPECIFIC LAYER EFFECTS (BY CLASS NAME)
   Clean class names without leading digits
   ======================================== */

/* Breathing effect for Backgrounds layer */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
/* ========================================
   DYNAMIC EFFECT CLASSES
   Effects are applied via .effect-[name] classes
   ======================================== */

/* Breathe effect - noticeable scale animation with brightness */
@keyframes breathe {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.06);
    filter: brightness(1.12);
  }
}

.avatarlayers.effects-enabled .avatarlayer.effect-breathe {
  animation: breathe 3.5s ease-in-out infinite !important;
  will-change: transform, filter;
}

/* Glow effect - pulsating glow/drop-shadow */
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); }
  50% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)); }
}

.avatarlayers.effects-enabled .avatarlayer.effect-glow {
  animation: glow 3s ease-in-out infinite !important;
}

/* Float effect - gentle up/down motion */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.avatarlayers.effects-enabled .avatarlayer.effect-float {
  animation: float 4s ease-in-out infinite !important;
}

/* Shimmer effect - brightness/contrast variation */
@keyframes shimmer {
  0% { filter: brightness(1) contrast(1); }
  50% { filter: brightness(1.3) contrast(1.2); }
  100% { filter: brightness(1) contrast(1); }
}

.avatarlayers.effects-enabled .avatarlayer.effect-shimmer {
  animation: shimmer 5s ease-in-out infinite !important;
}

/* Sway effect - gentle rotation */
@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}

.avatarlayers.effects-enabled .avatarlayer.effect-sway {
  animation: sway 6s ease-in-out infinite !important;
  transform-origin: center top;
}

/* Sparkle effect - brightness with drop shadow */
@keyframes sparkle {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 3px rgba(255, 255, 255, 0.4)); }
  50% { filter: brightness(1.25) drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)); }
}

.avatarlayers.effects-enabled .avatarlayer.effect-sparkle {
  animation: sparkle 4s ease-in-out infinite !important;
}

/* Ambient effect - color shifting */
@keyframes ambient {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  33% { filter: hue-rotate(15deg) brightness(1.1); }
  66% { filter: hue-rotate(-15deg) brightness(0.95); }
}

.avatarlayers.effects-enabled .avatarlayer.effect-ambient {
  animation: ambient 12s ease-in-out infinite !important;
}

/* Shadow effect - drop shadow following the alpha channel (masked shadow) */
.avatarlayers.effects-enabled .avatarlayer.effect-shadow {
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.7)) !important;
}

/* REMOVED DUPLICATE - using test version above */

/* Reduced motion support - disable all animations */
@media (prefers-reduced-motion: reduce) {
  .avatarlayer,
  .avatarlayer.layer-loading,
  .avatarlayer.layer-loaded,
  .avatarlayers.loading-sequence .avatarlayer,
  .avatarlayers.effects-enabled .avatarlayer {
    animation: none !important;
    transition: none !important;
  }
  
  .avatarlayers.initial-loading::before {
    display: none;
  }
}
/* Ad Centering */
#aswift_2_host {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

/* Ad Container Centering */
.card-body ins.adsbygoogle {
  text-align: center !important;
}