@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600&display=swap');
.city-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.city-actions button{font-size:11px;padding:8px}
:root{color-scheme:dark;--bg:#101b1a;--panel:#182622;--line:#32473d;--gold:#dfbd7a;--muted:#9dac9d;--text:#eee9d9}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#273e30 0,transparent 55%),var(--bg);color:var(--text);font:14px 'DM Sans',Arial,sans-serif}button,.file-button{font:inherit;color:inherit;border:1px solid var(--line);background:#22382e;border-radius:5px;padding:9px 12px;cursor:pointer}button:hover,.file-button:hover{background:#304938;border-color:var(--gold)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,label:focus-within{outline:2px solid var(--gold);outline-offset:3px}header{min-height:91px;display:flex;align-items:center;justify-content:space-between;padding:18px 36px;border-bottom:1px solid var(--line);background:#101d19cc}.brand{display:flex;align-items:center;gap:15px;color:var(--gold);font:28px Georgia,serif;letter-spacing:4px}.brand>span{font-size:22px}.brand small{display:block;font:9px Arial;letter-spacing:2.6px;color:var(--muted);margin-top:8px}.header-right{display:flex;align-items:center;gap:18px}.badge{font-size:10px;letter-spacing:1.6px;color:var(--gold)}main{max-width:1600px;margin:auto;padding:28px 32px}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);margin:0}h1{font:600 46px 'Cormorant Garamond',Georgia,serif;margin:4px 0}h2{font:600 24px 'Cormorant Garamond',Georgia,serif;margin:0 0 10px}.heading p:not(.eyebrow){color:var(--muted);margin:0}.stats{display:flex;gap:24px;color:var(--gold);font-size:12px}#resources{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}.resource{padding:16px 20px;background:#1e3028;border:1px solid var(--line);border-radius:7px;display:flex;gap:15px;align-items:center}.resource-icon{font-size:29px;color:var(--gold)}.resource strong{display:block;font-size:22px;font-weight:500;margin:4px 0}.resource small{color:var(--muted);font-size:11px}.resource .resource-label{text-transform:uppercase;letter-spacing:2px;font-size:10px;color:var(--gold)}.workspace{display:grid;grid-template-columns:224px minmax(420px,1fr) 280px;gap:18px}aside,.city-panel{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:20px}.muted{color:var(--muted);font-size:12px;line-height:1.65}#catalog{display:flex;flex-direction:column;gap:8px}.catalog-item{text-align:left;display:flex;align-items:center;gap:12px;padding:11px 10px;background:#1c2e26;width:100%}.catalog-item .icon{font-size:24px;width:26px;text-align:center;color:var(--gold)}.catalog-item strong{display:block;font-size:12px;font-weight:500}.catalog-item small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.catalog-item.active{border-color:var(--gold);background:#3a402b}.catalog-item.locked{opacity:.6}.city-panel{padding:0;overflow:hidden;background:#17251d}.map-heading{padding:16px 18px;display:flex;gap:12px;justify-content:space-between;border-bottom:1px solid var(--line);font-size:10px;color:var(--gold);letter-spacing:1px}#mode{color:var(--muted);letter-spacing:0}.map-scroll{overflow:auto;padding:20px;background:radial-gradient(ellipse,#4d6340,#263b2c 75%);min-height:480px}#grid{display:grid;grid-template-columns:repeat(21,minmax(23px,1fr));gap:2px;min-width:520px;aspect-ratio:1}.tile{min-width:0;padding:0;border:1px solid #69825125;border-radius:2px;background:#51623b55;aspect-ratio:1;font-size:18px;line-height:1;position:relative;box-shadow:none}.tile:hover{background:#7d8c50;border-color:var(--gold)}.tile.node-wood{color:#a9c27b;background:#304d2a}.tile.node-stone{color:#b0b6a3;background:#505b4b}.tile.node-iron{color:#bba681;background:#4c5140}.tile.node-food{color:#8fc3c6;background:#315c61}.tile.building{background:#c2aa74;color:#28372c;border-color:#edcf94;box-shadow:inset 0 -4px #907d54}.tile.building-core{background:#ebdca9;font-size:27px}.tile.pending{background:repeating-linear-gradient(45deg,#887b48,#887b48 4px,#4b5435 4px,#4b5435 8px);color:#f2ddb3}.tile.selected{outline:2px solid #ffe0a0;z-index:1}.tile small{position:absolute;right:1px;bottom:1px;font:bold 9px Arial}.legend{padding:14px;display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:var(--muted)}.details-panel section+section{margin-top:25px;padding-top:22px;border-top:1px solid var(--line)}.tip{background:#263c2e;border-left:2px solid var(--gold);padding:13px;font-size:12px;line-height:1.7;margin-top:20px;color:#c8d0ba}.detail-icon{font-size:40px;color:var(--gold);margin-bottom:10px}.detail-level{color:var(--gold);text-transform:uppercase;font-size:10px;letter-spacing:1px;margin-bottom:12px}.detail-row{display:flex;justify-content:space-between;font-size:12px;margin:12px 0;color:var(--muted)}.detail-row strong{color:var(--text)}.primary{background:var(--gold);color:#18231b;border-color:var(--gold);width:100%;margin-top:12px;font-weight:600}.primary:hover{background:#f1d299}.queue-job{margin:12px 0;padding:12px;background:#20352b;border-radius:5px}.queue-job strong{font-size:12px}.queue-job .job-meta{display:flex;justify-content:space-between;margin-top:8px;color:var(--gold);font-size:11px}.queue-job button{padding:3px 7px;font-size:10px}.history-entry{font-size:11px;color:var(--muted);line-height:1.7;margin-bottom:8px}.save-tools{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:7px;flex-wrap:wrap}.save-tools span{font-size:10px;color:var(--muted);width:100%;margin-bottom:5px}.save-tools button,.file-button{font-size:10px;padding:8px}.file-button input{display:none}footer{text-align:center;color:#7f9383;font-size:10px;margin-top:25px;letter-spacing:1px}#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);padding:14px 22px;background:#e3c887;color:#1b2c21;box-shadow:0 6px 24px #0005;border-radius:6px;display:none;z-index:10}dialog{max-width:540px;border:1px solid var(--gold);border-radius:9px;background:var(--panel);color:var(--text);padding:28px;line-height:1.8}dialog::backdrop{background:#0009}dialog p{color:#bfcbbd;font-size:13px}@media(max-width:1150px){.workspace{grid-template-columns:190px minmax(380px,1fr)}.details-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.details-panel section+section{margin:0;padding:0;border:none}}@media(max-width:700px){header{padding:18px}.badge{display:none}main{padding:20px 14px}.heading{align-items:flex-start;gap:12px}.stats{flex-direction:column;gap:8px}h1{font-size:38px}#resources{grid-template-columns:1fr 1fr}.resource{padding:12px}.workspace{display:flex;flex-direction:column}#catalog{display:grid;grid-template-columns:1fr 1fr}.details-panel{display:block}.details-panel section+section{margin-top:20px}.map-scroll{min-height:0}.brand>span{font-size:16px}.brand small{font-size:7px}.heading p:not(.eyebrow){font-size:12px}}

.military-panel{margin-top:28px;border:1px solid #35483e;border-radius:12px;padding:24px;background:#15261e}.military-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.military-heading a{color:#dbc48a}#army-summary{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0 24px}.military-columns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}.military-columns section{min-width:0}.military-columns label{display:block;margin:12px 0;color:#b4c4b8}.military-columns input,.military-columns select{display:block;width:100%;margin-top:6px;padding:9px;border:1px solid #4c6254;border-radius:5px;background:#102017;color:#f0e8d3;box-sizing:border-box}.military-columns h3{color:#dbc48a}.warning{color:#f0a77b}.raid-report{margin:12px 0;padding:12px;border:1px solid #3b5142;border-radius:6px}.raid-report summary{cursor:pointer}.raid-report p{font-size:13px;line-height:1.6}@media(max-width:1000px){.military-columns{grid-template-columns:1fr 1fr}.military-columns>section:last-child{grid-column:1/-1}}@media(max-width:650px){.military-columns{grid-template-columns:1fr}.military-heading{align-items:flex-start;flex-direction:column}.military-panel{padding:16px}}

/* Original Theopneia city presentation */
:root{--bg:#12272c;--panel:#18343a;--line:#3f5b5d;--gold:#ead099;--muted:#a6b9b4;--text:#f2eedf}
body{background:radial-gradient(ellipse at 50% 0,#315252,transparent 65%),#12272c}
header{background:#102b31;border-bottom:1px solid #a58c59;min-height:74px}
main{max-width:1700px;padding:22px 28px}.heading{margin-bottom:18px}h1{font-size:42px}
.workspace{grid-template-columns:210px minmax(440px,1fr) 255px;gap:14px}
aside{padding:17px;background:linear-gradient(145deg,#234148,#162f35)}
.map-controls{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background:#102b31;color:var(--gold);font-size:9px;letter-spacing:1px}
.map-controls>div{display:flex;align-items:center;gap:9px}.map-controls button{padding:4px 9px;font-size:12px}
.map-scroll{height:650px;min-height:0;padding:24px;overscroll-behavior:contain;touch-action:pan-x pan-y;background:radial-gradient(ellipse at 55% 45%,#9daf79,#687f60 65%,#334f48);scrollbar-color:#78907d #19383b}
#grid{min-width:520px;gap:0;isolation:isolate;border:9px ridge #c9bd95;background:repeating-linear-gradient(0deg,transparent,transparent 23px,#dfd9a208 24px),#8d9c68;box-shadow:0 20px 50px #102c3466;}
.tile{border:1px solid #344f3b13;background:#92a16e55;border-radius:0;overflow:visible;font-size:0}
.tile:nth-child(7n){background:#82976955}.tile:nth-child(11n){background:#a0ae7755}
.tile .sprite{position:absolute;left:-5%;top:-30%;width:110%;height:125%;pointer-events:none;filter:drop-shadow(1px 3px 1px #274b3533)}
.tile.node-wood,.tile.node-stone,.tile.node-iron,.tile.node-food,.tile.building,.tile.building-core{background:transparent;border-color:#3c573619;box-shadow:none;font-size:0}
.tile.building{z-index:2}.tile:hover{background:#f0d58d66;border-color:#eed298;z-index:3}.tile.selected{outline:2px solid #ffe6a6;outline-offset:-2px;z-index:4;background:#ead09866}
.tile small{right:0;bottom:0;background:#173c43;color:#f7df9c;border:1px solid #bfa46d;padding:1px 3px;font-size:8px;z-index:5}
.tile.pending:after{content:'◷';position:absolute;left:1px;bottom:0;color:#18373c;background:#eed296;font:12px Arial;border-radius:50%}
.sprite{width:100%;height:100%;display:block}.catalog-item{background:#1a3539;padding:7px 8px;gap:8px}.catalog-item .icon{width:38px;height:38px;flex-shrink:0}.catalog-item strong{font-size:11px}.catalog-item small{font-size:9px}.catalog-item.active{background:#59624b}
.detail-icon{width:100px;height:90px;margin:auto auto 12px}.resource{padding:12px 16px;background:#1d3a3f}.resource strong{font-size:20px}
.map-heading{background:#203e43}.legend{background:#18383b}.military-panel{background:#17363a}
@media(max-width:1150px){.workspace{grid-template-columns:190px minmax(380px,1fr)}.details-panel{grid-column:1/-1}.map-scroll{height:620px}}
@media(max-width:700px){main{padding:14px}.workspace{display:flex}.map-scroll{height:520px}.map-controls>span{display:none}}

.map-scroll{background:linear-gradient(90deg,#305e71 0%,#578c96 3%,#c0bc83 4%,#718b60 6%,#8c9f70 94%,#637e5c 100%)}

#city-shell{position:relative;min-width:610px;padding:34px;aspect-ratio:1;isolation:isolate}
#city-shell:before{content:'';position:absolute;inset:24px;border:7px dashed #626f59;pointer-events:none}
#city-shell.wall-built:before{border:9px ridge #d2c5a3;box-shadow:0 8px 14px #19352c66}
#grid{width:100%;min-width:0;border:0;box-shadow:none}
.fort-toolbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:#17353b;color:#dac896;font-size:11px}.fort-toolbar button{padding:6px 9px;font-size:11px}
.fort-slot{position:absolute;width:38px;height:38px;padding:2px;border:2px solid #b7a783;background:#243f43;border-radius:5px;transform:translate(-0%,0%);z-index:6;box-shadow:0 2px 5px #152b29aa}
.fort-slot span{font-size:22px;color:#dac896}.fort-slot.occupied{background:#517272}.fort-slot.selected{outline:3px solid #ffe5a4}.fort-slot .sprite{width:100%;height:100%}.fort-slot small{position:absolute;bottom:0;right:0;background:#183c43;color:#ffe4a3;font-size:8px;padding:1px 3px}.fort-slot.pending{border-color:#f4d168;border-style:dashed}
#fort-type{width:100%;padding:8px;background:#17383b;color:#f3e5cc;border:1px solid #a58c59;margin-top:6px}#fort-remove{margin-top:12px;width:100%}

.tile.touching{outline:1px dashed #f4dda1;outline-offset:-2px;background:#ebd88b30}

.waterfront-status{padding:10px 14px;color:#bddde0;background:#153942;font-size:11px}
.tile.shoreline{background:linear-gradient(90deg,#3b8194 0,#66a2a8 34%,#c7c294 42%,#92a16e 80%);border-color:#9bcbc66b}
.tile.shoreline.placement-valid{outline:2px solid #a2e2e3;outline-offset:-2px;background:linear-gradient(90deg,#398dab,#81c2bd 55%,#d3d7a4);z-index:3}
#city-shell[data-shore="west"]{background:linear-gradient(90deg,#286479 0,#467f8a 25px,transparent 35px)}
#city-shell[data-shore="east"]{background:linear-gradient(270deg,#286479 0,#467f8a 25px,transparent 35px)}
#city-shell[data-shore="north"]{background:linear-gradient(180deg,#286479 0,#467f8a 25px,transparent 35px)}
#city-shell[data-shore="south"]{background:linear-gradient(0deg,#286479 0,#467f8a 25px,transparent 35px)}
.map-scroll{background:radial-gradient(ellipse at 55% 45%,#9daf79,#687f60 65%,#334f48)}
#city-shell[data-shore="east"] .tile.shoreline{background:linear-gradient(270deg,#3b8194 0,#66a2a8 34%,#c7c294 42%,#92a16e 80%)}
#city-shell[data-shore="north"] .tile.shoreline{background:linear-gradient(180deg,#3b8194 0,#66a2a8 34%,#c7c294 42%,#92a16e 80%)}
#city-shell[data-shore="south"] .tile.shoreline{background:linear-gradient(0deg,#3b8194 0,#66a2a8 34%,#c7c294 42%,#92a16e 80%)}

.painted-sprite{object-fit:contain}
.tile .painted-sprite{left:-6%;top:-25%;width:112%;height:125%;filter:drop-shadow(1px 2px 1px #153e3533)}
.tile.building-core .painted-sprite{left:-13%;top:-50%;width:126%;height:150%}
.detail-icon:has(.painted-sprite){width:220px;max-width:100%;height:205px}
.art-samples{margin-top:24px;padding:24px;border:1px solid #7b8b76;border-radius:8px;background:linear-gradient(135deg,#213f43,#122c31)}
.art-sample-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.art-sample-grid figure{margin:0;background:radial-gradient(ellipse,#6e8270,#284a46 75%);border:1px solid #748a73;border-radius:7px;overflow:hidden}.art-sample-grid a{display:block;padding:10px}.art-sample-grid img{width:100%;height:230px;object-fit:contain;display:block}.art-sample-grid figcaption{padding:14px;background:#142f34}.art-sample-grid strong{display:block;color:#efdfb5;font:20px Georgia,serif}.art-sample-grid span{display:block;margin-top:8px;color:#a9c4c1;font-size:11px;line-height:1.5}
@media(max-width:1000px){.art-sample-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:550px){.art-samples{padding:16px}.art-sample-grid{gap:10px}.art-sample-grid img{height:180px}.art-sample-grid strong{font-size:17px}}

.tile .painted-node{left:-10%;top:-28%;width:120%;height:128%}
.art-library{margin-top:22px;border-top:1px solid #658075;padding-top:16px}.art-library summary{cursor:pointer;color:#f0dcad;font:20px Georgia,serif;padding-bottom:12px}.art-library[open] summary{margin-bottom:10px}
.fort-slot .painted-sprite{object-fit:contain;width:100%;height:100%}

/* Open crescent harbor: coastal wall ends remain on the two three-tile headlands. */
#city-shell[data-shore]:not([data-shore="none"]):before{border:0;box-shadow:none}
#harbor-wall{position:absolute;inset:24px;pointer-events:none;z-index:4}
#harbor-wall svg{width:100%;height:100%;overflow:visible;transform-origin:center}
#harbor-wall polyline{fill:none;stroke:#626f59;stroke-width:7px;stroke-dasharray:7 4;vector-effect:non-scaling-stroke;stroke-linecap:butt;stroke-linejoin:round}
.wall-built #harbor-wall polyline{stroke:#d2c5a3;stroke-width:9px;stroke-dasharray:none;filter:drop-shadow(0 3px 2px #18352c80)}
#city-shell[data-shore="east"] #harbor-wall svg{transform:rotate(180deg)}
#city-shell[data-shore="north"] #harbor-wall svg{transform:rotate(90deg)}
#city-shell[data-shore="south"] #harbor-wall svg{transform:rotate(270deg)}
#grid .tile.sea{background:#176d88;border:0;box-shadow:none;border-radius:0;color:#c9edf1}
#grid .tile.sea:hover{background:#287f99}
#grid .tile.sea.shoreline{background:linear-gradient(90deg,#176d88,#3591a2)}
#grid .tile.sea.building{background:#207c94;box-shadow:none}
#grid .tile.shoreline:not(.sea){background:linear-gradient(90deg,#7fb3ac 0,#c5c599 28%,#92a16e 65%)}
#grid .tile.sea.placement-valid{outline:2px solid #bcebe8;outline-offset:-2px}
@media(max-width:700px){#city-shell{min-width:0}#grid{grid-template-columns:repeat(21,minmax(0,1fr))}.map-scroll{height:auto;max-height:620px}.fort-slot{width:27px;height:27px}.fort-slot span{font-size:16px}}

/* Shared-world hostile city missions */
#military[data-panel=enlist] #city-war{display:none}#city-war{border-top:1px solid #697c79;margin-top:1rem;padding-top:1rem;overflow-wrap:anywhere}#city-war form{display:grid;gap:.65rem}#city-war label{display:grid;gap:.25rem}#city-war select,#city-war input{max-width:100%;min-width:0;width:100%}#city-war fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}#city-war details{padding:.6rem 0;border-top:1px solid #405254}@media(max-width:480px){#city-war fieldset{grid-template-columns:1fr}}

#trade-automation{margin:1rem 0;padding-top:1rem;border-top:1px solid var(--line);overflow-wrap:anywhere}#trade-policy-form{display:grid;gap:.75rem}#trade-policy-form label{display:grid;gap:.35rem;min-width:0}#trade-policy-form input,#trade-policy-form select{width:100%;min-width:0;max-width:100%;padding:.65rem;border:1px solid #526762;border-radius:5px;background:#162e30;color:var(--text);font:inherit}#trade-policy-form fieldset{display:grid;gap:.65rem;margin:0;min-width:0;border:1px solid #526762;border-radius:5px;padding:.75rem}#trade-policy-form legend{font-size:.85rem;color:var(--gold);padding:0 .3rem}#trade-automation p{line-height:1.5}#trade-automation details{margin:.7rem 0}

/* Keep quantity actions together, including on narrow displays. */
.recruit-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:nowrap;margin:.5rem 0}.recruit-actions>button{width:auto;min-width:0;flex:1 1 0;margin:0}

/* Gestures zoom the map, while the surrounding page keeps native scrolling. */
.map-scroll{touch-action:none;}