/* Shared bazaar balance, using the theme's framed parchment and key colors. */
.bazaar-wallet {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 4px 2px 8px;
	border-bottom: 1px solid #b49a75; color: #5a2800;
	font: 12px/1.5 Verdana, Arial, sans-serif;
}
.bazaar-wallet-balance { display: flex; flex-direction: column; min-width: 0; }
.bazaar-wallet-balance strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.bazaar-wallet-amount { display: flex; align-items: center; gap: 5px; min-height: 24px; }
#ContentColumn .bazaar-wallet-amount img { width: 20px !important; height: 20px; image-rendering: pixelated; }
#ContentColumn .bazaar-wallet-balance > span { font-size: 11px !important; }
.bazaar-wallet .bazaar-wallet-buy {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 120px;
	box-sizing: border-box; min-height: 44px; padding: 0 10px;
	background: url(images/global/buttons/sbutton_green.gif) no-repeat center / 100% 30px;
	color: #ffdfa0 !important; font: bold 12px/1 Verdana, Arial, sans-serif; text-decoration: none;
	text-shadow: 0 1px 1px #000; touch-action: manipulation;
}
.bazaar-wallet .bazaar-wallet-buy:hover { background-image: url(images/global/buttons/sbutton_green_over.gif); }
.bazaar-wallet a:focus-visible { outline: 3px solid #5a2800; outline-offset: 3px; }

#MobileBottomNav, #MobileMenuPanel { display: none; }
@media screen and (max-width: 900px) {
	/* The legacy inner table has a 100% width plus side margins. Let its
	   width subtract those margins so the filters stay inside the frame. */
	#ContentColumn .InnerTableContainer:has(.ib-page) { width: auto !important; min-width: 0; margin: 3px !important; }
	#ContentColumn .ib-page, #ContentColumn .ib-page form, #ContentColumn .ib-filterbar,
	#ContentColumn .ib-filters, #ContentColumn .ib-field,
	#ContentColumn .cb-filters, #ContentColumn .cb-filter { box-sizing: border-box; min-width: 0; max-width: 100%; }
	#ContentColumn .ib-filterbar { padding: 8px; border: 1px solid #d2bb96; border-radius: 7px; background: #f5e8ce; margin: 8px 0 10px; }
	#ContentColumn .ib-filters { gap: 6px 8px; }
	#ContentColumn .ib-field { gap: 2px; }
	#ContentColumn .ib-field > span, #ContentColumn .cb-filter > span:first-child {
		font-size: 10px !important; line-height: 13px; font-weight: normal; text-transform: none; letter-spacing: 0; opacity: 1;
	}
	#ContentColumn .ib-field select, #ContentColumn .cb-filters select {
		appearance: none; -webkit-appearance: none; box-sizing: border-box;
		width: 100%; min-width: 0; max-width: 100% !important; min-height: 30px; height: 30px;
		padding: 2px 22px 2px 8px; border: 1px solid #bda581; border-radius: 5px;
		background-color: #fff7e8; box-shadow: none; color: #5a2800;
		font: normal 13px/1.2 Verdana, Arial, sans-serif;
		font-size: 13px !important;
		transition: border-color .15s ease, box-shadow .15s ease;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='m1 1 3 3 3-3' fill='none' stroke='%235a2800' stroke-width='1.3'/%3E%3C/svg%3E");
		background-repeat: no-repeat; background-position: right 7px center;
	}
	#ContentColumn .ib-field select:focus-visible, #ContentColumn .cb-filters select:focus-visible { outline: 2px solid #887043; outline-offset: 1px; }
	#ContentColumn .ib-field-actions { margin-top: 0; gap: 6px; }
	#ContentColumn .ib-check { min-height: 36px; font-size: 12px !important; }
	#ContentColumn .ib-filterbtn { min-height: 30px; padding: 0 14px; font-size: 12px; border-radius: 5px; }
	#ContentColumn .cb-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 8px; padding: 8px; }
	#ContentColumn .cb-filter { display: flex !important; }
	#ContentColumn .cb-filter-name { grid-column: 1 / -1; }
	#ContentColumn .cb-range { display: flex; gap: 4px; min-width: 0; }
	#ContentColumn .cb-filters .cb-field {
		box-sizing: border-box; width: 100%; min-width: 0; height: 30px; padding: 3px 8px !important;
		font-size: 13px !important; border: 1px solid #bda581; border-radius: 5px; box-shadow: none; background: #fff7e8;
	}
	#ContentColumn .cb-range .cb-field { flex: 1 1 0; width: 0 !important; }
	#ContentColumn .cb-filter-actions { gap: 10px; justify-content: flex-end; align-items: center; }
	#ContentColumn .cb-filter-actions button { height: 30px; padding: 0 12px; border-radius: 5px; font-size: 12px !important; }
	#ContentColumn .cb-filter-actions a { font-size: 11px !important; }
	:root { --mobile-bottom-space: calc(68px + env(safe-area-inset-bottom, 0px)); }
	html { scroll-padding-bottom: calc(var(--mobile-bottom-space) + 12px); }
	body { padding-bottom: var(--mobile-bottom-space); }
	#MobileBottomNav {
		display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
		/* Leave the unsafe area unpainted: page content can continue beneath
		   browser chrome instead of extending an opaque green footer into it. */
		position: fixed; bottom: calc(6px + env(safe-area-inset-bottom, 0px));
		left: calc(12px + env(safe-area-inset-left, 0px));
		right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 997;
		width: auto; max-width: 360px; margin-inline: auto;
		box-sizing: border-box; padding: 3px;
		border: 1px solid #786b48; border-radius: 20px;
		background: #243529; box-shadow: 0 2px 8px rgba(0,0,0,.3);
	}
	#MobileBottomNav a {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 1px; min-width: 0; min-height: 48px; box-sizing: border-box; padding: 2px;
		border-radius: 16px; color: #ddd6c3;
		font: 9px/11px Verdana, Arial, sans-serif; text-align: center; text-decoration: none;
		touch-action: manipulation; -webkit-tap-highlight-color: transparent;
		transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
	}
	#MobileBottomNav img { flex-shrink: 0; width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
	#MobileBottomNav .mobile-dock-icon { position: relative; display: block; width: 32px; height: 32px; transition: transform .14s ease; }
	#MobileBottomNav .mobile-dock-coin { position: absolute; width: 16px; height: 16px; right: -3px; bottom: -1px; filter: drop-shadow(0 1px 1px #10180f); }
	#MobileBottomNav a:active .mobile-dock-icon { transform: scale(.92); }
	#MobileBottomNav span { max-width: 100%; }
	#MobileBottomNav a[aria-current="page"] { background: #40513b; color: #ffe1a2; box-shadow: inset 0 0 0 1px #86774f; }
	#MobileBottomNav a:focus-visible { outline: 3px solid #ffdc8d; outline-offset: -4px; }

	/* The mobile menu shares the dock's palette and round corners. The
	   desktop menu is retained intact, with one server-side source of links. */
	#MenuColumn { display: none !important; }
	#MobileMenuScrim { display: block; touch-action: none; }
	#MobileMenuButton { width: 44px; height: 44px; box-sizing: border-box; border-radius: 12px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
	#MobileMenuButton { transition: background-color .14s ease; }
	#MobileMenuButton[aria-expanded="true"] { background: #40513b; }
	#MobileMenuButton:focus-visible, #MobileMenuPanel :focus-visible { outline: 2px solid #ffdc8d; outline-offset: -3px; }
	.MobileMenuIcon { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 19px; height: 20px; }
	.MobileMenuIcon span { display: block; width: 19px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .16s ease, opacity .16s ease; }
	#MobileMenuButton[aria-expanded="true"] .MobileMenuIcon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	#MobileMenuButton[aria-expanded="true"] .MobileMenuIcon span:nth-child(2) { opacity: 0; }
	#MobileMenuButton[aria-expanded="true"] .MobileMenuIcon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
	#MobileMenuPanel {
		display: block; position: fixed; z-index: 999;
		top: calc(66px + env(safe-area-inset-top, 0px));
		left: calc(12px + env(safe-area-inset-left, 0px));
		width: min(320px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
		max-height: calc(100vh - 90px);
		max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
		box-sizing: border-box; padding: 6px 8px 10px;
		border: 1px solid #786b48; border-radius: 18px; background: #243529; color: #ddd6c3;
		box-shadow: 0 6px 20px rgba(0,0,0,.3); overflow-y: auto; overscroll-behavior: contain;
		font: 12px/1.4 Verdana, Arial, sans-serif; text-align: left;
		visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
		transition: opacity .16s ease, transform .16s ease;
	}
	#MobileMenuToggle:checked ~ #MobileMenuPanel { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
	.mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-left: 10px; color: #ffe1a2; }
	.mobile-menu-close { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #ddd6c3; font: 26px/1 Verdana, sans-serif; cursor: pointer; }
	.mobile-menu-group { border-top: 1px solid #40513b; }
	.mobile-menu-group summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 10px; cursor: pointer; list-style: none; font-weight: bold; border-radius: 10px; }
	.mobile-menu-group summary::-webkit-details-marker { display: none; }
	.mobile-menu-group summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: auto; transition: transform .14s ease; }
	.mobile-menu-group[open] summary::after { transform: rotate(225deg); }
	.mobile-menu-group summary img { object-fit: contain; image-rendering: pixelated; }
	#MobileMenuPanel a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 8px 12px 8px 44px; border-radius: 10px; color: #ddd6c3; text-decoration: none; }
	#MobileMenuPanel a[aria-current="page"] { background: #40513b; color: #ffe1a2; box-shadow: inset 3px 0 #bda56c; }
	#MobileMenuPanel a, #MobileMenuPanel summary, .mobile-menu-close { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .14s ease; }
	#MobileMenuPanel a:active, #MobileMenuPanel summary:active, .mobile-menu-close:active { background: #40513b; }
	.mobile-menu-external { margin-left: auto; padding-left: 8px; }
}
@media screen and (max-width: 900px) and (hover: hover) {
	#MobileBottomNav a:hover, #MobileMenuPanel a:hover, #MobileMenuPanel summary:hover, .mobile-menu-close:hover { background-color: #354631; }
}
@media screen and (max-width: 360px) {
	#MobileBottomNav a { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	#MobileBottomNav a, #MobileBottomNav .mobile-dock-icon, #MobileMenuPanel, #MobileMenuScrim,
	#MobileMenuButton, .MobileMenuIcon span, #MobileMenuPanel summary::after { transition: none; }
	#MobileBottomNav a:active .mobile-dock-icon { transform: none; }
}
@media print { #MobileBottomNav, #MobileMenuPanel { display: none; } }