/* The editor uses the native card corners, texture, buttons and stat labels. */
body.areaEditMode #settings{display:none}
body #areaQuickEditor{grid-column:2;grid-row:1;margin:0;padding:14px 17px 10px;min-width:0;scroll-margin-top:10px}
#areaQuickEditor [hidden]{display:none!important}
.areaEditorHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.areaEditorHeader h2{font-size:19px;line-height:1.4;color:#f2e3bb;font-weight:600;letter-spacing:-.5px;margin:3px 0 0}
.areaEditorHeader .areaQuickEyebrow{display:block;font-size:8px;line-height:10px;letter-spacing:1.4px;padding:0;border:0}
body .areaEditorHeader #areaSwapDone{--action-height:30px;--action-padding:12px;font-size:11px}
.areaEditorSteps{display:flex;list-style:none;padding:0;margin:0 0 15px;gap:9px}
.areaEditorSteps li{display:flex;align-items:center;gap:5px;flex:1;font-size:10px;color:#8fa7b3;white-space:nowrap}
.areaEditorSteps li>span{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:23px;background:#1d2c345c;border-bottom:2px solid #75838b55;color:#afbcc2;font-size:11px}
.areaEditorSteps .nativeDigits{gap:1px}.areaEditorSteps .nativeDigits img{height:12px;width:auto}
.areaEditorSteps li[data-active=true]{color:#f3e7c3}.areaEditorSteps li[data-active=true]>span{border-bottom-color:#e7d39f;background:#56645844}
.areaEditorSteps li[data-complete=true]>span{border-bottom-color:#82b0a9}
.areaEditorTabs{display:flex;gap:7px;margin-bottom:14px}
body .areaEditorTabs button{--action-height:34px;flex:1;--action-padding:12px;font-size:12px}
.areaPrioritySection{margin-bottom:18px}.areaPrioritySection>span{font-size:11px;color:#b6c7ce;display:block;margin-bottom:9px;line-height:1.5}
.areaPriorityChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
/* Original Clear/Edit caps and caption-free center stay at the same scale. */
body #areaPriorityChoices button{--action-height:38px;--action-padding:20px;width:100%;min-width:0;font-size:11.5px;font-weight:500;text-align:center}
.areaMapHeading{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:8px}
.areaMapHeading strong{font-weight:500;font-size:11px;color:#d5dee0}.areaMapHeading>span{font-size:9px;color:#a9bac1}
.areaPositionMap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,59px);gap:5px;margin:0 0 10px;position:relative}
.areaPositionChoice{min-width:0;min-height:0;padding:5px 1px;border:4px solid transparent;border-image:var(--site-native-frame) 8 stretch;border-radius:0;background-image:linear-gradient(#2d3e477d,#1d2e368c),var(--site-native-texture);color:#e5e4d4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;box-shadow:none;transition:filter .12s}
.areaPositionChoice .areaMapPosition{font-size:8px;line-height:1.15;font-weight:400;color:#a7b8bf;white-space:nowrap}
.areaPositionChoice strong{font-size:11px;font-weight:500;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere;max-width:100%}
.areaPositionChoice .areaMapState{font-size:8px;line-height:1.1;color:#a6b8bf;white-space:nowrap}
.areaPositionChoice:hover:not(:disabled){filter:brightness(1.22)}
.areaPositionChoice[data-selected=source]{border-image-source:var(--site-native-frame);background-image:linear-gradient(#6e65544d,#4a463340),var(--site-native-texture)}
.areaPositionChoice[data-selected=source] strong,.areaPositionChoice[data-selected=source] .areaMapState{color:#ffe2a2}
.areaPositionChoice[data-selected=target]{border-image-source:var(--site-native-boostFrame);background-image:linear-gradient(#41657766,#1d3d4a66),var(--site-native-texture)}
.areaPositionChoice[data-selected=target] strong,.areaPositionChoice[data-selected=target] .areaMapState{color:#9fe8ff}
.areaMapCenter{grid-column:2 / span 2;grid-row:2 / span 2;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;pointer-events:none;padding:1px}
.areaMiniViewport{width:100%;max-width:133px;aspect-ratio:600 / 482;overflow:hidden;position:relative}
.areaMiniCanvas{position:absolute;width:600px;height:482px;left:0;top:0;transform-origin:top left;background-size:994px 720px;background-repeat:no-repeat}
.areaMiniCanvas>div{position:absolute;inset:0;pointer-events:none}.areaMiniCanvas img,.areaMiniCanvas svg{position:absolute;max-width:none;pointer-events:none}
.areaMiniCanvas #areaMiniLabels{z-index:3}.areaMiniCanvas #areaMiniSource,.areaMiniCanvas #areaMiniTarget{z-index:2}
.areaMapCenter>span{font-size:9px;line-height:1.2;color:#b5c7cc}.areaQuickEditor[data-preview=true] .areaMapCenter>span{color:#a5e8f3}
.areaExchangeSummary{display:grid;grid-template-columns:minmax(0,1fr) 23px minmax(0,1fr);gap:7px;padding:12px 9px;background:#16262e6b;border-top:1px solid #718b9433;border-bottom:1px solid #718b9433;margin-bottom:10px}
.areaExchangeChoice{min-width:0;display:flex;flex-direction:column;gap:4px}
.areaExchangeChoice small{font-size:9px;line-height:1.2;color:#b1c5cf}.areaChoiceArt{height:14px;display:flex;align-items:center;margin-top:2px}
.areaChoiceArt img{width:auto;height:auto;max-width:100%;max-height:14px;object-fit:contain;object-position:left center;image-rendering:auto}
.areaExchangeChoice strong{font-size:12px;font-weight:500;line-height:1.3;color:#a3b6be;word-break:keep-all}
.areaExchangeChoice[data-selected=true] strong{color:#f7e0a7}#areaTargetSummary[data-selected=true] strong{color:#a5e5ff}
.areaChoicePosition{font-size:8px;color:#a7b8c0;line-height:1.45;min-height:1.45em;word-break:keep-all}
.areaExchangeIcon{background:var(--site-native-swap-normal) center/23px 26px no-repeat;align-self:center;width:23px;height:26px}
body #areaSwapPreview{font-size:11px;line-height:1.7;color:#eedfbd;white-space:normal;margin:0 0 5px;min-height:3.4em;word-break:keep-all}
body #areaSwapNotice{font-size:9px;line-height:1.6;color:#a6bbc5;min-height:3.2em;margin:0 0 10px;word-break:keep-all}
.areaEditorApply{display:flex;gap:7px;margin:0 0 8px}.areaEditorApply button{flex:1}
body .areaEditorApply .nativeAction{--action-height:36px;--action-padding:12px;font-size:12px}
.areaEditorFooter{display:flex;justify-content:space-between;align-items:center;gap:6px;padding-top:9px;border-top:1px solid #8a9ea12e}.areaEditorFooter>span{font-size:8px;color:#8fa7b3;line-height:1.5;text-align:right;max-width:150px}
.areaHistoryActions{display:flex;gap:5px}.areaHistoryActions button{flex:none}
body .areaHistoryActions .nativeAction{--action-height:27px;--action-padding:10px;font-size:10px}
#areaQuickEditor button:focus-visible{outline:2px solid #ffe5a7;outline-offset:2px}#areaQuickEditor button:disabled{opacity:.45;cursor:default}
#gameAreaTarget{position:absolute;inset:0;pointer-events:none;z-index:3}
@media(min-width:1121px){body.areaEditMode .boardColumn{grid-column:1;grid-row:1;scroll-margin-top:10px}body #areaQuickEditor{position:sticky;top:90px;max-height:calc(100dvh - 105px);overflow:auto;overscroll-behavior:contain}.areaEditorHeader{position:sticky;top:-14px;padding:6px 0 8px;margin-top:-6px;z-index:6;background-image:linear-gradient(#314049f7,#2a3840f7),var(--site-native-texture)}.areaEditorApply{position:sticky;bottom:-10px;padding:8px 0 10px;margin-bottom:0;z-index:6;background-image:linear-gradient(#2a3840f7,#2a3840),var(--site-native-texture)}}
@media(max-width:1120px){body.areaEditMode .boardColumn{grid-column:1;grid-row:2}body #areaQuickEditor{grid-column:1;grid-row:1;max-width:700px;width:100%;justify-self:center;padding:16px 20px}.areaPositionMap{grid-template-rows:repeat(4,73px);max-width:400px;width:100%;margin-left:auto;margin-right:auto}.areaExchangeSummary{gap:14px}.areaExchangeChoice strong{font-size:14px}.areaChoicePosition{font-size:10px;min-height:0}.areaEditorSteps li{justify-content:center}.areaEditorFooter>span{font-size:10px;max-width:none}}
@media(max-width:600px){body #areaQuickEditor{padding:14px 10px 12px}.areaEditorHeader{margin-bottom:13px}.areaEditorHeader h2{font-size:18px}body .areaEditorHeader #areaSwapDone{--action-height:36px}.areaEditorSteps{gap:5px;margin-bottom:12px}.areaEditorSteps li{font-size:10px;gap:4px}.areaEditorTabs{margin-bottom:12px}body .areaEditorTabs button{--action-height:40px}.areaPriorityChoices{gap:8px}body #areaPriorityChoices button{--action-height:44px;--action-padding:18px;font-size:11px}.areaPositionMap{grid-template-rows:repeat(4,69px);gap:4px}.areaPositionChoice strong{font-size:10px}.areaPositionChoice .areaMapPosition,.areaPositionChoice .areaMapState{font-size:7.5px}.areaExchangeSummary{padding:11px 6px;gap:5px;grid-template-columns:minmax(0,1fr) 23px minmax(0,1fr)}.areaExchangeChoice strong{font-size:12px}.areaChoicePosition{font-size:8.5px;min-height:2.9em}body #areaSwapPreview{font-size:11px}body #areaSwapNotice{font-size:9px}body .areaEditorApply .nativeAction{--action-height:44px}body .areaHistoryActions .nativeAction{--action-height:36px}.areaEditorFooter>span{font-size:8px;max-width:120px}}
@media(max-width:380px){.areaPriorityChoices{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){.areaPositionChoice[data-selected=target]{animation:areaTargetIn .18s ease-out}@keyframes areaTargetIn{from{filter:brightness(1.45)}to{filter:brightness(1)}}}