:root{--ink:#2c2118;--muted:#5a4a38;--parch:#ece0c8;--parch-2:#e4d5b8;--gold:#a58232;--red:#b31f34;--body:'EB Garamond',Georgia,serif;--sans:'Ysabeau',Arial,sans-serif;--display:'Cinzel',Georgia,serif}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font:18px/1.4 var(--body);height:100dvh;display:flex;flex-direction:column;background:var(--parch)}
::selection{background:var(--red);color:#f5f1dc}
#alpha-banner{flex:none;background:var(--red);color:#fff;text-align:center;font:600 .85rem/1.4 var(--sans);padding:8px 16px;letter-spacing:.01em;z-index:1001}
header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:12px 24px;background:#1d1813;color:#f5f1dc;border-bottom:2px solid var(--gold);z-index:1000}header img{display:block;width:150px;height:64px}h1{font:600 clamp(1rem,2vw,1.6rem) var(--display);margin:0}h2{font:800 1.4rem var(--sans);margin:0 0 .6rem}.atlas-title{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center}.atlas-title p{margin:0;font:italic .85rem var(--body);color:#d8cdb0;letter-spacing:.02em}nav{display:flex;gap:8px}button,input,select,textarea{font:600 1rem var(--sans)}button{padding:9px 12px;min-height:44px;cursor:pointer;color:var(--ink);border:1px solid #9d865e;background:var(--parch)}button:hover{background:var(--parch-2)}a{color:var(--red);text-underline-offset:3px}:focus-visible{outline:3px solid var(--red);outline-offset:3px}main{position:relative;flex:1;min-height:0;overflow:hidden}#map{position:absolute;inset:0;background:radial-gradient(ellipse at 40% 40%,#e4d5b8,#c3ac80);font-family:var(--body)}#map::after{content:'';position:absolute;inset:0;z-index:450;pointer-events:none;box-shadow:inset 0 0 90px #5a4a3840;border:10px double #5a4a3860;background:repeating-linear-gradient(7deg,#2c211803 0 1px,transparent 1px 5px)}
#panel{position:absolute;left:24px;top:24px;width:280px;max-height:calc(100% - 76px);overflow:auto;padding:22px;z-index:800;background:linear-gradient(120deg,#f5edda,#e4d5b8);border:1px solid #9d865e;box-shadow:0 4px 20px #2c211826}p{margin:0 0 1rem}fieldset{border:0;border-top:1px solid #9d865e;padding:12px 0;margin:0}legend{font:600 1rem var(--sans);padding-right:8px}label{display:block;margin:0 0 8px}input[type=checkbox],input[type=radio]{accent-color:var(--red);width:18px;height:18px;vertical-align:middle;margin-right:8px}.mode-hint{margin:0 0 8px;font-style:italic;color:var(--muted);font-size:.9rem}#status{font-style:italic;color:var(--muted)}#details,#editor{border-top:1px solid #9d865e;padding-top:18px;margin-top:18px}.wiki{display:block;margin-top:20px;font:600 1rem var(--sans)}#edit-form input:not([type=color]),textarea,select{width:100%;background:#f8f1df;border:1px solid #9d865e;padding:6px;color:var(--ink)}textarea{min-height:90px}#export{margin-top:12px}
.leaflet-control-zoom a,.leaflet-control-attribution{background:var(--parch)!important;color:var(--ink)!important}.leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important}.leaflet-control-attribution a{color:var(--muted)}.leaflet-top.leaflet-right{top:14px;right:14px}.territory-tooltip{background:var(--parch);border:1px solid var(--gold);color:var(--ink);box-shadow:0 3px 12px #2c21182b;padding:10px 14px;white-space:normal;min-width:150px;max-width:240px;font:18px/1.3 var(--body)}.territory-tooltip strong{display:block;font:800 18px var(--sans)}.territory-tooltip::before{display:none}.leaflet-interactive:focus{outline:none;stroke:var(--red);stroke-width:4}
@media(max-width:700px){#alpha-banner{font-size:.72rem;padding:6px 10px}header{padding:8px 12px;gap:8px;flex-wrap:wrap}header img{width:100px;height:43px}h1{font-size:1rem}.atlas-title p{display:none}nav{width:100%;justify-content:flex-end}nav button{padding:6px 12px}#panel{left:12px;top:12px;width:min(280px,calc(100% - 86px));max-height:calc(100% - 60px);padding:16px}.leaflet-control-attribution{font-size:11px}}
[hidden]{display:none!important}

.territory-tooltip strong{margin-bottom:5px}

/* A bounded panel with one purpose at a time; its contents scroll independently. */
#panel{display:flex;flex-direction:column;padding:0;overflow:hidden}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:12px 16px;border-bottom:1px solid #9d865e;background:var(--parch)}
.panel-heading h2{margin:0;font-size:1.2rem}.panel-heading button{flex:none;padding:0;width:44px;font-size:1.6rem;line-height:1;border:0;background:transparent}
.panel-body{padding:16px;overflow-y:auto;overscroll-behavior:contain;min-height:0;scrollbar-gutter:stable}
#details{margin:0;padding:0;border:0}#detail-name{font-size:1.25rem}#detail-author{margin:-.2rem 0 .6rem;font-style:italic;font-size:.9rem;color:var(--muted)}#detail-author a{font-weight:600}#detail-description{margin-bottom:.5rem}
.flag-buy{display:block;margin:-4px 0 12px;font:italic 500 .78rem var(--body);color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted);width:max-content}
.flag-buy:hover{color:var(--red);border-color:var(--red)}
#detail-flag{display:block;width:110px;height:66px;object-fit:cover;margin-bottom:10px;border:1px solid var(--gold);box-shadow:0 2px 8px #2c211840}
@media(max-width:700px){
 #panel{top:auto;bottom:26px;left:12px;right:12px;width:auto;max-height:min(45%,22rem);padding:0}
 .panel-body{font-size:16px;padding:12px 16px}
 .panel-heading{padding:6px 12px}.panel-heading h2{font-size:1.1rem}
 #status{font-size:14px}#key-content>p:first-child{display:none}
}
@media(hover:none){.territory-tooltip{display:none!important}}

/* Brass diamond city glyphs: quiet map furniture, not another data layer
   competing with the territory fills. Leaflet's default .leaflet-div-icon
   box (white fill, grey border) is reset so only the diamond itself shows. */
.leaflet-div-icon.city-marker{background:transparent;border:0}
.city-diamond{display:block;background:#8a6d35;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}

/* Map mode: a two-option segmented control standing in for plain radios,
   full-width buttons rather than a checklist. The native <input> stays in
   the DOM (just shrunk to nothing, not display:none) so keyboard nav,
   screen readers and :checked all keep working; the whole label is
   styled as the button, since its own circle is hidden. The selected
   state reads from background/text colour alone at a glance, but never
   *only* from colour: a small diamond bullet (echoing the map's own city
   glyphs) appears next to the title too, for anyone who can't rely on
   the red/pale contrast. */
.mode-options{display:flex;flex-direction:column;gap:8px;margin:2px 0 4px}
.mode-option{position:relative;display:block;margin:0;padding:10px 14px;cursor:pointer;
  background:var(--parch-2);border:1px solid #9d865e;border-radius:3px;
  transition:background .15s ease,border-color .15s ease}
.mode-option:hover{background:#ded0aa}
.mode-option input{position:absolute;opacity:0;width:0;height:0;margin:0}
.mode-option-title{display:block;font:700 1rem var(--sans);color:var(--ink)}
.mode-option-title::before{content:'◆';display:inline-block;width:1.1em;margin-right:.15em;
  font-size:.62em;vertical-align:.2em;color:var(--red);opacity:0;transition:opacity .15s ease}
.mode-option-desc{display:block;font-style:italic;font-size:.85rem;color:var(--muted);margin-top:1px}
.mode-option:has(input:checked){background:var(--red);border-color:#7d1523;
  box-shadow:inset 0 1px 3px #2c211840}
.mode-option:has(input:checked) .mode-option-title,
.mode-option:has(input:checked) .mode-option-desc{color:#f7ecd6}
.mode-option:has(input:checked) .mode-option-title::before{opacity:1;color:var(--parch)}
.mode-option:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}