.map-navigation{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:-10px 0 18px}
.map-picker{display:flex;align-self:flex-start;align-items:center;gap:4px;padding:4px;border:1px solid var(--line,#dddcd3);border-radius:9px;background:#fffefa;min-width:0}
.map-picker .icon-button{width:32px;height:32px;flex-shrink:0}
#map-select{font:inherit;font-size:13px;color:#344639;background:transparent;border:0;cursor:pointer;max-width:240px;min-width:140px;height:32px;padding:0 6px}
#map-select:focus-visible{outline:2px solid #63896c;outline-offset:1px;border-radius:4px}
.map-index{font-size:11px;color:#858a7d;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 8px}
.map-navigation-note{font-size:11px;color:#92978b}
.map-variant-label{font-size:12px;letter-spacing:0;font-weight:500;white-space:nowrap;color:#52725f;background:#e9eee3;padding:5px 8px;border-radius:5px}
.map-variants{border:1px solid #dce0d3;border-radius:10px;background:#fffefa;padding:12px}
.map-variants-heading{display:flex;align-items:center;gap:12px;min-height:30px;font-size:12px;font-weight:600;color:#4f6455;cursor:pointer;list-style:none}
.map-variants-heading::-webkit-details-marker{display:none}
.map-variants[open] .map-variants-heading{margin-bottom:9px}
.map-variants-current{color:#24583d;font-weight:500}
.map-variants-hint{margin-left:auto}
.map-variants-hint::after{content:'⌄';margin-left:7px;font-size:14px}
.map-variants[open] .map-variants-hint::after{content:'⌃'}
.map-variants-hint{font-size:11px;font-weight:400;color:#838b7b}
.map-variant-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.map-variant-options.two-variants{grid-template-columns:repeat(2,minmax(0,1fr));max-width:300px}
.map-variant{padding:3px;border:1px solid #dce1d5;border-radius:7px;background:#f8f9f3;min-width:0;text-align:left;overflow:hidden;transition:border-color .15s,background .15s}
.map-variant:hover:not(:disabled){border-color:#88a78c;background:#edf2e8}
.map-variant[aria-pressed="true"]{border-color:#477d61;background:#e8f0e4;box-shadow:0 0 0 1px #477d61}
.map-variant-preview{display:block;position:relative;overflow:hidden;border-radius:4px;background:#45574b;pointer-events:none}
.map-variant-preview img{position:absolute;max-width:none;pointer-events:none;user-select:none}
.map-variant-caption{display:flex;align-items:center;justify-content:space-between;gap:3px;min-height:28px;padding:4px 5px 1px;font-size:12px;color:#5a6856;white-space:nowrap}
.map-variant[aria-pressed="true"] .map-variant-caption{color:#24583d;font-weight:600}
.map-variant-check{display:flex;visibility:hidden;color:#326c4c}
.map-variant-check svg{width:13px;height:13px}
.map-variant[aria-pressed="true"] .map-variant-check{visibility:visible}
.airship-energy-note{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;border-top:1px solid #e8ebdf;margin-top:11px;padding-top:10px;color:#77816d;font-size:11px}
.energy-note-title{color:#58684e;white-space:nowrap}
.energy-rounds{display:flex;flex-wrap:wrap;gap:6px 16px}
.energy-rounds span{white-space:nowrap}
.energy-rounds b{font-weight:500;color:#3f654f;margin-left:3px}
.map-image.is-loading{visibility:hidden}
/* The uncropped artwork extends past the stage. It must not make this inner
   clipping box scroll when a cell receives focus; zoom scrolls the viewport. */
.board-stage{overflow:clip}
@media(max-width:640px){.map-variant-options{grid-template-columns:repeat(3,minmax(0,1fr))}.map-variants{padding:10px}.map-variant-caption{min-height:31px}.airship-energy-note{align-items:flex-start;flex-direction:column;gap:7px}.energy-rounds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 15px}}
@media(max-width:540px){
  .map-heading{gap:8px;flex-wrap:wrap}
  #map-title{font-size:22px;flex-wrap:wrap;gap:8px}
  .map-navigation{margin:0 0 12px}
  .map-picker{width:100%}
  #map-select{flex:1;min-width:0;max-width:none}
  .map-navigation-note{display:block;margin:7px 0 0 2px}
}
