/* Extracted verbatim from the inline <style> blocks that used to live in
   header.php. Served as a cacheable file instead of ~44 KB of CSS re-sent
   inside the markup of every single page view.

   themePath() calls became paths relative to this directory, the same form
   the other css/main/*.css files already use.

   LOAD ORDER IS LOAD-BEARING. header-base.css must come before
   languageselector/responsiveheader/accountui/accountdelete/serverrates,
   and header-shell.css must come after them -- that is the order the three
   inline blocks sat in. See the <link> comments in header.php. */

		html {
			height: 100%;
			background: #dceef8;
		}

		/* ══ FLOATING FLASH NOTIFICATION ══
		   Fixed to the viewport, above the sticky header, so a confirmation lands
		   where the player is already looking instead of at the bottom of the page. */
		.trival-toast-stack {
			position: fixed;
			top: 14px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 100000;
			display: flex;
			flex-direction: column;
			gap: 8px;
			width: max-content;
			max-width: min(560px, calc(100vw - 24px));
			pointer-events: none;
		}

		.trival-toast {
			position: relative;
			display: flex;
			align-items: center;
			gap: 10px;
			overflow: hidden;
			box-sizing: border-box;
			padding: 12px 12px 12px 14px;
			border: 1px solid #7fc48f;
			border-radius: 12px;
			background: linear-gradient(180deg, #f4fff7 0%, #e4f8ea 100%);
			box-shadow: 0 10px 28px rgba(18, 60, 32, 0.22);
			color: #1e5c33;
			font-size: 13px;
			font-weight: 700;
			line-height: 1.4;
			pointer-events: auto;
			/* Starts off-screen; the .is-shown class added on the next frame animates
			   it in. Setting the visible state directly would flash it in place. */
			opacity: 0;
			transform: translateY(-16px);
			transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
		}

		.trival-toast.is-shown {
			opacity: 1;
			transform: translateY(0);
		}

		.trival-toast.is-leaving {
			opacity: 0;
			transform: translateY(-12px);
		}

		.trival-toast-icon {
			flex: 0 0 auto;
			display: inline-flex;
			color: #37995a;
		}

		.trival-toast-icon svg {
			width: 20px;
			height: 20px;
		}

		.trival-toast-copy {
			flex: 1 1 auto;
			min-width: 0;
		}

		.trival-toast-close {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			padding: 0;
			border: 0;
			border-radius: 6px;
			background: transparent;
			color: #4b7a5c;
			cursor: pointer;
			transition: background .15s ease, color .15s ease;
		}

		.trival-toast-close:hover {
			background: rgba(55, 153, 90, 0.16);
			color: #1e5c33;
		}

		/* Progress bar so the auto-dismiss is visible rather than the toast just
		   vanishing mid-read. Width is driven by the animation, not by JS. */
		.trival-toast-timer {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 3px;
			width: 100%;
			background: rgba(55, 153, 90, 0.55);
			transform-origin: left center;
		}

		.trival-toast.is-shown .trival-toast-timer {
			animation: trivalToastTimer 8s linear forwards;
		}

		/* Hovering pauses the countdown -- a long message that disappears while it is
		   being read is worse than one that needs a click. */
		.trival-toast:hover .trival-toast-timer,
		.trival-toast:focus-within .trival-toast-timer {
			animation-play-state: paused;
		}

		@keyframes trivalToastTimer {
			from { transform: scaleX(1); }
			to   { transform: scaleX(0); }
		}

		@media (max-width: 600px) {
			.trival-toast-stack {
				top: 10px;
				left: 12px;
				right: 12px;
				width: auto;
				max-width: none;
				transform: none;
			}

			.trival-toast {
				font-size: 12px;
			}
		}

		@media (prefers-reduced-motion: reduce) {
			.trival-toast {
				transition: none;
			}

			.trival-toast.is-shown .trival-toast-timer {
				animation: none;
			}
		}

		body {
			min-height: 100vh !important;
			display: flex !important;
			flex-direction: column !important;
			background: #fcfeff url('../../assets/background-trivalro.png') no-repeat center top scroll !important;
			background-size: 120% 860px !important;
		}

		/* Purchase module only: remove the inherited blue page background from
		   the top/header area. The store section keeps its own background-3.jpg. */
		body.purchase-module-page {
			background: #fff !important;
			background-image: none !important;
		}

		body.purchase-module-page #main-wrapper,
		body.purchase-module-page #content-col,
		body.purchase-module-page #content-box,
		body.purchase-module-page #content-box .content-inner {
			background-color: transparent !important;
			background-image: none !important;
		}

		/* ── Custom Transparent Scrollbar ── */

		/* Width of the scrollbar */
		::-webkit-scrollbar {
			width: 12px;
			background-color: transparent;
		}

		/* (Thumb) */
		::-webkit-scrollbar-thumb {
			background-color: rgba(91, 159, 201, 0.86);
			border-radius: 10px;
			border: 3px solid transparent;
			background-clip: padding-box;
		}

		::-webkit-scrollbar-thumb:hover {
			background-color: rgba(41, 92, 132, 0.7);
		}

		#main-wrapper {
			flex: 1 0 auto !important;
		}

		#site-footer {
			flex-shrink: 0 !important;
		}

		/* Final authoritative rail for Server Information. This block is after
		   every linked stylesheet, so responsive/header CSS cannot override it. */
		body.server-info-page .server-center-section .server-center-inner {
			width: min(1130px, calc(100vw - 48px)) !important;
			max-width: 1130px !important;
			margin-left: auto !important;
			margin-right: auto !important;
			left: 25px !important;
		}

		body.server-info-page .server-overview-panel,
		body.server-info-page .server-class-panel {
			width: 100% !important;
			max-width: none !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}

		/* Vending uses the exact same visible header endpoints as Server Info:
		   align the vendor content rail to the TrivalRO logo on the left and the
		   language selector on the right. */
		body.vending-page .vendor-section .vendor-inner {
			width: min(1000px, calc(100vw - 48px)) !important;
			max-width: 1000px !important;
			margin-left: auto !important;
			margin-right: auto !important;
			left: 0 !important;
		}

		body.vending-page .vendor-toolbar,
		body.vending-page .vendor-grid,
		body.vending-page .vendor-empty,
		body.vending-page .vendor-shop-panel,
		body.vending-page .vendor-pagination {
			width: 100% !important;
			max-width: none !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}

		/* Map Statistics uses a compact 1000px data rail so Overview, Search,
		   pagination and map cards all align to the same width. */
		body.mapstats-page .ms-section .ms-inner {
			width: min(1000px, calc(100vw - 48px)) !important;
			max-width: 1000px !important;
			margin-left: auto !important;
			margin-right: auto !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

		body.mapstats-page .ms-section .ro-window,
		body.mapstats-page .ms-section .ms-pager {
			width: 100% !important;
			max-width: none !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}

		/* All Ranking module pages use one exact 1000px content rail. Keep the
		   decorative left/right characters tied to that rail and pull them inward
		   so they remain fully visible rather than being clipped at the viewport. */
		body.ranking-module-page .pvp-section .pvp-inner,
		body.ranking-module-page .ranking-page-section .ranking-inner,
		body.ranking-module-page .legacy-ranking-section .ranking-inner {
			width: min(1000px, calc(100vw - 48px)) !important;
			max-width: 1000px !important;
			margin-left: auto !important;
			margin-right: auto !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

		body.ranking-module-page .ranking-legacy-table,
		body.ranking-module-page .pvp-table,
		body.ranking-module-page .ranking-filter-form,
		body.ranking-module-page .ranking-legacy-filter {
			width: 100% !important;
			max-width: none !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}

		body.ranking-module-page .pvp-section .is-chibi-left {
			left: -350px !important;
			z-index: 2 !important;
			pointer-events: none !important;
		}

		body.ranking-module-page .pvp-section .is-chibi-right {
			right: -350px !important;
			z-index: 2 !important;
			pointer-events: none !important;
		}

		body.ranking-module-page .pvp-section .is-chibi-left img,
		body.ranking-module-page .pvp-section .is-chibi-right img {
			max-height: 330px !important;
		}

		/* Ranking content always stays above the decorative art. At the 1000px
		   desktop rail the characters now live in the free side gutters instead
		   of sitting underneath the table rows. */
		body.ranking-module-page .pvp-title,
		body.ranking-module-page .pvp-sub,
		body.ranking-module-page .ranking-filter-form,
		body.ranking-module-page .ranking-legacy-filter,
		body.ranking-module-page .pvp-table,
		body.ranking-module-page .ranking-legacy-table,
		body.ranking-module-page .legacy-ranking-title,
		body.ranking-module-page .legacy-ranking-title + h3 {
			position: relative !important;
			z-index: 3 !important;
		}

		/* Features / Quests / PvP: one compact 1000px public-content rail. */
		body.feature-content-page .trival-features-section .trival-features-inner,
		body.feature-content-page .feature-page-section .feature-page-inner {
			width: min(1000px, calc(100vw - 48px)) !important;
			max-width: 1000px !important;
			margin-left: auto !important;
			margin-right: auto !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

		/* Admin/GM menu width is controlled globally by accountui.css so every
		   admin module shares one 1000px rail instead of page-specific sizing. */

		@media (max-width: 1200px) {
			body.server-info-page .server-center-section .server-center-inner,
			body.vending-page .vendor-section .vendor-inner,
			body.mapstats-page .ms-section .ms-inner,
			body.ranking-module-page .pvp-section .pvp-inner,
			body.ranking-module-page .ranking-page-section .ranking-inner,
			body.ranking-module-page .legacy-ranking-section .ranking-inner {
				width: calc(100vw - 24px) !important;
				left: 0 !important;
			}

			body.ranking-module-page .pvp-section .is-chibi-left,
			body.ranking-module-page .pvp-section .is-chibi-right {
				display: none !important;
			}
		}