/* Full viewport workspace: the page never scrolls, only the optional guide does. */
.retroSite.page-carte { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.retroSite.page-carte .frame { height: 100dvh; min-height: 0; }
.page-carte .siteMain { min-height: 0; overflow: hidden; }
.carteStage { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; background: var(--surface-inset); }
.mapToolbar
{
	position: relative;
	z-index: 30;
	display: flex;
	align-items: center;
	flex: none;
	flex-wrap: wrap;
	gap: 26px;
	min-height: 62px;
	padding: 8px 22px;
	border-bottom: 2px solid var(--line-strong);
	background: linear-gradient(var(--surface-raised), var(--surface-muted));
	box-shadow: inset 0 1px #fff8, 0 2px 4px #0001;
}
.mapToolbarTitle { min-width: 155px; }
.mapToolbarTitle h1 { font-size: 22px; margin: 0; }
.mapToolbarModes { display: flex; align-items: center; flex: none; gap: inherit; }
.mapToolbarSeparator { flex: 0 0 1px; height: 28px; background: var(--line-strong); }
.mapToolbarFilters { display: flex; align-items: center; flex: none; gap: 16px; }
.mapRankFilters { display: flex; align-items: center; gap: 8px; }
.mapExploFilters { display: flex; align-items: center; gap: 8px; }
.mapExploFilters > .mapToolbarSeparator { margin-right: 8px; }
.mapStatFilter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; height: 40px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-raised); box-shadow: inset 0 1px #fff9; cursor: pointer; }
.mapStatFilterLabel { display: flex; align-items: center; gap: 4px; color: var(--ink-soft); font: 600 9px/1 var(--body); }
.mapStatFilterLabel img { width: 12px; height: 12px; }
.mapStatFilter select { width: 58px; margin: 0; padding: 0 2px; border: 0; color: var(--ink); background: transparent; font: 700 13px/1.2 var(--body); cursor: pointer; }
.mapStatFilter:hover, .mapStatFilter:focus-within, .mapStatFilter.isLimited { border-color: var(--portal); }
.mapStatFilter.isLimited { background: var(--portal-pale); }
.mapRankFilter { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; cursor: pointer; }
.mapRankFilter input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mapRankFilter .mapSpellIcon { z-index: 1; pointer-events: none; }
.mapRankFilterState { position: absolute; inset: 0; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-raised); box-shadow: inset 0 1px #fff9; transition: background-color .15s, border-color .15s; }
.mapRankFilterState::after { content: ""; position: absolute; z-index: 1; right: -3px; bottom: -3px; display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--line-strong); border-radius: 50%; color: #fff; background: var(--surface-raised); font: 700 10px/1 var(--body); }
.mapRankFilter input:checked ~ .mapRankFilterState { border-color: var(--portal); background: var(--portal-pale); }
.mapRankFilter input:checked ~ .mapRankFilterState::after { content: "✓"; border-color: var(--portal); background: var(--portal); }
.mapRankFilter input:focus-visible ~ .mapRankFilterState { outline: 3px solid var(--portal); outline-offset: 3px; }
.mapRankFilter:hover .mapRankFilterState { border-color: var(--portal); }
.carteStage .mapModeNav { display: flex; gap: 5px; margin: 0; }
.carteStage .mapModeLink
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 40px;
	padding: 6px 15px;
	border: 1px solid var(--line-strong);
	border-radius: 5px;
	color: var(--text-muted);
	background: var(--surface-raised);
	font: bold 12px var(--body);
	text-decoration: none;
	box-shadow: inset 0 1px #fff9;
}
.carteStage .mapModeLink .mapSpellIcon { --map-spell-icon-size: 24px; }
.carteStage .mapModeLink:hover { border-color: var(--portal); color: var(--portal-dark); background: var(--portal-pale); }
.carteStage .mapModeLink.isActive { color: #fff; border-color: var(--portal-dark); background: var(--button-background); box-shadow: inset 0 1px var(--portal-light), 0 2px 2px #0876a622; }
.carteStage .mapModeLink.isLoading::after { content: "…"; }
.mapGuideToggle
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-left: auto;
	min-height: 37px;
	padding: 7px 13px;
	color: var(--ink-soft);
	border: 1px solid var(--line-strong);
	border-radius: 5px;
	background: var(--surface-raised);
	font: bold 11px var(--body);
	cursor: pointer;
}
.mapGuideToggle > span:first-child { font-size: 19px; line-height: 1; }
.mapGuideToggle:hover, .mapGuideToggle[aria-expanded="true"] { background: var(--portal-pale); border-color: var(--portal); color: var(--portal-dark); }
.carteStage .mapModeError { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 85%; margin: 0; padding: 10px 16px; border: 1px solid #ab6146; border-radius: 5px; color: #873a27; background: #f5e3c8; font-size: 12px; box-shadow: 0 3px 10px #0003; }
.carteStage .mapSection { display: flex; flex: 1; height: auto; min-height: 0; overflow: hidden; }
.carteStage .mapLayout { position: relative; flex: 1; height: auto; min-height: 0; flex-direction: row; }
.carteStage .mapContextPanel
{
	display: none;
	order: 1;
	position: relative;
	flex: 0 0 310px;
	width: 310px;
	height: auto;
	max-height: none;
	padding: 20px 16px;
	overflow: auto;
	border: 0;
	border-left: 2px solid var(--line-strong);
	color: var(--ink-soft);
	background: var(--surface);
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) var(--surface);
	overscroll-behavior: contain;
}
.carteStage.isGuideOpen .mapContextPanel { display: block; }
.carteStage .mapRoot { flex: 1; order: 0; min-height: 0; min-width: 0; background: var(--night); }
.carteStage .mapRoot iframe, .carteStage #wall, .carteStage #loading { height: 100%; width: 100%; }
.carteStage .mapContextBlock { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.carteStage .mapContextBlock h2 { margin-bottom: 9px; color: var(--ink); font-size: 21px; letter-spacing: -.03em; }
.carteStage .mapContextBlock h3 { margin: 0 0 10px; color: var(--ink-soft); font: bold 13px/1.5 var(--body); letter-spacing: 0; text-transform: none; }
.carteStage .mapContextBlock p { display: block; margin: 0; overflow: visible; color: var(--ink-soft); font: 13px/1.6 var(--body); }
.carteStage .mapContextBlock strong { color: var(--ink); }
.carteStage .mapRankLegend { grid-template-columns: 1fr; gap: 0; }
.carteStage .mapRankLegend li { display: grid; grid-template-columns: 32px 1fr; padding: 10px 0; gap: 3px 10px; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.carteStage .mapRankLegend li:last-child { border-bottom: 0; }
.carteStage .mapRankLegend .mapSpellIcon { grid-row: span 2; }
.carteStage .mapRankLegend strong { font: bold 12px/1.3 var(--body); }
.carteStage .mapRankLegend small { display: block; color: var(--text-muted); font: 11px/1.5 var(--body); }
.carteStage .mapCriteriaLegend { display: grid; grid-template-columns: 1fr; gap: 0; }
.carteStage .mapCriteriaLegend li { display: grid; grid-template-columns: 24px 1fr; padding: 8px 0; gap: 10px; text-align: left; border: 0; border-radius: 0; background: none; }
.carteStage .mapCriteriaLegend img { width: 23px; height: 23px; }
.carteStage .mapCriteriaLegend strong { font: bold 12px/1.4 var(--body); }
.carteStage .mapCriteriaLegend small { display: block; color: var(--text-muted); font-size: 11px; }
.carteStage .mapCheckHint { padding: 0 0 0 12px; border: 0; border-left: 3px solid var(--portal); border-radius: 0; background: none; }
.carteStage .mapCheckHint h3 { color: var(--portal-dark); }
.carteStage .mapStrategyInfo { padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.carteStage .mapUnfarmableInfo { padding-bottom: 16px; }
.carteStage .mapUnfarmableLegend { display: flex; align-items: center; gap: 9px; }
.carteStage .mapUnfarmableSwatch { flex: 0 0 22px; height: 22px; border: 1px solid #8e836b; border-radius: 3px; background: repeating-linear-gradient(-45deg, #b5ac9255 0 2px, transparent 2px 6px), #58574c; }
.carteStage [hidden] { display: none !important; }
.mapGuideClose { display: none; position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink-soft); background: var(--surface-raised); font: 22px/1 var(--body); cursor: pointer; }
.mapQuickHelp { padding-top: 0; }
.mapQuickHelp summary { cursor: pointer; color: var(--ink-soft); font: bold 13px/1.5 var(--body); }
.mapQuickHelp .stepList { display: grid; grid-template-columns: 1fr; margin-top: 14px; gap: 12px; }
.mapQuickHelp .stepList li { padding: 0; border: 0; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.mapQuickHelp .stepList li::before { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.mapQuickHelp .stepList strong { display: block; margin-bottom: 3px; color: var(--ink-soft); font-size: 12px; }
.carteStage #loading { background: var(--surface); }
.carteStage .loader { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--portal); background: none; box-shadow: none; animation: mapLoading 1s linear infinite; }
@keyframes mapLoading { to { transform: rotate(360deg); } }
@media (max-width: 1280px)
{
	.mapToolbar { gap: 16px; }
}
@media (max-width: 1160px)
{
	.mapGuideToggle [data-guide-toggle-label] { display: none; }
}
@media (max-width: 1050px)
{
	.mapToolbar { gap: 16px; padding-inline: 16px; }
	.mapToolbarTitle { min-width: 130px; }
	.carteStage.isGuideOpen .mapContextPanel { position: absolute; z-index: 25; inset: 0 0 0 auto; width: min(320px, 94%); height: 100%; box-shadow: -8px 0 28px #0005; padding-top: 24px; }
	.mapGuideClose { display: block; }
	.carteStage .mapContextBlock h2 { padding-right: 25px; }
}
@media (max-width: 760px)
{
	.retroSite.page-carte .frame { height: 100dvh; margin-bottom: 0; }
	.mapToolbar { min-height: 60px; gap: 9px; padding: 8px 12px; flex-wrap: wrap; }
	.mapToolbarTitle { display: none; }
	.mapToolbarFilters { flex-basis: 100%; order: 1; gap: 12px; padding-block: 3px; }
	.mapExploFilters > .mapToolbarSeparator { margin-right: 4px; }
	.carteStage .mapModeNav { gap: 4px; }
	.carteStage .mapModeLink { gap: 6px; min-height: 35px; padding: 5px 9px; font-size: 11px; }
	.carteStage .mapModeLink .mapSpellIcon { --map-spell-icon-size: 22px; }
	.mapGuideToggle { padding: 5px 9px; min-height: 35px; font-size: 10px; gap: 5px; }
}
@media (max-width: 410px)
{
	.carteStage .mapModeLink { padding-inline: 7px; gap: 5px; }
	.carteStage .mapModeLink .mapSpellIcon { --map-spell-icon-size: 20px; }
	.mapGuideToggle [data-guide-toggle-label] { display: none; }
	.mapGuideToggle { padding-inline: 11px; }
}