:root{color-scheme:dark;--bg:#131914;--panel:#202720;--gold:#efc47e;--ink:#f6edda;--muted:#b8b9a5;--line:#414537}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 30% 0,#303c27,transparent 52%),var(--bg);color:var(--ink);font:15px system-ui,sans-serif;min-height:100vh}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid #ffe3a2;outline-offset:3px}header{min-height:79px;border-bottom:1px solid #464a36;background:#171e17;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px max(22px,calc((100vw - 1340px)/2))}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.brand strong{font: bold 26px Georgia,serif}.brand small,.eyebrow,.tag,.map-label{display:block;letter-spacing:.16em;font-size:10px;font-weight:800;color:var(--gold)}.crest{background:#454329;border:1px solid #967442;color:#ffe3a2;padding:8px 12px;font-size:22px;border-radius:7px 7px 14px 14px}.tag{border:1px solid var(--line);padding:7px 10px;border-radius:4px;white-space:nowrap}#resources{display:flex;gap:8px}.resource{min-width:87px;display:grid;grid-template-columns:25px 1fr;gap:0 5px;background:#222b22;border:1px solid #3c4738;border-radius:7px;padding:6px 8px}.resource svg{grid-row:span 2;align-self:center;width:23px;height:23px}.resource b{font-size:15px;font-variant-numeric:tabular-nums}.resource small{font-size:10px;color:var(--muted)}main{max-width:1384px;margin:auto;padding:26px 22px 14px}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}h1,h2,h3{font-family:Georgia,serif;margin:0}h1{font-size:clamp(31px,5vw,52px);margin-top:4px;line-height:1.05}.eyebrow i,footer i{display:inline-block;background:#9bd17c;width:7px;height:7px;border-radius:50%;box-shadow:0 0 9px #90c977;margin-right:5px}.plain{background:#252d23;border:1px solid #4b5040;border-radius:6px;padding:8px 12px;font-size:12px}.plain:hover{background:#3b4535}.layout{display:grid;grid-template-columns:minmax(0,1fr) 325px;gap:16px}.world{position:relative;border:1px solid #77764d;border-radius:13px;overflow:hidden;isolation:isolate;min-height:540px;height:min(69vh,700px);background:#446141}.terrain,.land,.map-plots,.sparkles{position:absolute;inset:0;width:100%;height:100%}.terrain{background:url(map.webp) center/100% 100%}.land{z-index:-1}.world::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 65px #15231390;z-index:3}.map-label{position:absolute;z-index:4;background:#18241ee6;color:#f3da9b;border:1px solid #b0a46a8c;border-radius:5px;pointer-events:none}.map-label{top:12px;left:12px;padding:8px}.plot{position:absolute;transform:translate(-50%,-50%);width:clamp(75px,11vw,141px);height:auto;display:grid;justify-items:center;border:0;background:none;padding:0;filter:drop-shadow(0 7px 4px #111c1690);z-index:2}.plot:hover,.plot[aria-pressed=true]{z-index:3}.plot[aria-pressed=true] .ground{fill:#efd28b;stroke:#ffe4a6;stroke-width:3}.plot svg{width:100%;display:block;transition:scale .18s}.plot:hover svg{scale:1.075}.plot .label{background:#1d2b20f2;padding:4px 8px;border:1px solid #8c9464;border-radius:6px;color:#fff0d0;white-space:nowrap;font-size:clamp(9px,1.25vw,13px);font-weight:750;margin-top:-7px}.plot[aria-pressed=true] .label{background:#463b23;border-color:#ffd782}.plot .label small{color:#e8c684;margin-left:4px}.plot.busy .label{animation:glow 2s ease-in-out infinite}.sparkles{pointer-events:none;z-index:3}.sparkles i{position:absolute;top:30%;left:22%;width:5px;height:5px;background:#ffe7a1;box-shadow:0 0 10px 3px #f6cf66;border-radius:50%;animation:float 8s infinite}.sparkles i:nth-child(2){top:64%;left:67%;animation-delay:-3s}.sparkles i:nth-child(3){top:73%;left:27%;animation-delay:-5s}.water{stroke-dasharray:10 21;animation:flow 12s linear infinite}.smoke{animation:smoke 2.6s linear infinite;transform-origin:center}.smoke:nth-of-type(2){animation-delay:-1.3s}@keyframes smoke{from{opacity:.6;translate:0 2px}to{opacity:0;translate:7px -14px}}@keyframes float{0%,100%{translate:0 0;opacity:0}50%{translate:16px -22px;opacity:.9}}@keyframes flow{to{stroke-dashoffset:-124}}@keyframes glow{50%{border-color:#fff0ae;box-shadow:0 0 12px #efb44e}}aside{display:grid;align-content:start;gap:12px}.panel{background:linear-gradient(155deg,#2d3528,#202720 52%);border:1px solid var(--line);border-radius:12px;padding:16px}.portrait{height:112px;display:grid;place-items:center;background:radial-gradient(ellipse,#526748,#283727 70%);border:1px solid #505a40;border-radius:8px;margin-bottom:13px;overflow:hidden}.portrait svg{width:147px;height:auto}.detail h2{font-size:27px;margin:4px 0}.detail p,.queue p,dialog p,dialog li{color:var(--muted);line-height:1.45;margin:6px 0 12px}.stat{border-block:1px solid #4b503d;display:flex;justify-content:space-between;align-items:center;padding:9px 0;margin:12px 0;color:var(--muted);font-size:13px}.stat b{color:#b4df93}.costs{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 10px}.cost{background:#191f19;border:1px solid #48503e;padding:3px 6px;border-radius:5px;display:flex;align-items:center;gap:4px;font-size:12px}.cost svg{width:16px;height:16px}.cost.low{color:#ffab91}.action{width:100%;background:linear-gradient(#f5ce87,#c18a40);color:#211b11;border:1px solid #f3cc81;border-radius:6px;padding:10px;font-weight:800}.action:disabled{background:#394036;border-color:#51584a;color:#bdc0ad;cursor:default}.note{color:var(--muted);font-size:12px;margin:7px 0;display:block}.queue h3{font-size:20px;margin-top:6px}.queue p{margin-bottom:0;font-size:13px}progress{width:100%;height:8px;accent-color:#efbb66}.queue time{color:var(--gold);font-variant-numeric:tabular-nums}footer{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;padding:13px 0}dialog{background:#242e23;border:1px solid #83744e;border-radius:12px;color:var(--ink);max-width:min(480px,calc(100% - 28px));padding:25px}dialog::backdrop{background:#0c130cba}.close{float:right}#toast{position:fixed;z-index:6;bottom:18px;left:50%;transform:translateX(-50%);background:#303c28;color:#fff1c5;border-radius:8px;padding:10px 15px;box-shadow:0 4px 20px #111;text-align:center;max-width:90vw}#toast:empty{display:none}
@media(max-width:920px){.tag{display:none}.layout{grid-template-columns:minmax(0,1fr) 275px}.world{min-height:510px}.resource{min-width:69px}}
@media(max-width:700px){header{display:block;padding:9px 10px}.brand{margin-bottom:8px}.brand strong{font-size:20px}.crest{padding:3px 8px}.resource{min-width:0;padding:5px 3px;grid-template-columns:17px 1fr;gap:1px}.resource svg{width:16px}.resource b{font-size:13px}.resource small{font-size:9px}#resources{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}main{padding:16px 9px 6px}.layout{grid-template-columns:1fr;gap:10px}.world{height:clamp(310px,53vh,480px);min-height:0}.plot{width:clamp(68px,17vw,103px)}.plot .label{padding:3px 4px}.map-label{font-size:8px;padding:5px}.portrait{height:85px}footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.terrain{isolation:isolate}.land{z-index:0;pointer-events:none}.land>path:not(:last-of-type),.land>g{display:none}.land>path:last-of-type{stroke:#d3b579;stroke-width:8;stroke-dasharray:2 3;opacity:.5}
/* Full-screen map with floating controls and a building window. */
body{overflow:hidden;background:#233b25;min-height:0}
main{position:fixed;inset:0;max-width:none;padding:0;isolation:isolate}
header{position:fixed;z-index:5;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));min-height:0;padding:9px 12px;gap:12px;background:#19241dea;border:1px solid #a39057;border-radius:12px;box-shadow:0 5px 20px #1422168c}
.brand strong{font-size:23px}
.world{position:absolute;inset:0;height:auto;min-height:0;border:0;border-radius:0}
.world::after{box-shadow:inset 0 0 95px #17231591}
.map-label{display:none}
.hud-tools{position:absolute;z-index:5;top:max(86px,calc(env(safe-area-inset-top) + 74px));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:6px}
#modeText{position:absolute;right:0;top:100%;padding:4px 6px;border-radius:5px;background:#172318e8;color:#ebdbb5;font-size:10px;margin-top:4px;white-space:nowrap}
.queue{position:absolute;z-index:4;left:max(12px,env(safe-area-inset-left));bottom:max(44px,calc(env(safe-area-inset-bottom) + 33px));width:min(280px,calc(100vw - 75px));padding:10px 13px;background:#202a21ed;box-shadow:0 4px 20px #1422167d}
.queue:has(#queue p){display:none}
.queue h3{font-size:16px}
.queue time{display:block;font-size:13px}
footer{position:absolute;z-index:4;left:max(12px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));padding:5px 7px;border-radius:5px;background:#19241de0;color:#e8dec6;font-size:11px}
.plot{width:clamp(96px,14vw,210px);filter:drop-shadow(0 5px 4px #1625199c);transition:filter .2s}
.plot[aria-pressed=true]{filter:drop-shadow(0 0 6px #ffe096a8) drop-shadow(0 5px 4px #1625199c)}
.plot .sprite{width:100%;height:clamp(62px,19vh,161px);object-fit:contain;object-position:center bottom;transition:transform .18s;pointer-events:none}
.plot .sprite.upgraded{transform:scale(1.09);transform-origin:center bottom}
.plot:hover .sprite{transform:scale(1.075)}
.plot:hover .sprite.upgraded{transform:scale(1.15)}
.plot .label{margin-top:1px}
#plot-hall .sprite{scale:1.15;transform-origin:center bottom}
.plot.busy::after{content:'';position:absolute;bottom:21px;width:64%;height:18px;border:2px dashed #ffdc80;border-radius:50%;animation:site-pulse 2s infinite;pointer-events:none}
@keyframes site-pulse{50%{scale:1.1;opacity:.36}}
dialog{width:min(430px,calc(100% - 24px));max-height:calc(100dvh - 28px);overflow:auto;box-shadow:0 16px 65px #070d08b5}
dialog::backdrop{background:#0e1b125e;backdrop-filter:blur(2px)}
dialog form[method="dialog"]:has(> .close){position:absolute;z-index:1;top:10px;right:10px;margin:0}
dialog .close{font-size:21px;line-height:1;width:37px;height:37px;padding:0}
.portrait{height:clamp(95px,23vh,185px)}
.portrait img{width:88%;height:100%;min-height:0;object-fit:contain;filter:drop-shadow(0 6px 6px #1b2b1b)}
@media(max-width:700px){
  header{display:block;left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));padding:6px;top:max(6px,env(safe-area-inset-top))}
  .brand{margin-bottom:5px}.brand strong{font-size:18px}.brand small{display:none}.crest{font-size:14px}
  .hud-tools{top:max(91px,calc(env(safe-area-inset-top) + 86px));right:max(7px,env(safe-area-inset-right))}
  .hud-tools button{padding:6px 8px}
  .plot{width:clamp(65px,22vw,128px)}
  .plot .sprite{height:clamp(48px,13vh,110px)}
  .plot .label{font-size:9px}
  .terrain{background-size:auto 100%}
  dialog{padding:15px}
}
@media(max-height:460px) and (orientation:landscape){
  .brand small{display:none}.brand strong{font-size:16px}.crest{font-size:15px;padding:4px 7px}
  header{display:flex;padding:4px 7px}.brand{margin:0}
  .hud-tools{top:61px}.plot .sprite{height:clamp(35px,16vh,68px)}
  .queue{padding:6px 8px;width:170px;bottom:27px}
  dialog .portrait{height:75px}
}
.portrait{grid-template-rows:minmax(0,1fr)}
.plot .sprite[src$="/plot.webp"]{width:78%}
@media(max-width:700px){.terrain{background-size:155% 100%}}
.terrain{background-size:100% 100%;background-image:linear-gradient(#302c1b16,#4c381921),url(map.webp)}
.land{display:block;object-fit:fill;z-index:0}
.plot{transform:translate(-50%,-100%);width:clamp(105px,17vw,245px);filter:none}
.building-ground{position:relative;display:grid;place-items:end center;width:100%;isolation:isolate}
.building-ground::before{content:'';position:absolute;z-index:-1;bottom:1%;width:89%;height:34%;background:radial-gradient(ellipse,#272c13a3,transparent 70%);transform:translate(5%,10%);pointer-events:none}
.plot .sprite{height:clamp(75px,22vh,215px);filter:drop-shadow(4px 5px 3px #25291679);z-index:1}
.plot .sprite[src$="/plot.webp"]{width:71%}
#plot-hall .sprite{scale:1.09}
.plot .label{position:absolute;top:100%;margin-top:2px;z-index:3}
.plot.busy::after{display:none}
.plot .scaffold{position:absolute;z-index:2;bottom:0;width:85%;height:78%;overflow:visible;pointer-events:none;filter:drop-shadow(1px 2px 1px #3c261e)}
.build-hoist{animation:hoist 3s ease-in-out infinite alternate}
.build-dust{animation:dust 1.5s ease-out infinite;transform-origin:62px 108px}
@keyframes hoist{from{transform:translateY(0)}to{transform:translateY(28px)}}
@keyframes dust{0%{opacity:0;transform:scale(.5)}25%{opacity:.75}100%{opacity:0;transform:translateY(-20px) scale(1.4)}}
.site-meter{position:absolute;z-index:4;top:calc(100% + 27px);width:86px;display:grid;justify-items:center;padding:3px 6px;background:#24271dec;border:1px solid #bb995e;border-radius:5px;pointer-events:none}
.site-meter progress{height:5px;margin:1px 0 2px}
.site-meter time{font:10px system-ui;color:#ffe2a6;font-variant-numeric:tabular-nums}
.plot.finished .building-ground{animation:finished .8s ease-out}
@keyframes finished{0%{filter:brightness(1);scale:.94}28%{filter:brightness(1.65) drop-shadow(0 0 10px #ffe3a2);scale:1.08}100%{filter:none;scale:1}}
@media(max-width:700px){
  .plot{width:clamp(66px,24vw,140px)}
  .plot .sprite{height:clamp(54px,14vh,112px)}
  .site-meter{top:calc(100% + 20px);width:65px}
}
@media(max-height:460px) and (orientation:landscape){
  .plot .sprite{height:clamp(40px,19vh,85px)}
  .site-meter{top:calc(100% + 20px)}
}

/* The map and its controls share the same colored-pencil palette. */
:root{color-scheme:light;--ink:#3d3025;--muted:#655340;--gold:#774b33;--paper:#f5e7c9;--paper-edge:#947b58}
body{background:#e8dab6;font-family:Georgia,'Times New Roman',serif}
.terrain{background-image:url(map.webp)}
.world::after{box-shadow:inset 0 0 90px #70503130}
.land{opacity:.88}
.plot .sprite{filter:drop-shadow(2px 3px 2px #534b343b)}
.plot[aria-pressed=true]{filter:none}
.building-ground::before{background:radial-gradient(ellipse,#67593a60,transparent 71%)}
.plot .scaffold{filter:drop-shadow(1px 1px 0 #6a4b39a8) saturate(.68)}
header,dialog,.queue,.plain,.plot .label,.plot[aria-pressed=true] .label,.site-meter,
#modeText,footer,#toast{
  color:var(--ink);
  background: url(paper.svg) repeat,var(--paper);
  border-color:var(--paper-edge);
  box-shadow:0 2px 4px #47372338;
}
header{border-radius:5px 8px 6px 9px}
.brand strong{font-style:italic}
.brand small,.eyebrow,.tag{color:#775336}
.crest{background:#a6644e;color:#fff1d6;border-color:#794a36}
.resource,.cost{background:#fff7de8c;border-color:#ab9470;color:var(--ink)}
.resource small,.detail p,.queue p,.note{color:var(--muted)}
.cost.low{color:#9e3326}
.plain:hover{background-color:#e4cca0}
button:focus-visible{outline-color:#8a4c33}
.plot .label{border-radius:3px 5px 4px 6px}
.plot[aria-pressed=true] .label{background-color:#ebd09d;border-color:#8a5338}
.plot .label small,.site-meter time,.queue time{color:#71492d}
.portrait{background:url(paper.svg),radial-gradient(ellipse,#fdf5de,#ead6ad);border-color:#bba581}
.portrait img{filter:drop-shadow(1px 3px 3px #5d493838)}
.stat{color:#594837;border-color:#b7a07a}.stat b{color:#41582e}
.action{background:url(paper.svg),linear-gradient(#dbae71,#c89057);border-color:#94633e;color:#32251b}
.action:disabled{background:#e6d8b9;border-color:#b29c78;color:#685a47}
dialog::backdrop{background:#5c482c5c;backdrop-filter:blur(1px)}
progress{accent-color:#8c5237}
.sparkles i{background:#f8e2a1;box-shadow:0 0 6px 2px #e8bf73}
.plot .sprite,.portrait img{filter:sepia(.13) saturate(.82) drop-shadow(1px 2px 2px #57473340)}
.world::after{background:url(paper.svg);mix-blend-mode:multiply;opacity:.57}
.resource svg,.cost svg{filter:sepia(.18) saturate(.74)}
.resource svg :is(path,ellipse,circle),.cost svg :is(path,ellipse,circle){stroke-linejoin:round;stroke-linecap:round}

/* Keep terrain, streets and plot coordinates on the same proportional canvas. */
.world{background:#decda8 url(paper.svg)}
.terrain{
  inset:0;
  margin:auto;
  width:min(100%,150dvh);
  height:min(100%,calc(100vw * 2 / 3));
  aspect-ratio:3 / 2;
  container-type:size;
  background:none;
}
.terrain::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(#f3e5c343,#f3e5c343),url(map.webp) center / contain no-repeat;
  filter:saturate(.72);
  pointer-events:none;
}
.world::after{box-shadow:none}
.plot{width:min(20cqw,245px)}
.plot .sprite{height:min(23cqh,215px);filter:drop-shadow(1px 2px 1px #42301f8a)}
.building-ground::before{width:83%;height:28%;background:radial-gradient(ellipse,#4a392e7a,transparent 71%)}
.land{opacity:.97}
.queue:has(#queue p){display:block}
.queue-title{display:flex;justify-content:space-between;gap:10px}
.queue-job+.queue-job{border-top:1px solid #ac936d;margin-top:6px;padding-top:3px}
.queue-job h3{margin-top:3px}
.queue-job progress{display:block;margin:3px 0}
@media(max-width:700px) and (orientation:portrait){
  .plot .label{font-size:8px;padding-inline:3px}
}

/* Pixel village. The world is drawn at one scale on both axes. */
:root{--paper:#f4d698;--paper-edge:#855641;--ink:#443239;--muted:#63463d;--gold:#774736}
body{background:#93a95e;font-family:system-ui,sans-serif}
.world{background:#93a95e}
.world::after,.terrain::before,.sparkles,.building-ground::before{display:none}
.terrain{inset:0;width:100%;height:100%;aspect-ratio:auto;overflow:hidden}
#pixel-map{position:absolute;inset:0;image-rendering:pixelated;pointer-events:none}
.plot{width:calc(var(--map-pixel,2px) * 66);transition:none}
.plot .sprite{height:calc(var(--map-pixel,2px) * 61);image-rendering:pixelated;filter:none}
.plot:hover .sprite{transform:none}
#plot-hall .sprite{scale:1}
.plot .sprite[src$="/plot.webp"]{width:100%}
.portrait img{image-rendering:pixelated;filter:none}
header,dialog,.queue,.plain,.plot .label,.plot[aria-pressed=true] .label,.site-meter,
#modeText,footer,#toast{
  background:var(--paper);
  border:2px solid var(--paper-edge);
  border-radius:3px;
  box-shadow:0 2px 0 #593e42, inset 0 0 0 1px #ffeab5;
}
header{background:#edbc75}
.brand strong{font:800 22px Georgia,serif}
.brand small,.eyebrow,.tag{letter-spacing:.08em}
.crest{background:#697e63;border-color:#4d5d51;border-radius:2px}
.resource,.cost{background:#ffe6ae;border-color:#a77957;border-radius:2px}
.portrait{background:#e6bc7f;border-radius:2px;border-color:#a77957}
.action{background:#d99859;border:2px solid #935d47;border-radius:2px}
.plot .label{font:700 11px system-ui,sans-serif;margin-top:0;padding:1px 5px}
.plot .label small{margin-left:3px}
.site-meter{top:calc(100% + 20px)}
.queue{max-width:calc(100% - 63px)}
footer{font-size:10px}
@media(max-width:700px) and (orientation:portrait){
  header{padding:5px;top:max(6px,env(safe-area-inset-top))}
  .brand strong{font-size:17px}
  .hud-tools{top:max(98px,calc(env(safe-area-inset-top) + 92px))}
  .portrait-map .plot{width:calc(var(--map-pixel,2px) * 49)}
  .portrait-map .plot .sprite{height:calc(var(--map-pixel,2px) * 45)}
  .plot .label{font-size:9px;padding:0 3px}
  .queue{width: min(225px, calc(100% - 65px));padding:5px 7px}
  .queue-job h3{font-size:12px}
  .queue-job+.queue-job{margin-top:3px}
  .site-meter{top:calc(100% + 16px)}
}

/* Soft ground contact and a clearer outline for the detailed village sprites. */
.plot .sprite{filter:drop-shadow(0 2px 0 #3b4f3c69)}
.plot[aria-pressed=true] .sprite{filter:drop-shadow(0 2px 0 #3b4f3c69) drop-shadow(0 0 2px #ffe6a1)}
.portrait{background:radial-gradient(ellipse at 50% 88%,#c9ac72 0 25%,#e9c488 62%)}
.portrait img{filter:drop-shadow(0 2px 0 #704b4e40)}
.plot .sprite[src$="/plot.webp"]{width:76%}

/* Preserve hard sprite pixels at every display scale. */
.plot .sprite,.portrait img{image-rendering:crisp-edges;image-rendering:pixelated;filter:none}
.plot[aria-pressed=true] .sprite{filter:none}
.plot[aria-pressed=true] .label{background:#ffe2a6;border-color:#6c4836}

/* Iron and bronze frames for the village interface. */
:root{
  color-scheme:dark;
  --paper:#28232c;--paper-edge:#85633d;--ink:#f3dfb5;
  --muted:#c9b698;--gold:#e7bc78;
}
header,dialog,.queue,.plain,.plot .label,.plot[aria-pressed=true] .label,.site-meter,
#modeText,footer,#toast,.action,.resource,.cost{
  color:var(--ink);
  background:
    linear-gradient(135deg,#b89153 4px,transparent 5px) top left,
    linear-gradient(225deg,#b89153 4px,transparent 5px) top right,
    linear-gradient(45deg,#b89153 4px,transparent 5px) bottom left,
    linear-gradient(315deg,#b89153 4px,transparent 5px) bottom right,
    linear-gradient(#38303a,#241f29);
  background-size:8px 8px,8px 8px,8px 8px,8px 8px,100% 100%;
  background-repeat:no-repeat;
  border:1px solid #987449;
  box-shadow:0 2px 0 #1b151b, inset 0 0 0 2px #211a23, inset 0 0 0 3px #b48b5144;
}
header,.queue,dialog{border-width:2px}
.resource{padding:6px 7px}
.resource b{color:#ffe0a0}
.resource small,.detail p,.queue p,.note{color:var(--muted)}
.crest{background:#35313c;color:#eac380;border-color:#a27b4b}
.brand small,.eyebrow,.tag,.site-meter time,.queue time,.plot .label small{color:var(--gold)}
.tag{border-color:#8b6944}
.queue-title{border-bottom:1px solid #94734a;padding-bottom:4px}
.queue-job+.queue-job,.stat{border-color:#72593f}
.stat{color:var(--muted)}.stat b{color:#c3df9c}
.portrait{background:radial-gradient(ellipse at 50% 90%,#66523d,#332a35 65%);border-color:#866846}
.plain:hover,.action:hover{background-color:#4a3b3d;filter:brightness(1.15)}
.action:disabled{background:#39313a;color:#bfaf99;border-color:#6b5650}
.cost.low{color:#ffad93}
progress{accent-color:#d6a65d}
dialog::backdrop{background:#15121bbb}
.plot[aria-pressed=true] .label{border-color:#e2b86f}
.terrain{overflow:auto;overscroll-behavior:contain;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-x pan-y}
.terrain::-webkit-scrollbar{display:none}
.terrain.dragging,.terrain.dragging .plot{cursor:grabbing}
#map-scene{position:relative}
#pixel-map{width:100%;height:100%}
.map-plots{pointer-events:none}
.plot{pointer-events:auto}
@media(max-width:700px) and (orientation:portrait){
  .resource{padding:4px 3px}
  .queue{padding:6px 8px}
}
.world,body{background:#456747}
.plot .sprite{filter:drop-shadow(0 2px 0 #263b3280)}
.plot[aria-pressed=true] .sprite{filter:drop-shadow(0 2px 0 #263b3280)}

.terrain.portrait-map{overflow:hidden;touch-action:auto;cursor:default}
.portrait-map .plot{width:calc(var(--map-pixel,1.5px) * 58)}
.portrait-map .plot .sprite{height:calc(var(--map-pixel,1.5px) * 51)}
.portrait-map .plot .label{font-size:clamp(8px,2.3vw,11px);white-space:nowrap}
@media(max-width:700px) and (orientation:portrait){
  .queue{bottom:max(35px,calc(env(safe-area-inset-bottom) + 25px))}
  .queue-job h3{font-size:11px}
  .queue-job time{font-size:10px}
  .queue-job progress{height:5px;margin:1px 0}
}

#menu-open{width:36px;height:34px;padding:0;display:grid;place-items:center;font-size:18px}
#menu .menu-items{display:grid;gap:10px;margin-top:14px}
.menu-items section{padding:9px 11px;border:1px solid #745838;background:#211d25;border-radius:3px}
.menu-items h3{margin:0 0 5px;font-size:14px;color:var(--gold)}
.menu-items p,#menu #modeText{position:static;margin:0 0 5px;padding:0;color:var(--muted);background:none;border:0;box-shadow:none;font-size:12px}
.menu-items .plain{padding:5px 8px}
.plot .site-meter{
  display:block;position:absolute;top:calc(100% + 4px);width:74px;height:15px;
  overflow:hidden;padding:0;border-radius:3px;background:#201b25;border:1px solid #a18050;
}
.site-meter progress{display:block;width:100%;height:100%;margin:0;appearance:none;-webkit-appearance:none;border:0;border-radius:0;background:#201b25}
.site-meter progress::-webkit-progress-bar{background:#201b25}
.site-meter progress::-webkit-progress-value{background:#8b622f;transition:width .22s ease-out}
.site-meter progress::-moz-progress-bar{background:#8b622f}
.site-meter .site-remaining{position:absolute;inset:0;display:grid;place-items:center;color:#fff3d8;font:700 9px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #211710}
#menu[open],#help[open]{animation:menu-in .14s ease-out}
@keyframes menu-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px) and (orientation:portrait){
  #menu-open{width:30px;height:29px;font-size:15px}
  .plot .site-meter{top:calc(100% + 3px);width:60px;height:14px}
}
@media(prefers-reduced-motion:reduce){
  #menu[open],#help[open]{animation:none}
  .site-meter progress::-webkit-progress-value{transition:none}
}

/* Illustrated evening palette and ambient motion. */
:root{--ink:#f1dfbe;--muted:#c2b39f;--gold:#e8be84}
.world,body{background:#293e37}
#pixel-map,.plot .sprite,.portrait img{image-rendering:auto}
.plot .sprite{filter:drop-shadow(0 4px 3px #16282485);transition:filter .18s}
.plot[aria-pressed=true] .sprite{filter:drop-shadow(0 4px 3px #16282485) drop-shadow(0 0 2px #ffe0a159)}
header,dialog,.queue,.resource,.plain,.action{border-color:#957751;border-radius:6px}
header,.queue,dialog{box-shadow:0 3px 13px #161719af,inset 0 0 0 2px #22222a,inset 0 0 0 3px #bb9b5b4a}
.portrait{background:radial-gradient(ellipse at 50% 90%,#7a6150,#35313b 65%)}
#water-motion,#map-lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#water-motion path{fill:none;stroke:#c5e3df;stroke-width:.64;stroke-linecap:round;stroke-dasharray:3 8;opacity:.64;animation:water-drift 3s linear infinite}
@keyframes water-drift{to{stroke-dashoffset:-22}}
#map-lights i{position:absolute;width:calc(var(--map-pixel) * 16);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffd28e88,transparent 68%);animation:light-breathe 3.6s ease-in-out infinite alternate}
@keyframes light-breathe{from{opacity:.34}to{opacity:.88}}
.hearth-smoke{position:absolute;left:57%;top:21%;width:1px;height:1px;pointer-events:none}
.hearth-smoke i{position:absolute;width:8px;height:7px;background:#ddd6c78c;border-radius:50%;filter:blur(2px);opacity:0;animation:hearth-drift 4.4s ease-out infinite}
.hearth-smoke i:nth-child(2){animation-delay:-1.46s}.hearth-smoke i:nth-child(3){animation-delay:-2.93s}
#plot-hall .hearth-smoke,#plot-farm .hearth-smoke,#plot-store .hearth-smoke{display:none}
@keyframes hearth-drift{15%{opacity:.5}to{transform:translate(14px,-24px) scale(2);opacity:0}}
@media(prefers-reduced-motion:reduce){
 #water-motion path,#map-lights i,.hearth-smoke i{animation:none}
}

/* Hand-inked comic interface. */
:root{--ink:#ffedc7;--muted:#ded0b1;--gold:#ffcf78}
.world,body{background:#73994c}
header,dialog,.queue,.plain,.resource,.action,.cost,#toast{
  background:#3e303c;
  border:2px solid #241e2a;
  border-radius:9px 7px 8px 6px;
  box-shadow:0 3px 0 #25202a,inset 0 0 0 2px #a77c54;
}
header,.queue,dialog{background:#443343;border-width:3px;box-shadow:0 4px 0 #231d28,inset 0 0 0 2px #d2a363}
.resource,.cost{background:#58404a;box-shadow:0 2px 0 #251e28,inset 0 1px 0 #a88160}
.resource svg,.cost svg{filter:none}
.plain,.action{background:#376364;box-shadow:0 2px 0 #231d28,inset 0 2px 0 #89a69a}
.plain:hover,.action:hover{background:#437a76}
.action:disabled{background:#443c45;box-shadow:0 2px 0 #241e27,inset 0 1px 0 #78656a}
#menu-open.crest{background:#416d70;border:2px solid #241e2a;box-shadow:0 2px 0 #211a25,inset 0 0 0 1px #80a5a1}
.brand strong{font-weight:900;letter-spacing:.015em;text-shadow:1px 2px #271f2b}
.brand small,.tag,.eyebrow{letter-spacing:.065em}
.portrait{background:#76624d;border:2px solid #352c36;box-shadow:inset 0 -12px 0 #5b5144}
.menu-items section{background:#362b38;border-color:#695365;border-radius:6px}
.plot .label,.plot[aria-pressed=true] .label{background:#3d2c39;border:1px solid #231e28;border-radius:5px 3px 5px 3px;box-shadow:0 2px #28212a,inset 0 0 0 1px #ac8458}
.plot[aria-pressed=true] .label{background:#65453e}
.plot .sprite,.plot[aria-pressed=true] .sprite{filter:drop-shadow(1px 3px 0 #25362465)}
.site-meter progress::-webkit-progress-value{background:#b17b42}
.site-meter progress::-moz-progress-bar{background:#b17b42}
.hearth-smoke i{background:#e7dfca9c;border:1px solid #554e5740;filter:none}
#water-motion path{stroke:#cef2e1;stroke-width:.8}

.plot .work-art{
  position:absolute;pointer-events:none;z-index:2;bottom:0;right:-12%;
  width:42%;height:auto;overflow:visible;filter:drop-shadow(1px 2px 0 #2d332b58);
}
.plot .work-mill{right:-13%;width:34%}
.plot .work-crane{right:-15%;width:39%}
.plot .work-chop{right:-12%;width:39%}
.plot .work-kiln{right:-9%;width:28%}
.mill-rotor{transform-origin:33px 30px;animation:mill-turn 6s linear infinite}
.crane-rope{transform-origin:61px 12px;animation:crane-rope 5.6s ease-in-out infinite}
.crane-load{animation:crane-load 5.6s ease-in-out infinite}
.wood-axe{transform-origin:28px 48px;animation:chop 2.3s infinite}
.wood-chips{animation:chips 2.3s infinite}
.kiln-fire{transform-origin:26px 39px;animation:kiln-flicker .82s ease-in-out infinite alternate}
@keyframes mill-turn{to{transform:rotate(360deg)}}
@keyframes crane-rope{0%,100%{transform:scaleY(1)}45%,65%{transform:scaleY(.59)}}
@keyframes crane-load{0%,100%{transform:translateY(0)}45%,65%{transform:translateY(-13.5px)}}
@keyframes chop{0%,100%{transform:rotate(18deg)}38%{transform:rotate(-56deg)}53%,60%{transform:rotate(47deg)}69%{transform:rotate(25deg)}}
@keyframes chips{0%,51%,75%,100%{opacity:0}54%{opacity:1;transform:translate(0,0)}70%{opacity:0;transform:translate(5px,-12px)}}
@keyframes kiln-flicker{from{transform:scale(.84,.91);opacity:.79}to{transform:scale(1.08,1.13);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .mill-rotor,.crane-rope,.crane-load,.wood-axe,.wood-chips,.kiln-fire{animation:none}
  .wood-chips{opacity:0}
}

.costs{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:5px}
.cost[data-resource]{display:grid;grid-template-columns:16px 1fr;align-items:center;column-gap:4px;row-gap:2px;padding:5px 6px}
.cost-value,.cost-short{grid-column:1/-1;font-variant-numeric:tabular-nums}
.cost-name,.cost-short{font-size:11px}
.cost.low{background:#4b2d36;border-color:#af625c}
.cost.low .cost-value,.cost.low .cost-short{color:#ff8179}
.cost-short:empty{display:none}
.plot .layered-sprite{width:100%;overflow:visible}
.portrait .layered-sprite{width:88%;height:100%;min-height:0;overflow:visible}
.layered-sprite{pointer-events:none}
.building-rotor{animation:mill-turn 8s linear infinite}
.building-flag{animation:flag-sway 1.65s ease-in-out infinite alternate}
@keyframes flag-sway{from{transform:skewY(-5deg) scaleX(.92)}to{transform:skewY(6deg) scaleX(1.03)}}
@media(prefers-reduced-motion:reduce){.building-rotor,.building-flag{animation:none}}
.plot .yard-art{position:absolute;bottom:1%;left:4%;width:35%;height:auto;pointer-events:none;z-index:2;filter:drop-shadow(1px 1px #2e302a77)}
.saw-spin{animation:mill-turn 3s linear infinite}
.chimney-puff{fill:#eee3cc;stroke:#5c4d47;stroke-width:1;opacity:0;animation:chimney-rise 3s ease-out infinite}
.chimney-puff.late{animation-delay:-1.5s}
.oven-flare{animation:kiln-flicker .48s ease-in-out infinite alternate}
.clay-rope{transform-origin:0 0;animation:clay-lift 4.7s ease-in-out infinite}
.yard-flag{transform-origin:8px 9px;animation:flag-sway 1.4s ease-in-out infinite alternate}
@keyframes chimney-rise{13%{opacity:.74}to{transform:translate(19px,-22px) scale(2);opacity:0}}
.clay-load{animation:clay-load 4.7s ease-in-out infinite}
@keyframes clay-load{0%,100%{transform:translateY(0)}43%,63%{transform:translateY(var(--lift))}}
@keyframes clay-lift{0%,100%{transform:scaleY(1)}43%,63%{transform:scaleY(.68)}}
@media(prefers-reduced-motion:reduce){
 .saw-spin,.chimney-puff,.oven-flare,.clay-rope,.clay-load,.yard-flag{animation:none}
 .chimney-puff{opacity:0}
}

.resource{text-align:left}
.resource:hover,.resource:focus-visible{border-color:#ffe0a0}
.resource-wait{color:#ffcf8a;font-variant-numeric:tabular-nums}
.resource-wait[hidden]{display:none}
.portrait:has(.building-rotor){padding-top:14px}

.resource-column{display:grid;align-content:start;min-width:0}
.resource-column .resource{width:100%}
.resource-rate{margin:3px 1px 0;padding:2px 0;text-align:center;color:#ffe0a0;background:#382d39;border:1px solid #755a52;border-radius:3px;font-size:clamp(9px,2.4vw,11px);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.resource-rate[hidden]{display:none}
.resource[aria-expanded=true]{border-color:#c49661}
.reset-button,.reset-button:hover{background:#723e45}
.advanced-building{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:0}
.building-extensions{position:absolute;inset:auto 0 0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none;filter:drop-shadow(0 2px 0 #2b302e77)}
.plot .building-extensions{height:100%}
.portrait .building-extensions{height:100%;width:94%}
.portrait .advanced-building .sprite{max-height:100%}

.terrain,.terrain.portrait-map{overflow:hidden;touch-action:none;cursor:default}
.map-plots{z-index:2}
.plot[data-area=east]{width:clamp(106px,32vw,238px)}
.plot[data-area=east] .sprite{height:clamp(100px,24vh,230px)}
.tower-pennant{animation:tower-wave 1.4s ease-in-out infinite alternate}
@keyframes tower-wave{from{transform:skewY(-10deg) scaleX(.8)}to{transform:skewY(9deg) scaleX(1.04)}}
@media(prefers-reduced-motion:reduce){.tower-pennant{animation:none}}

#plot-clay,#plot-store{width:clamp(88px,26vw,184px)}
#plot-clay .sprite,#plot-store .sprite{height:clamp(84px,19vh,175px)}

#map-window{position:absolute;top:6%;left:var(--map-left,0px);height:94%;width:var(--scene-width);overflow:hidden}
#map-scene{
  position:absolute;top:0;left:var(--map-offset,0px);height:100%;
  transition:left .28s cubic-bezier(.22,.75,.27,1);
}
#map-scene.dragging{transition:none}
.map-page{position:absolute;inset:0;overflow:hidden}
#east-page{left:100%;right:auto;width:100%}
@media(prefers-reduced-motion:reduce){#map-scene{transition:none}}
#map-scene .plot{width:calc(var(--map-pixel) * 68)}
#map-scene .plot .sprite{height:calc(var(--map-pixel) * 60)}
@media (max-height:540px) and (orientation:landscape){
  #map-scene .plot{width:calc(var(--map-pixel) * 46)}
  #map-scene .plot .sprite{height:calc(var(--map-pixel) * 41)}
}


.map-filter-defs{position:absolute;pointer-events:none}
#map-scene .plot .building-ground > .sprite:not([src$="/plot.webp"]),
#map-scene .plot .advanced-building{
  filter:url(#building-outline) drop-shadow(0 2px 1px #241d18a0);
}
#map-scene .plot .advanced-building :is(.sprite,.building-extensions){filter:none}

.training-dummy{animation:dummy-wobble 4.8s ease-in-out infinite}
.academy-light{opacity:.28;filter:blur(3px);animation:academy-light 3.6s ease-in-out infinite alternate}
.academy-glint{animation:academy-glint 4s ease-in-out infinite}
@keyframes dummy-wobble{0%,58%,85%,100%{transform:rotate(0)}64%{transform:rotate(8deg)}71%{transform:rotate(-5deg)}78%{transform:rotate(3deg)}}
@keyframes academy-light{from{opacity:.19}to{opacity:.46}}
@keyframes academy-glint{0%,55%,100%{opacity:0;transform:scale(.35)}66%{opacity:1;transform:scale(1)}77%{opacity:0;transform:scale(.5)}}
@media(prefers-reduced-motion:reduce){
  .training-dummy,.academy-light,.academy-glint{animation:none}
  .academy-glint{opacity:0}
}

.map-walkers{position:absolute;inset:0;z-index:1;pointer-events:none}
.market-walker{position:absolute;width:calc(var(--map-pixel) * 12);transform:translate(-50%,-91%)}
.market-walker svg{display:block;width:100%;overflow:visible;transform:scaleX(var(--facing,1))}
.walker-leg{transform-box:fill-box;transform-origin:50% 0;animation:walker-stride .57s ease-in-out infinite alternate}
.walker-leg-back{animation-direction:alternate-reverse}
.walker-body{animation:walker-bob .57s ease-in-out infinite}
@keyframes walker-stride{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
@keyframes walker-bob{50%{transform:translateY(-1.3px)}}
@media(prefers-reduced-motion:reduce){.walker-leg,.walker-body{animation:none}}

#west-page{left:-100%;right:auto;width:100%}

/* Reserve four equal columns across the building dialog. */
.detail .costs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.detail .cost[data-resource]{
  display:grid;min-width:0;min-height:0;
  grid-template-columns:minmax(0,1fr);align-content:start;justify-items:center;
  gap:2px;padding:4px 2px;line-height:1.15;text-align:center;
}
.detail .cost svg{width:22px;height:22px}
.detail .cost-value{font-size:clamp(8px,2.35vw,10px);white-space:nowrap}
#map-scene .plot .hall-tent{height:calc(var(--map-pixel) * 38)}
#map-scene .plot .hall-camp{height:calc(var(--map-pixel) * 48)}
#studies{display:grid;gap:6px;border-top:1px solid #896d51;padding-top:8px}
.study{display:grid;gap:4px;border:1px solid #806345;border-radius:5px;padding:6px 8px;background:#41343a}
.study small{font-size:11px;color:#e0c5a3}
.study .plain{justify-self:start;font-size:11px;padding:4px 8px}
.study .plain:disabled{opacity:.68;cursor:default}

.pier-angler{position:absolute;pointer-events:none}
.pier-angler svg{width:100%;display:block;overflow:visible}
.casting-arm{transform-origin:64px 25px;animation:fishing-cast 8s ease-in-out infinite}
.cast-line{animation:fishing-line 8s ease-in-out infinite}
@keyframes fishing-cast{0%,13%,83%,100%{transform:rotate(27deg)}8%{transform:rotate(53deg)}22%,58%{transform:rotate(0)}72%{transform:rotate(41deg)}}
@keyframes fishing-line{0%,15%,69%,100%{opacity:0}23%,60%{opacity:1}66%{opacity:0}}
@media(prefers-reduced-motion:reduce){.casting-arm,.cast-line{animation:none}}


@media(max-height:540px) and (orientation:landscape){
  #map-scene .plot .hall-tent{height:calc(var(--map-pixel) * 25)}
  #map-scene .plot .hall-camp{height:calc(var(--map-pixel) * 33)}
}


.plot[data-level] .label{padding-right:9px}
.plot .plot-level{
  position:absolute;top:0;right:0;transform:translate(45%,-45%);
  display:grid;place-items:center;width:1.7em;aspect-ratio:1;border-radius:50%;
  border:1px solid #c09a65;background:#392c37;color:#ffe0a0;
  font:700 9px/1 system-ui,sans-serif;box-shadow:0 1px 2px #251b18;
}

.plaza-paused :is(.walker-leg,.walker-body){animation:none}
.plaza-speaking .walker-body{animation:plaza-nod .75s ease-in-out infinite}
@keyframes plaza-nod{50%{transform:translateY(-1px) rotate(-2deg)}}
.plaza-speech{
  position:absolute;top:-5%;left:50%;transform:translate(-50%,-65%);
  display:flex;align-items:center;gap:2px;padding:2px 3px;
  border:1px solid #5c4737;border-radius:7px;background:#e3cca4;
}
.plaza-speech[hidden]{display:none}
.plaza-speech i{width:2px;height:2px;border-radius:50%;background:#644a38;animation:plaza-dot .85s ease-in-out infinite}
.plaza-speech i:nth-child(2){animation-delay:.14s}
.plaza-speech i:nth-child(3){animation-delay:.28s}
@keyframes plaza-dot{50%{opacity:.36;transform:translateY(-1px)}}

.fountain-water{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fountain-water :is(path,ellipse){fill:none;stroke:#aff3e9;stroke-linecap:round}
.fountain-jet{stroke-width:.85;stroke-dasharray:2 2;animation:fountain-flow .65s linear infinite}
.fountain-stream{stroke-width:.85;stroke-dasharray:3 3;animation:fountain-flow .8s linear infinite}
@keyframes fountain-flow{from{stroke-dashoffset:6;opacity:.7}to{stroke-dashoffset:0;opacity:.88}}
.fountain-ring{stroke-width:.85;transform-origin:205px 329px;animation:fountain-ripple 1.65s ease-out infinite}
.fountain-ring-late{animation-delay:-.825s}
@keyframes fountain-ripple{from{transform:scale(.35);opacity:.8}to{transform:scale(1.65,1.3);opacity:0}}
.fountain-spray{fill:#cdfaf0;animation:fountain-splash .75s ease-out infinite}
@keyframes fountain-splash{0%,100%{opacity:0}35%{opacity:.9;transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){
  .plaza-speaking .walker-body,.plaza-speech i,.fountain-water *{animation:none}
  .fountain-water,.plaza-speech{display:none}
}

/* Current building and a miniature of its next actual map appearance. */
.portrait-with-preview{position:relative;--preview-width:clamp(58px,29%,104px)}
.portrait-current{
  display:grid;place-items:center;width:100%;height:100%;min-height:0;
  padding-inline:clamp(25px,12%,52px) calc(var(--preview-width) + 8px);
}
.portrait-next{
  position:absolute;right:5px;bottom:5px;width:var(--preview-width);
  height:clamp(52px,13vh,101px);margin:0;padding:3px;
  display:grid;grid-template-rows:minmax(0,1fr) auto;gap:2px;overflow:hidden;
  border:1px solid #ad8658;border-radius:5px;background:#3d3036;
  box-shadow:0 2px 5px #251d26a0;
}
.portrait-next-art{display:grid;place-items:center;min-width:0;min-height:0}
.portrait-next-art :is(.sprite,.building-extensions){width:88%;height:100%;min-height:0;object-fit:contain}
.portrait-next-art .advanced-building{min-width:0}
.portrait-next figcaption{color:#ffe0a6;text-align:center;font-size:clamp(8px,2vw,11px);line-height:1.15}

.construction-working :is(.walker-leg,.walker-body){animation:none}
.construction-working .builder-hammer{transform-origin:22px 28px;animation:build-hammer 1s ease-in-out infinite}
@keyframes build-hammer{0%,100%{transform:rotate(-12deg)}48%{transform:rotate(-45deg)}68%{transform:rotate(28deg)}}
#queue{max-height:28dvh;overflow:auto;overscroll-behavior:contain}
.queue-waiting{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center}
.queue-waiting h3{margin:0;grid-column:1}
.queue-waiting small{grid-column:1;color:#f4d49e}
.queue-waiting .plain{grid-column:2;grid-row:1 / span 2;padding:3px 6px;font-size:10px}
@media(prefers-reduced-motion:reduce){.construction-working .builder-hammer{animation:none}}

.return-detail h3{margin:8px 0 3px;font-size:14px;color:#ffe0a6}
.return-detail ul{padding-inline-start:18px;margin:3px 0 7px}
.return-detail li+li{margin-top:4px}
.return-detail #return-resources{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:4px 0}
#return-resources div{display:grid;justify-items:center;gap:3px;min-width:0;padding:5px 2px;background:#443640;border:1px solid #98724f;border-radius:4px}
#return-resources svg{width:19px;height:19px}
#return-resources dt{font-size:9px;overflow-wrap:anywhere;text-align:center}
#return-resources dd{margin:0;font-size:clamp(9px,2.4vw,13px);font-weight:700;color:#ffde9e;overflow-wrap:anywhere;text-align:center}

#recruitment{border-top:1px solid #987451;padding-top:7px;margin-top:8px}
#recruitment h3{margin:3px 0 7px;color:#ffe0a6}
.recruit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.recruit-list :is(article,label){display:grid;justify-items:center;align-content:start;gap:4px;text-align:center;padding:6px 4px;border:1px solid #987451;border-radius:5px;background:#40313d;min-width:0}
.recruit-list img{width:100%;height:clamp(46px,10vh,90px);object-fit:contain;pointer-events:none}
.recruit-list small{font-size:11px;color:#f0cea1}
.recruit-list button{font-size:11px;max-width:100%;white-space:normal;padding:4px 6px}
.recruit-list button:disabled{opacity:.68}
#arena{width:min(620px,calc(100% - 22px));max-width:calc(100% - 22px)}
#arena-status{margin:3px 0 9px;color:#ffdc9d;font-weight:700}
.arena-choice input{width:64px;max-width:100%;padding:4px;border:1px solid #ae885f;border-radius:4px;background:#302530;color:#ffe5b6;text-align:center;font:inherit}
.arena-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;padding:2px;
  background:#2e261e;border:1px solid #b39166;border-radius:5px;
}
.arena-cell{
  position:relative;display:grid;place-items:center;min-width:0;padding:0;aspect-ratio:1;
  border:1px solid #5d543f;border-radius:2px;
  background:radial-gradient(ellipse at 70% 33%,#7f7451,#544f37);
  touch-action:manipulation;
}
.arena-cell:nth-child(even){background:radial-gradient(ellipse at 35% 40%,#746e4e,#4c4936)}
.arena-cell.player{background:#4b6061}
.arena-cell.enemy{background:#754844}
.arena-cell.move-available{background:#607341;box-shadow:inset 0 0 0 1px #a8b776}
.arena-cell.attack-available{background:#8b3c39;box-shadow:inset 0 0 0 1px #ffc781}
.arena-cell.unit-selected{box-shadow:inset 0 0 0 2px #ffe098}
.arena-cell.unit-used img{opacity:.66}
.arena-cell img{position:absolute;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 1px #242018bb)}
.unit-hp{position:absolute;bottom:0;right:0;border-radius:3px;padding:0 2px;background:#2e2427;color:#fff0c6;font-size:clamp(8px,2vw,12px);line-height:1.15}
.arena-log{padding-inline-start:18px;font-size:11px;color:#dccaaf;margin-block:7px 0}
.arena-result{color:#ffdb9d;font-weight:700}

.lake-fog{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.plot .site-meter-activity{width:max-content;min-width:106px}
.plot .site-meter-stacked{margin-top:17px}

.recruit-quantity{display:flex;align-items:center;gap:8px}
.recruit-quantity .plain{min-width:30px;min-height:30px;font-size:15px}
.recruit-quantity output{min-width:2ch;font-weight:700;color:#ffe0a6;font-variant-numeric:tabular-nums}
.arena-cell .unit-health{
  position:absolute;z-index:2;inset:1px 2px auto;height:clamp(4px,1vw,7px);
  border:1px solid #2d231e;border-radius:3px;overflow:hidden;background:#332421;pointer-events:none;
}
.unit-health>span{display:block;height:100%;background:#94d469}
.arena-cell.enemy .unit-health>span{background:#ec8065}
.arena-cell img{top:5px;height:calc(100% - 6px)}
.arena-cell:is(.unit-strike,.unit-move,.unit-hit){z-index:2}
.arena-cell.unit-move img{animation:arena-move .34s ease-out}
.arena-cell.unit-strike img{animation:arena-strike .31s ease-out}
.arena-cell.unit-hit img{animation:arena-hit .38s ease-out}
.arena-cell.unit-fallen img{animation:arena-fall .43s ease-out both}
.arena-cell.unit-hit-delayed img,.arena-cell.unit-hit-delayed .arena-damage{animation-delay:.15s}
.arena-damage{
  position:absolute;z-index:3;top:25%;left:50%;color:#ffe7a6;
  font-size:clamp(10px,3.3vw,19px);font-weight:900;text-shadow:0 1px 2px #261718,1px 0 #261718;
  pointer-events:none;animation:arena-damage .45s ease-out both;
}
.arena-projectile{position:absolute;inset:0;z-index:4;pointer-events:none;animation:arena-shot .16s linear both}
.arena-projectile::after{content:'';position:absolute;top:46%;left:46%;width:9px;height:3px;border-radius:50%;background:#fff0ab;box-shadow:0 0 5px #e68e4e}
@keyframes arena-move{from{transform:translate(calc(var(--arena-dx)*-104%),calc(var(--arena-dy)*-115%))}to{transform:translate(0,0)}}
@keyframes arena-strike{40%{transform:translate(clamp(-30%,calc(var(--arena-dx)*24%),30%),clamp(-28%,calc(var(--arena-dy)*20%),28%)) scale(1.08)}}
@keyframes arena-hit{25%{transform:translateX(12%) rotate(9deg);filter:brightness(1.65) sepia(.42)}55%{transform:translateX(-7%) rotate(-5deg)}}
@keyframes arena-fall{35%{filter:brightness(1.5);transform:rotate(8deg)}to{transform:translateY(18%) rotate(24deg);opacity:0}}
@keyframes arena-damage{0%{opacity:0;transform:translate(-50%,20%)}16%{opacity:1}73%{opacity:1}100%{opacity:0;transform:translate(-50%,-115%)}}
@keyframes arena-shot{0%{transform:translate(0,0)}95%{opacity:1}100%{opacity:0;transform:translate(calc(var(--arena-dx)*104%),calc(var(--arena-dy)*104%))}}
@media(prefers-reduced-motion:reduce){
  .arena-cell:is(.unit-move,.unit-strike,.unit-hit) img,.arena-damage{animation:none}
  .arena-cell.unit-hit img{filter:brightness(1.45)}
  .arena-cell.unit-fallen img,.arena-projectile{display:none}
  .arena-damage{transform:translateX(-50%)}
}

.arena-cell{overflow:visible}

#return-summary .return-continue{position:static;margin:12px 0 0}
.return-continue .action{display:block;width:100%;min-height:44px}
#arena{width:min(680px,calc(100% - 12px));max-width:calc(100% - 12px)}
@media(max-width:540px){#arena{padding-inline:7px}}
#plot-barracks .site-meter-activity{min-width:0;width:64px}
.arena-cell.unit-strike.unit-hit:not(.unit-fallen) img{animation:arena-strike .31s ease-out}
@media(prefers-reduced-motion:reduce){.arena-cell.unit-strike.unit-hit:not(.unit-fallen) img{animation:none}}

#menu-open{width:44px;height:42px;font-size:22px;flex:none}
.brand-logo{display:block;width:clamp(130px,43vw,212px);height:40px;object-fit:contain;object-position:left center}
@media(max-width:700px) and (orientation:portrait){
  #menu-open{width:39px;height:37px;font-size:19px}
  .brand-logo{height:35px}
}
@media(max-height:540px) and (orientation:landscape){
  #menu-open{width:38px;height:36px;font-size:18px}
  .brand-logo{width:clamp(110px,22vw,160px);height:32px}
}
#boot-screen{
  position:fixed;z-index:1000;inset:0;overflow:hidden;
  background:#181c1a;opacity:1;transition:opacity .22s ease-out;
}
#boot-screen[hidden]{display:none}
#boot-screen.boot-leaving{opacity:0;pointer-events:none}
.boot-art{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 52%}
#boot-screen::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#171b1ad9,transparent 36%,transparent 63%,#171b1aed);
}
.boot-logo{
  position:absolute;z-index:1;left:50%;top:max(8%,calc(env(safe-area-inset-top) + 20px));
  transform:translateX(-50%);width:min(83vw,560px);max-height:25vh;object-fit:contain;
}
.boot-message{
  position:absolute;z-index:1;left:50%;bottom:max(7%,calc(env(safe-area-inset-bottom) + 18px));
  transform:translateX(-50%);width:min(72vw,270px);text-align:center;
  color:#ffe0a6;text-shadow:0 2px 4px #211a19;
}
.boot-message p{font-size:14px;font-weight:700;letter-spacing:.045em;margin:0 0 10px}
.boot-track{height:8px;border:1px solid #b28b52;border-radius:4px;overflow:hidden;background:#282326}
.boot-track::after{
  content:'';display:block;width:44%;height:100%;
  background:linear-gradient(90deg,#8e6339,#f2cb81,#b9864f);
  animation:boot-glint 1.1s ease-in-out infinite alternate;
}
@keyframes boot-glint{from{transform:translateX(-20%)}to{transform:translateX(150%)}}
@media(prefers-reduced-motion:reduce){#boot-screen{transition:none}.boot-track::after{animation:none;margin:auto}}

/* Attack wind-up, impact and recovery are visible on both sides of the board. */
.arena-cell.unit-release{z-index:3}
.arena-cell.unit-strike:not(.unit-fallen) img,.arena-cell.unit-strike.unit-hit:not(.unit-fallen) img{animation:arena-heavy-strike .64s ease-in-out}
.arena-cell.unit-release:not(.unit-fallen) img{animation:arena-release .56s ease-out}
.arena-cell.unit-hit img{animation-delay:.25s}
.arena-cell.unit-strike.unit-hit:not(.unit-fallen) img,.arena-cell.unit-release.unit-hit:not(.unit-fallen) img{animation-delay:0s}
.arena-cell.unit-hit-delayed:not(.unit-strike):not(.unit-release) img{animation-delay:.45s}
.arena-cell.unit-hit .arena-damage{animation-delay:.25s}
.arena-cell.unit-hit-delayed .arena-damage{animation-delay:.45s}
.arena-projectile{animation:arena-arrow-flight .32s .14s linear both}
.arena-projectile::after{content:none}
.arena-projectile svg,.arena-slash svg{width:100%;display:block;overflow:visible}
.arena-projectile svg{
  position:absolute;top:50%;left:50%;width:65%;max-width:38px;
  transform:translate(-50%,-50%) rotate(var(--arena-angle));
  filter:drop-shadow(0 0 3px #f19b60);
}
.arena-slash{position:absolute;z-index:5;inset:10%;pointer-events:none;animation:arena-swing .29s .22s ease-out both}
.arena-slash svg{transform:rotate(var(--arena-angle))}
@keyframes arena-heavy-strike{
  0%,100%{transform:translate(0,0)}
  28%{transform:translate(calc(var(--arena-dx)*-18%),calc(var(--arena-dy)*-18%)) scale(.94)}
  49%{transform:translate(calc(var(--arena-dx)*56%),calc(var(--arena-dy)*62%)) scale(1.12)}
  69%{transform:translate(calc(var(--arena-dx)*32%),calc(var(--arena-dy)*33%))}
}
@keyframes arena-release{
  0%,100%{transform:translate(0,0)}
  22%{transform:translate(calc(var(--arena-dx)*-4%),calc(var(--arena-dy)*-4%)) scale(.96)}
  37%{transform:translate(calc(var(--arena-dx)*5%),calc(var(--arena-dy)*5%)) scale(1.06)}
}
@keyframes arena-arrow-flight{
  0%{opacity:1;transform:translate(0,0)}
  96%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--arena-dx)*104%),calc(var(--arena-dy)*104%))}
}
@keyframes arena-swing{
  0%{opacity:0;transform:translate(calc(var(--arena-dx)*36%),calc(var(--arena-dy)*36%)) scale(.65)}
  32%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--arena-dx)*106%),calc(var(--arena-dy)*106%)) scale(1.13)}
}
@media(prefers-reduced-motion:reduce){
  .arena-cell.unit-strike:not(.unit-fallen) img,.arena-cell.unit-strike.unit-hit:not(.unit-fallen) img,.arena-cell.unit-release:not(.unit-fallen) img{animation:none}
  .arena-projectile,.arena-slash{display:none}
}

.arena-sword{
  position:absolute;z-index:6;inset:17%;pointer-events:none;
  transform-origin:50% 50%;animation:arena-sword-swing .53s ease-in-out both;
}
.arena-sword svg{width:100%;display:block;overflow:visible;transform:translateX(26%)}
@keyframes arena-sword-swing{
  0%{opacity:0;transform:rotate(calc(var(--arena-angle) - 72deg))}
  19%{opacity:1;transform:rotate(calc(var(--arena-angle) - 60deg))}
  49%{opacity:1;transform:rotate(calc(var(--arena-angle) + 16deg)) scale(1.26)}
  74%{opacity:1;transform:rotate(calc(var(--arena-angle) + 65deg))}
  100%{opacity:0;transform:rotate(calc(var(--arena-angle) + 70deg))}
}
.arena-cell.unit-flying:not(.unit-move):not(.unit-hit):not(.unit-strike):not(.unit-release) img{animation:arena-hover 1.25s ease-in-out infinite alternate}
@keyframes arena-hover{to{transform:translateY(-7%) scaleY(1.035)}}
@media(prefers-reduced-motion:reduce){
  .arena-sword{display:none}
  .arena-cell.unit-flying:not(.unit-move):not(.unit-hit):not(.unit-strike):not(.unit-release) img{animation:none}
}

@media(min-width:760px) and (hover:hover) and (pointer:fine){
  body{
    display:flex;flex-direction:column;height:100dvh;padding:10px;
    gap:9px;background:#1b2420;
  }
  header{
    position:relative;inset:auto;display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:7px 16px;padding:8px 12px;flex:none;
  }
  header .tag{display:none}
  #resources{justify-self:end;width:min(100%,620px)}
  main{
    position:relative;inset:auto;display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:9px;width:100%;min-height:0;flex:1;margin:0;
  }
  main .world{position:relative;inset:auto;height:auto;background:#202c25;border-radius:6px}
  .desktop-map{background:none}
  .desktop-map::before{display:none}
  .desktop-map #map-window{
    top:var(--map-top,0px);height:calc(var(--scene-width)*1.5);width:calc(var(--scene-width)*3);
    border-radius:4px;
  }
  .desktop-map #map-scene{
    inset:0 auto 0 var(--scene-width);transition:none;
  }
  .desktop-map[data-area=west] #west-page::after,
  .desktop-map[data-area=city] #city-page::after,
  .desktop-map[data-area=east] #east-page::after{
    content:'';position:absolute;z-index:3;top:0;left:0;right:0;height:2px;
    background:#d2a363b3;pointer-events:none;
  }
}


/* One shared bitmap spans the three interactive regions. */

.formation-field{
  position:relative;isolation:isolate;height:clamp(245px,52vw,365px);overflow:hidden;
  border:1px solid #ab8458;border-radius:8px;background:#303b2b center/cover no-repeat;
  box-shadow:inset 0 0 32px #191913c9;
}
.formation-field.theme-ruins{background-image:url(arena-art/ruins.webp)}
.formation-field.theme-forest{background-image:url(arena-art/forest.webp)}
.formation-field.theme-ridge{background-image:url(arena-art/ridge.webp)}
.formation-field::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#22393755,transparent 44%,transparent 56%,#522c2559),
    linear-gradient(0deg,#1918108a,transparent 65%);
}
.formation-zone{position:absolute;width:16%;height:45%;top:46%;transform:translateX(-50%);pointer-events:none}
.formation-zone.player.zone-rear{left:12%}
.formation-zone.player.zone-flank{left:24%;top:20%}
.formation-zone.player.zone-front{left:39%}
.formation-zone.enemy.zone-front{left:61%}
.formation-zone.enemy.zone-flank{left:76%;top:20%}
.formation-zone.enemy.zone-rear{left:88%}
.zone-title{
  position:absolute;bottom:1%;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:2px 4px;border-radius:4px;background:#202b28da;color:#e4efd0;
  font-size:clamp(8px,2.15vw,12px);text-shadow:0 1px 1px #1a1714;
}
.enemy .zone-title{background:#3e2926df;color:#ffe0bd}
.formation-unit{
  position:absolute;bottom:calc(16px + var(--depth)*35px);left:calc(50% + var(--spread));
  width:clamp(27px,8vw,61px);height:clamp(45px,13vw,80px);
  translate:-50% 0;overflow:visible;border:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 90%,#161814a3 0%,transparent 51%);
  padding:0;pointer-events:auto;touch-action:manipulation;
}
.formation-unit img{
  position:absolute;bottom:4px;left:50%;translate:-50% 0;width:118%;height:calc(100% - 10px);
  object-fit:contain;object-position:center bottom;pointer-events:none;filter:drop-shadow(0 3px 2px #1a1613ba);
}
.formation-unit.is-selected{z-index:6;outline:2px solid #f9d28b;background:#53452865}
.formation-unit.is-target{outline:1px dashed #ffd592;z-index:4}
.formation-unit:disabled{cursor:default;opacity:1}
.formation-unit.is-flying img{animation:formation-hover 1.4s ease-in-out infinite alternate}
@keyframes formation-hover{to{transform:translateY(-6px) scaleY(1.06)}}
.formation-hp{
  position:absolute;top:0;left:8%;width:84%;height:5px;z-index:2;
  border:1px solid #1d1815;border-radius:4px;overflow:hidden;background:#372724;pointer-events:none;
}
.formation-hp>span{display:block;height:100%;background:#9fda77;transition:width .25s}
.formation-unit.enemy .formation-hp>span{background:#e58466}
.formation-order{
  position:absolute;right:-3px;bottom:4px;color:#e9ffc7;background:#344832;border:1px solid #a4be77;
  border-radius:50%;padding:0 2px;font-size:10px;
}
.formation-controls{display:grid;gap:6px;padding-top:7px}
.formation-controls .note,.formation-intent,.formation-phase{margin:0}
.formation-intent{padding:6px 8px;background:#53372f;border:1px solid #886148;border-radius:5px;font-size:12px}
.formation-intent strong{color:#ffd49d;margin-right:3px}
.formation-commands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.formation-commands .plain{min-height:44px;padding:4px 2px;font-size:11px}
.formation-commands .plain[aria-pressed=true]{background:#627650;color:#fff1c4}
.formation-commands .plain:disabled{opacity:.55}
.formation-phase{min-height:72px;display:grid;place-items:center;color:#ffdb9d;font-weight:700}
.formation-fx{position:absolute;z-index:12;inset:0;pointer-events:none}
.formation-projectile{position:absolute;opacity:0;width:clamp(20px,8vw,44px);filter:drop-shadow(0 0 6px #eaa666)}
.formation-projectile svg{width:100%;display:block}
.formation-projectile.fx-slash{width:clamp(40px,15vw,77px)}
.formation-unit.is-guarded::after{
  content:'◆';position:absolute;z-index:6;inset:12% 0 0;display:grid;place-items:center;
  color:#e7ffc4;font-size:22px;border:2px solid #c7e396;border-radius:45%;background:#a0bd4142;
  box-shadow:0 0 16px #e5f09880;animation:formation-guard .6s ease-out both;
}
@keyframes formation-guard{from{opacity:0;scale:.55}to{opacity:1;scale:1}}
.formation-unit.formation-hit img{animation:formation-hit .54s ease-out}
.formation-unit.formation-fallen img{animation:formation-fall .62s ease-in both}
.formation-unit.formation-hit::before,.formation-unit.formation-fallen::before{
  content:'';position:absolute;inset:14%;z-index:7;border-radius:50%;
  background:radial-gradient(circle,#fff3b7,#e8a3589c 24%,transparent 67%);animation:formation-spark .44s ease-out both;
}
.formation-damage{
  position:absolute;left:50%;top:20%;z-index:8;color:#ffe0a0;font-size:20px;font-weight:900;
  text-shadow:0 1px 3px #1e100e;animation:formation-damage .6s ease-out both;pointer-events:none;
}
@keyframes formation-hit{25%{transform:translateX(9px) rotate(9deg);filter:brightness(1.7) sepia(.5)}65%{transform:translateX(-4px)}}
@keyframes formation-fall{30%{filter:brightness(1.6)}to{transform:translateY(15px) rotate(40deg);opacity:0}}
@keyframes formation-spark{from{opacity:1;scale:.4}to{opacity:0;scale:2}}
@keyframes formation-damage{0%{opacity:0;transform:translate(-50%,5px)}20%{opacity:1}80%{opacity:1}to{opacity:0;transform:translate(-50%,-26px)}}
@media(prefers-reduced-motion:reduce){
  .formation-unit img,.formation-unit::after,.formation-unit::before,.formation-damage{animation:none!important}
  .formation-unit.formation-fallen img{opacity:.24}
  .formation-damage{transform:translateX(-50%)}
}

.formation-zone.player.zone-front{left:36%}
.formation-zone.enemy.zone-front{left:64%}
.formation-zone.player.zone-rear{left:14%}
.formation-zone.enemy.zone-rear{left:86%}
.formation-unit{left:calc(50% + var(--spread)*clamp(27px,4.8vw,43px))}
.formation-crowded .formation-unit{width:clamp(27px,4.8vw,43px)}
.formation-crowded .formation-unit img{width:135%}
.formation-threat{
  position:absolute;left:-1px;top:-9px;z-index:3;min-width:13px;padding:0 2px;border-radius:50%;
  border:1px solid #e5a27c;background:#793c34;color:#ffebc8;font:800 10px/13px system-ui;
}

.realtime-field{height:clamp(235px,63vw,390px)}
.realtime-unit{
  bottom:auto;translate:-50% -56%;
  width:clamp(29px,8vw,59px);height:clamp(42px,11vw,75px);
  transition:left 65ms linear,top 65ms linear;
  pointer-events:none;
}
.realtime-unit.enemy img,.realtime-unit.faces-left img{scale:-1 1}
.realtime-unit.enemy.faces-right img{scale:1 1}
.realtime-unit.is-moving:not(.is-flying) img{animation:arena-step .32s ease-in-out infinite alternate}
@keyframes arena-step{
  from{transform:translateY(1px) rotate(-4deg)}
  to{transform:translateY(-4px) rotate(4deg)}
}
.realtime-unit.is-marked:not(.is-guarded)::after{
  content:'';position:absolute;inset:0;border:2px dashed #ffad7c;border-radius:50%;
  animation:arena-mark .52s ease-in-out infinite alternate;
}
@keyframes arena-mark{to{opacity:.4;scale:1.1}}
.realtime-unit.formation-hit img{animation:formation-hit .45s ease-out}
.realtime-unit.formation-fallen img{animation:formation-fall .62s ease-in both}
.realtime-commands .plain{min-height:48px;font-size:clamp(11px,2.7vw,14px)}

.terrain.portrait-map{background:#202c25}
.terrain.portrait-map::before{display:none}

.queue-drawer{
  position:absolute;z-index:5;
  left:max(10px,env(safe-area-inset-left));
  bottom:max(25px,calc(env(safe-area-inset-bottom) + 17px));
}
.queue-toggle{min-height:42px;padding:7px 12px;color:var(--gold);font-weight:800}
.queue-toggle::after{content:' ▴';margin-inline-start:6px}
.queue-toggle[aria-expanded=true]::after{content:' ▾'}
#queue-panel{
  display:block;position:absolute;inset:auto auto calc(100% + 6px) 0;
  width:min(300px,calc(100vw - 24px));max-width:none;max-height:55dvh;
  padding:10px 12px;overflow:auto;overscroll-behavior:contain;
  transition:transform .22s ease,opacity .22s ease,visibility .22s;
}
#queue-panel[inert]{visibility:hidden;opacity:0;transform:translateY(12px);pointer-events:none}
#queue-panel > section + section{margin-top:10px}
#queue-panel h2{font-size:13px;color:var(--gold)}
#queue-panel .queue-title{gap:5px;align-items:baseline;font-size:10px}
#queue-panel #queue{max-height:none;overflow:visible}
#queue-panel p{margin:4px 0 0;font-size:11px}
@media(prefers-reduced-motion:reduce){#queue-panel{transition:none}}

/* Keep the portrait artwork visible on both phone and desktop. */
#boot-screen{
  background:radial-gradient(ellipse at 50% 40%,#4b3832,#151725 70%,#10111b);
  isolation:isolate;
}
.boot-art{inset:0;object-position:center 51%}
#boot-screen::after{
  background:linear-gradient(180deg,#1315294d,transparent 40%,transparent 69%,#131420dd);
}
.boot-logo{
  top:max(5%,calc(env(safe-area-inset-top) + 12px));
  width:min(90vw,54dvh,580px);max-height:27dvh;
  filter:drop-shadow(0 4px 5px #110d0a88);
}
.boot-message{
  color:#ffe3aa;
  bottom:max(5%,calc(env(safe-area-inset-bottom) + 14px));
  text-shadow:0 2px 3px #1b110b,0 1px 8px #171020;
}
.boot-track{
  height:10px;border:1px solid #d3a760;border-radius:6px;
  background:#211927;box-shadow:0 2px 0 #130e1a,inset 0 1px 3px #130e1a;
}
.boot-track::after{
  background:linear-gradient(90deg,#a35f31,#f7c770,#ffeaac,#c28443);
}
@media(min-aspect-ratio:4/5){
  .boot-art{object-fit:contain}
  #boot-screen::after{
    background:radial-gradient(ellipse at 50% 47%,transparent 25%,#10111b80 67%,#10111bdb);
  }
}

/* Midnight-blue and gold startup theme. */
#boot-screen{background:radial-gradient(ellipse at center,#132c58,#070d20 75%)}
.boot-art{object-position:center}
#boot-screen::after{background:linear-gradient(180deg,transparent 70%,#050d1c76)}
.boot-logo{
  top:max(9%,calc(env(safe-area-inset-top) + 18px));
  width:min(84vw,52dvh,560px);max-height:49dvh;
  filter:drop-shadow(0 7px 12px #05091799);
}
.boot-message{color:#ffe6a3;text-shadow:0 2px 4px #020918}
.boot-track{
  height:12px;border:2px solid #f0ba55;border-radius:10px;
  background:#061730;box-shadow:0 0 0 1px #412b18,0 2px 6px #010817;
}
.boot-track::after{background:linear-gradient(#fff09a,#f6b93f 56%,#c37420)}
.brand-logo,.menu-wordmark{
  display:block;object-fit:contain;object-position:left center;
}
.menu-wordmark{width:min(145px,55%);height:27px;margin-bottom:5px}
@media(min-aspect-ratio:4/5){
  #boot-screen::after{background:radial-gradient(ellipse at 50% 49%,transparent 27%,#060d2090 80%)}
}

.game-hud{
  position:fixed;z-index:5;
  inset:max(7px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) auto max(8px,env(safe-area-inset-left));
  pointer-events:none;
}
.game-header{
  position:static;display:grid;justify-items:center;grid-template-columns:minmax(0,1fr);
  gap:5px;padding:7px 8px;pointer-events:auto;
}
.game-header .brand-logo{
  width:min(32vw,128px);height:auto;max-height:25px;object-fit:contain;object-position:center;
}
.game-header #resources{width:min(100%,620px);justify-self:center}
.game-hud #menu-open{
  pointer-events:auto;margin-top:8px;width:43px;height:40px;padding:0;
  color:#ffe8b1;font-size:14px;font-weight:800;
}
#menu{
  width:min(520px,calc(100vw - 20px));max-width:none;
  max-height:calc(100dvh - 20px);overflow:auto;padding:14px;
}
#menu .menu-emblem{display:block;margin:0 auto;width:min(29%,112px);max-height:15dvh;object-fit:contain}
#menu .menu-items{gap:8px}
#menu .menu-tile{
  display:block;width:100%;min-height:58px;padding:12px;
  color:#ffedca;font:700 16px Georgia,serif;text-align:center;
}
#menu .menu-items p{margin:0;text-align:center}
dialog::backdrop{backdrop-filter:none}
@media(min-width:760px) and (hover:hover) and (pointer:fine){
  .game-hud{position:relative;inset:auto;flex:none}
  .game-hud #menu-open{position:absolute;top:100%;left:0}
}

.menu-bars{
  width:20px;height:14px;border-block:2px solid currentColor;
  display:grid;align-items:center;
}
.menu-bars::after{content:'';height:2px;background:currentColor}
.region-map{
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  pointer-events:none;image-rendering:auto;
}
#queue-panel > section{
  --queue-accent:#d5a46c;
  padding:7px 9px;border:1px solid var(--queue-accent);border-radius:6px;
  background:#3d2e31;
}
#queue-panel > section[aria-labelledby="research-queue-title"]{
  --queue-accent:#afbae2;background:#34334e;
}
#queue-panel > section[aria-labelledby="training-queue-title"]{
  --queue-accent:#a7c398;background:#313e36;
}
#queue-panel > section h2{color:var(--queue-accent)}
#queue-panel .queue-title{border-color:var(--queue-accent)}

#map-scene :is(#plot-flight,#plot-guild):not([data-level="0"]){
  width:calc(var(--map-pixel) * 90);
}
#map-scene #plot-flight:not([data-level="0"]){
  width:calc(var(--map-pixel) * 96);
}
#map-scene #plot-flight:not([data-level="0"]) .sprite{
  height:calc(var(--map-pixel) * 89);
}
#map-scene #plot-guild:not([data-level="0"]){width:calc(var(--map-pixel) * 100.8)}
#map-scene #plot-guild:not([data-level="0"]) .sprite{
  height:calc(var(--map-pixel) * 91.8);
}
#map-scene #plot-wood:not([data-level="0"]) .building-ground{
  scale:.94;transform-origin:center bottom;
}
@media (max-height:540px) and (orientation:landscape){
  #map-scene :is(#plot-flight,#plot-guild):not([data-level="0"]){width:calc(var(--map-pixel) * 62)}
  #map-scene #plot-flight:not([data-level="0"]){width:calc(var(--map-pixel) * 66)}
  #map-scene #plot-flight:not([data-level="0"]) .sprite{height:calc(var(--map-pixel) * 61)}
  #map-scene #plot-guild:not([data-level="0"]){width:calc(var(--map-pixel) * 69.3)}
  #map-scene #plot-guild:not([data-level="0"]) .sprite{height:calc(var(--map-pixel) * 63)}
}

.game-header #resources{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(3px,1vw,8px);
}
.game-header .resource{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  min-height:38px;min-width:0;padding:3px clamp(2px,.7vw,7px);gap:clamp(1px,.55vw,5px);
}
.game-header .resource svg{
  grid-row:auto;display:block;width:clamp(23px,6.8vw,36px);height:auto;
  filter:drop-shadow(0 1px 1px #21161a88);
}
.game-header .resource b{
  font-size:clamp(8px,2.6vw,15px);line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums;
}

#account,#delete-account{
  width:min(420px,calc(100% - 24px));max-width:none;
  max-height:calc(100dvh - 24px);overflow:auto;padding:16px;
}
#account-title{padding-inline-end:42px;font-size:clamp(19px,5.4vw,25px)}
#account .close{min-width:40px;min-height:40px}
#account-form button,#account-actions button,#delete-account button{min-height:44px}
#delete-account form{display:grid;gap:8px}
#account-form,#account-form label{display:grid;gap:7px}
#account-form{gap:11px}
#account-form[hidden],#account-actions[hidden]{display:none}
#account-form input{width:100%;min-height:44px;font:inherit;font-size:16px;padding:9px;color:#fff1da;background:#2c2430;border:1px solid #94704e;border-radius:5px}
#account-actions{display:flex;flex-wrap:wrap;gap:8px}

#account-confirmation:not([hidden]){
  padding:9px 10px;border:1px solid #819b57;border-radius:5px;
  color:#f4ffd7;background:#34432b;font-weight:700;
}
#boot-screen{
  background:#08142b;
}
#boot-screen::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%,#173b70 0%,#0b1d3b 54%,#050e20 100%);
}
#boot-screen .boot-art{object-fit:cover;object-position:70% center}
@media (max-aspect-ratio:2/3){
  #boot-screen::after{background:linear-gradient(180deg,transparent 74%,#050d1c55)}
}
.river-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none}
.river-motion path{
  stroke:#c4f2ee;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:5 20 2 17;
  opacity:.55;animation:river-flow 2.3s linear infinite;
}
@keyframes river-flow{to{stroke-dashoffset:-44}}
@media(prefers-reduced-motion:reduce){.river-motion{display:none}}

.build-time,.build-blockers{
  margin:8px 0;padding:8px 10px;border:1px solid;border-radius:6px;
}
.build-time{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#233e46;border-color:#8bb2ad;color:#f5e5b5;
}
.build-time strong{font-size:17px;font-variant-numeric:tabular-nums}
.build-blockers{background:#532f35;border-color:#d98f73;color:#ffe2cf}
.build-blockers ul{margin:4px 0 0;padding-inline-start:18px}
.build-blockers li{color:inherit;margin:2px 0}

.return-card{
  padding:9px 11px;margin:8px 0;border:1px solid #98724f;
  border-radius:6px;background:#382d39;
}
.return-card h3{margin-top:0}
#return-resources svg{width:clamp(24px,8vw,36px);height:auto}
#return-resources .return-resource-name{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
#first-welcome:not([hidden]){
  padding:9px 11px;border:1px solid #98724f;border-radius:6px;color:#ffedca;
}
#map-scene .panorama-map{inset:0 auto 0 -100%;width:300%;max-width:none}

#city-page .river-motion{mask:url(scenery/water-city-96.png) 0 0/100% 100%;-webkit-mask:url(scenery/water-city-96.png) 0 0/100% 100%}
/* Smoke origins follow the chimney or vent in each stone workshop sprite. */
#plot-stone .hearth-smoke{left:27%;top:8%}
#plot-stone[data-level="2"] .hearth-smoke{left:33%;top:16%}
#plot-stone[data-level="3"] .hearth-smoke{left:33%;top:13%}
#plot-stone[data-level="4"] .hearth-smoke{left:54%;top:9%}
#plot-stone .advanced-building ~ .hearth-smoke,
#plot-stone[data-level="5"] .hearth-smoke{left:49%;top:8%}

#plot-stone .hearth-smoke{z-index:3}
#plot-stone .hearth-smoke i{
  width:12px;height:10px;margin-left:-6px;margin-top:-6px;
  background:#e5dac8;border:1px solid #77736c;filter:none;
  animation-name:stone-smoke-rise;
}
@keyframes stone-smoke-rise{
  0%{opacity:0;transform:scale(.65)}
  15%{opacity:.9}
  48%{opacity:.65}
  100%{opacity:0;transform:translate(17px,-43px) scale(2.5)}
}

#map-scene #plot-fishing:not([data-level="0"]) .building-ground{
  scale:.9;transform-origin:center bottom;
}

.market-open{margin-top:8px}
#market-offer{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  border:1px solid #98744d;border-radius:8px;background:#382d39;padding:9px;
}
#market-offer svg{width:32px;height:32px}
#market-status:empty{display:none}

#map-scene #plot-hall:not([data-level="0"]) .building-ground{
  scale:.95;transform-origin:center bottom;
}
/* Version 109: keep the stonemason crisp in its resting state.
   The old shared hall/stone downscale softened the stone building until hover. */
#map-scene #plot-stone:not([data-level="0"]) .building-ground{
  scale:1;
  transform-origin:center bottom;
  backface-visibility:hidden;
}

/* Webtest 104: unified smooth building art and hover lift for every building type.
   Apply movement to the shared wrapper, not the image: some buildings are layered SVGs. */
#map-scene .plot .building-ground {
  transform-origin:center bottom;
  transition:transform 220ms cubic-bezier(.2,.8,.25,1),filter 220ms ease;
  will-change:auto;
}
#map-scene .plot :is(img.sprite,svg.sprite,.layered-sprite),
.portrait :is(img.sprite,svg.sprite,.layered-sprite) {
  image-rendering:auto;
}
/* Override the old image-only hover rule, keeping layered animations intact. */
#map-scene .plot:hover .building-ground .sprite,
#map-scene .plot:focus-visible .building-ground .sprite {transform:none}
#map-scene .plot:hover .building-ground .sprite.upgraded,
#map-scene .plot:focus-visible .building-ground .sprite.upgraded {transform:scale(1.04)}
@media (hover:hover) and (pointer:fine) {
  #map-scene .plot:hover {z-index:8}
  #map-scene .plot:hover .building-ground {
    transform:translateY(-5px) scale(1.07);
    filter:drop-shadow(0 9px 7px #171a17a0) brightness(1.045);
  }
}
#map-scene .plot:focus-visible {z-index:8}
#map-scene .plot:focus-visible .building-ground {
  transform:translateY(-4px) scale(1.05);
  filter:drop-shadow(0 7px 6px #171a17a0);
}
@media(prefers-reduced-motion:reduce) {
  #map-scene .plot .building-ground {transition:none}
}

/* Version 107: Kontodaten und einheitlicher Menü-Abmeldeknopf. */
#account-email{padding:10px 12px;background:#2d2834;border:1px solid #816b52;border-radius:7px;overflow-wrap:anywhere}
#account-email strong{display:block;margin-top:4px;color:#fff2d3;font-size:1.05em}
#cloud-signout{width:100%}
#cloud-signout[hidden],#account-email[hidden]{display:none}

/* Version 108: Abmelden als letzter, dezent roter Menuepunkt; Reset im Account. */
#menu .signout-menu-button {
  background:#70343d;
  border:1px solid #ae6570;
  color:#ffe4e2;
}
#menu .signout-menu-button:hover,
#menu .signout-menu-button:focus-visible {
  background:#8d3d49;
  border-color:#d48a91;
  color:#fff2f0;
}
#account .account-reset-button {
  display:block;
  width:100%;
  min-height:44px;
  margin-top:14px;
}

/* Webtest 113: keep the retina panorama on a single sharp resampling path. */
#map-scene .panorama-map { image-rendering:auto; backface-visibility:visible; transform:none; }

/* Webtest 115: All buildings and empty construction plots 10% smaller,
   without moving their anchors or altering labels, hover or animations. */
#map-scene .plot .building-ground {scale:.9;transform-origin:center bottom}
/* Keep the original extra adjustments for these building types. */
#map-scene #plot-wood:not([data-level="0"]) .building-ground {scale:.846}
#map-scene #plot-fishing:not([data-level="0"]) .building-ground {scale:.81}
#map-scene #plot-hall:not([data-level="0"]) .building-ground {scale:.855}

/* Webtest 116: fine-tune selected plot sizes and positions. */
#map-scene #plot-stone:not([data-level="0"]) .building-ground {scale:.81;}
#map-scene #plot-trade:not([data-level="0"]) .building-ground {scale:.81;}

/* Webtest 117: keep woodcutter and stonemason crisp in desktop browsers.
   Avoid resting-state wrapper scaling blur by sizing the elements directly. */
#map-scene #plot-wood:not([data-level="0"]) { width:calc(var(--map-pixel) * 57.5); }
#map-scene #plot-wood:not([data-level="0"]) .sprite { height:calc(var(--map-pixel) * 50.8); }
#map-scene #plot-wood:not([data-level="0"]) .building-ground { scale:1; backface-visibility:hidden; transform:translateZ(0); }
#map-scene #plot-stone:not([data-level="0"]) { width:calc(var(--map-pixel) * 55.1); }
#map-scene #plot-stone:not([data-level="0"]) .sprite { height:calc(var(--map-pixel) * 48.6); }
#map-scene #plot-stone:not([data-level="0"]) .building-ground { scale:1; backface-visibility:hidden; transform:translateZ(0); }
@media (max-height:540px) and (orientation:landscape){
  #map-scene #plot-wood:not([data-level="0"]) { width:calc(var(--map-pixel) * 57.5); }
  #map-scene #plot-wood:not([data-level="0"]) .sprite { height:calc(var(--map-pixel) * 50.8); }
  #map-scene #plot-stone:not([data-level="0"]) { width:calc(var(--map-pixel) * 55.1); }
  #map-scene #plot-stone:not([data-level="0"]) .sprite { height:calc(var(--map-pixel) * 48.6); }
}

/* Webtest 119: visible only to server-verified administrators */
#queue .admin-finish,#detail .admin-finish{display:block;margin-top:8px;border-color:#c39a57;background:#4a3825;color:#ffe2a8;font-weight:700}
#queue .admin-finish:hover,#detail .admin-finish:hover{background:#64462a}

/* Version 121: additional reductions relative to v120, on all levels and vacant plots.
   Size only the artwork, keeping clickable anchors, labels, and building details untouched. */
#map-scene #plot-flight .building-ground,
#map-scene #plot-guild .building-ground { scale:.765; }
#map-scene #plot-fishing .building-ground,
#map-scene #plot-barracks .building-ground { scale:.81; }
#map-scene #plot-fishing:not([data-level="0"]) .building-ground { scale:.729; }

/* Webtest 123: level-two clay pit, farm and research institute.
   Render at the existing 90% size without a fractional CSS scale
   in the resting state, so desktop browsers do not blur the artwork. */
#map-scene :is(#plot-clay,#plot-farm,#plot-research)[data-level="2"] .building-ground {
  scale:1;
  width:90%;
  margin-inline:auto;
  transform-origin:center bottom;
}
#map-scene :is(#plot-clay,#plot-farm,#plot-research)[data-level="2"] .building-ground > .sprite {
  height:calc(var(--map-pixel) * 54);
  filter:drop-shadow(0 2px 1px #241d18a0);
}
@media (max-height:540px) and (orientation:landscape) {
  #map-scene :is(#plot-clay,#plot-farm,#plot-research)[data-level="2"] .building-ground > .sprite {
    height:calc(var(--map-pixel) * 36.9);
  }
}

/* Webtest 124: Steinmetz-Hover wieder aktivieren.
   Die spezifische Schärferegel aus Version 117 hatte den generischen
   Hover-Transform überschrieben. Die ruhende Darstellung bleibt scharf. */
@media (hover:hover) and (pointer:fine) {
  #map-scene #plot-stone:not([data-level="0"]):hover .building-ground {
    transform:translateY(-5px) scale(1.07);
  }
}
#map-scene #plot-stone:not([data-level="0"]):focus-visible .building-ground {
  transform:translateY(-4px) scale(1.05);
}

/* Webtest 125: Bauernhof und Lehmgrube Stufe 3 auch ohne Hover klar.
   Gleiche skalierungsfreie Groesse wie die korrigierten Stufe-2-Gebaeude. */
#map-scene :is(#plot-farm,#plot-clay)[data-level="3"] .building-ground {
  scale:1;
  width:90%;
  margin-inline:auto;
  transform-origin:center bottom;
}
#map-scene :is(#plot-farm,#plot-clay)[data-level="3"] .building-ground > .sprite {
  height:calc(var(--map-pixel) * 54);
  filter:drop-shadow(0 2px 1px #241d18a0);
}
@media (max-height:540px) and (orientation:landscape) {
  #map-scene :is(#plot-farm,#plot-clay)[data-level="3"] .building-ground > .sprite {
    height:calc(var(--map-pixel) * 36.9);
  }
}

/* Webtest 126 — consistent crisp buildings on every level.
   Layout dimensions replace fractional composited `scale`; hovering never
   changes the rasterization, size, sharpness or art filters. */
#map-scene .plot { --ew-art-scale: .9; --ew-sprite-height: 60; }
#map-scene #plot-hall:not([data-level="0"]) { --ew-art-scale: .855; }
#map-scene #plot-wood:not([data-level="0"]) { --ew-art-scale: 1; }
#map-scene #plot-stone:not([data-level="0"]) { --ew-art-scale: 1; }
#map-scene #plot-trade:not([data-level="0"]) { --ew-art-scale: .81; }
#map-scene #plot-fishing { --ew-art-scale: .81; }
#map-scene #plot-fishing:not([data-level="0"]) { --ew-art-scale: .729; }
#map-scene #plot-barracks { --ew-art-scale: .81; }
#map-scene #plot-flight,#map-scene #plot-guild { --ew-art-scale: .765; }
/* Stage-2/3 artworks already use exact 90%-wide boxes from older versions. */
#map-scene :is(#plot-farm,#plot-clay,#plot-research)[data-level="2"],
#map-scene :is(#plot-farm,#plot-clay)[data-level="3"] { --ew-art-scale: .9; }

/* Explicit width/height give the browser a stable, untransformed raster size. */
#map-scene .plot .building-ground,
#map-scene .plot:hover .building-ground,
#map-scene .plot:focus-visible .building-ground {
  width:calc(100% * var(--ew-art-scale));
  scale:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
  backface-visibility:visible;
  margin-inline:auto;
  will-change:auto;
}
/* No bitmap-wide SVG contour filter, which blurred fine details on desktops. */
#map-scene .plot .building-ground > .sprite:not([src$="/plot.webp"]),
#map-scene .plot .advanced-building {
  filter:none !important;
}
#map-scene .plot .building-ground :is(img.sprite,svg.sprite),
#map-scene .plot:hover .building-ground :is(img.sprite,svg.sprite),
#map-scene .plot:focus-visible .building-ground :is(img.sprite,svg.sprite) {
  transform:none !important;
  scale:1 !important;
  image-rendering:auto;
  transition:none !important;
}
/* Keep svg layers internally animated, but do not scale the whole image on hover. */
#map-scene .plot:hover svg.sprite,
#map-scene .plot:focus-visible svg.sprite {scale:1 !important;}

/* Height adjusted in layout rather than using a fractional wrapper scale. */
#map-scene .plot .building-ground > .sprite,
#map-scene .plot .advanced-building > .sprite {
  height:calc(var(--map-pixel) * 60 * var(--ew-art-scale));
}
#map-scene #plot-wood:not([data-level="0"]) .building-ground > .sprite,
#map-scene #plot-stone:not([data-level="0"]) .building-ground > .sprite {
  height:calc(var(--map-pixel) * 50.8);
}
#map-scene #plot-stone:not([data-level="0"]) .building-ground > .sprite {
  height:calc(var(--map-pixel) * 48.6);
}
#map-scene #plot-flight:not([data-level="0"]) .building-ground > .sprite {
  height:calc(var(--map-pixel) * 89 * .765);
}
#map-scene #plot-guild:not([data-level="0"]) .building-ground > .sprite {
  height:calc(var(--map-pixel) * 91.8 * .765);
}
#map-scene :is(#plot-farm,#plot-clay,#plot-research)[data-level="2"] .building-ground > .sprite,
#map-scene :is(#plot-farm,#plot-clay)[data-level="3"] .building-ground > .sprite {
  height:calc(var(--map-pixel) * 54);
}
@media (max-height:540px) and (orientation:landscape) {
  #map-scene .plot .building-ground > .sprite,
  #map-scene .plot .advanced-building > .sprite {
    height:calc(var(--map-pixel) * 41 * var(--ew-art-scale));
  }
  #map-scene #plot-flight:not([data-level="0"]) .building-ground > .sprite {height:calc(var(--map-pixel) * 61 * .765);}
  #map-scene #plot-guild:not([data-level="0"]) .building-ground > .sprite {height:calc(var(--map-pixel) * 63 * .765);}
  #map-scene :is(#plot-farm,#plot-clay,#plot-research)[data-level="2"] .building-ground > .sprite,
  #map-scene :is(#plot-farm,#plot-clay)[data-level="3"] .building-ground > .sprite {height:calc(var(--map-pixel) * 36.9);}
}

/* Webtest 127: Restore the 7% hover lift without reintroducing resting-state blur.
   Non-hover geometry is handled by V126's layout dimensions, not scale(). */
#map-scene .plot .building-ground {
  transform-origin:center bottom;
  transition:transform 190ms cubic-bezier(.2,.8,.25,1) !important;
}
@media (hover:hover) and (pointer:fine) {
  #map-scene .plot:hover {z-index:8}
  #map-scene .plot:hover .building-ground {
    transform:translateY(-4px) scale(1.07) !important;
  }
}
#map-scene .plot:focus-visible .building-ground {
  transform:translateY(-3px) scale(1.05) !important;
}
@media (prefers-reduced-motion:reduce) {
  #map-scene .plot .building-ground {transition:none !important}
}


/* Webtest 128: New original Eichenwacht logo and isolated golden lettering. */
.game-header .brand-logo{
  width:clamp(148px,38vw,255px);height:clamp(32px,8vw,46px);max-height:none;
  object-fit:contain;object-position:center;
}
#boot-screen .boot-logo{
  width:min(88vw,630px);height:auto;max-height:min(42dvh,390px);
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 7px 12px #05091799);
}
#menu .menu-emblem{
  display:block;width:min(82%,345px);height:auto;max-height:min(30dvh,240px);
  object-fit:contain;margin:0 auto 12px;
}
@media(max-width:700px) and (orientation:portrait){
  .game-header .brand-logo{width:min(54vw,230px);height:clamp(29px,7vw,42px);}
  #boot-screen .boot-logo{width:min(91vw,480px);max-height:38dvh;}
  #menu .menu-emblem{width:min(83%,310px);max-height:25dvh;}
}

/* Webtest 135: building hover fix, equal display size, unclipped art, blue stage badges. */
#map-scene .plot{
  width:calc(var(--map-pixel) * 78) !important;
  overflow:visible;
}
#map-scene .plot .building-ground,
#map-scene .plot:hover .building-ground,
#map-scene .plot:focus-visible .building-ground{
  width:100% !important;
  margin-inline:auto;
  overflow:visible;
  transform-origin:center bottom;
  scale:1 !important;
  filter:none !important;
  transition:transform 160ms cubic-bezier(.2,.8,.25,1) !important;
}
#map-scene .plot .building-ground > .sprite,
#map-scene .plot .advanced-building > .sprite,
#map-scene .plot:hover .building-ground > .sprite,
#map-scene .plot:focus-visible .building-ground > .sprite{
  width:100%;
  max-width:100%;
  height:calc(var(--map-pixel) * 60) !important;
  object-fit:contain;
  object-position:center bottom;
  transform:none !important;
  scale:1 !important;
  transition:none !important;
  overflow:visible;
}
#map-scene .plot .building-ground::before{width:82%;height:24%;transform:translate(0,14%);}
@media (hover:hover) and (pointer:fine){
  #map-scene .plot:hover{z-index:8;}
  #map-scene .plot:hover .building-ground{transform:translateY(-3px) scale(1.04) !important;}
}
#map-scene .plot:focus-visible .building-ground{transform:translateY(-3px) scale(1.04) !important;}
#map-scene .plot .label{
  margin-top:4px;
  padding-right:14px;
}
#map-scene .plot .plot-level{
  border-color:#d7c27a;
  background:linear-gradient(180deg,#356fbe 0%, #244c89 100%);
  color:#f7f2df;
  box-shadow:0 2px 4px rgba(16,20,35,.42);
}
@media (max-height:540px) and (orientation:landscape){
  #map-scene .plot{width:calc(var(--map-pixel) * 52) !important;}
  #map-scene .plot .building-ground > .sprite,
  #map-scene .plot .advanced-building > .sprite,
  #map-scene .plot:hover .building-ground > .sprite,
  #map-scene .plot:focus-visible .building-ground > .sprite{height:calc(var(--map-pixel) * 41) !important;}
}

/* === Webtest 129: complete static reboot for all 12 buildings / stages 1-5. === */
*,*::before,*::after {animation:none !important;transition:none !important;scroll-behavior:auto !important;}
#map-scene .plot, #map-scene .plot:hover, #map-scene .plot:focus-visible { filter:none !important; }
#map-scene .plot .building-ground,
#map-scene .plot:hover .building-ground,
#map-scene .plot:focus-visible .building-ground {
  scale:1 !important;transform:none !important;filter:none !important;
  transition:none !important;will-change:auto !important;
}
#map-scene .plot .building-ground > img.ew-stage-art,
#map-scene .plot:hover .building-ground > img.ew-stage-art,
#map-scene .plot:focus-visible .building-ground > img.ew-stage-art {
  width:100% !important;
  height:calc(var(--map-pixel) * 64) !important;
  display:block !important;max-width:100% !important;
  object-fit:contain !important;object-position:center bottom !important;
  image-rendering:auto !important;
  transform:none !important;scale:1 !important;filter:none !important;
}
#map-scene .plot .building-ground::before,
#map-scene .plot .hearth-smoke,
#map-scene .lake-fog, #map-scene .river-motion,
#map-scene .fountain-water, #map-scene .map-walkers,
#map-scene .sparkles {display:none !important;}
#map-scene .plot .label {margin-top:2px;}
@media (max-height:540px) and (orientation:landscape){
  #map-scene .plot .building-ground > img.ew-stage-art,
  #map-scene .plot:hover .building-ground > img.ew-stage-art {
    height:calc(var(--map-pixel) * 45) !important;
  }
}

/* Webtest 137: restore a single subtle hover enlargement on the complete sprite.
   All images resolve directly from buildings/ and only this wrapper moves. */
@media (hover:hover) and (pointer:fine){
  #map-scene .plot:hover .building-ground{
    transform:translateY(-2px) scale(1.045) !important;
    transform-origin:center bottom !important;
  }
}
#map-scene .plot:focus-visible .building-ground{
  transform:translateY(-2px) scale(1.045) !important;
  transform-origin:center bottom !important;
}
#map-scene .plot .building-ground > img.ew-stage-art,
#map-scene .plot:hover .building-ground > img.ew-stage-art,
#map-scene .plot:focus-visible .building-ground > img.ew-stage-art{
  object-fit:contain !important;
  transform:none !important;
  scale:1 !important;
}


/* Webtest 138: one transparent, equal-size sprite per building stage; no panel/rectangular backdrops. */
#map-scene .plot{width:calc(var(--map-pixel) * 74) !important;filter:none !important;overflow:visible !important;}
#map-scene .plot .building-ground{width:100% !important;min-width:0 !important;display:block !important;position:relative !important;overflow:visible !important;filter:none !important;scale:1 !important;transform:none !important;backface-visibility:visible !important;transition:transform 150ms ease-out !important;}
#map-scene .plot .building-ground::before, #map-scene .plot .building-extensions,#map-scene .plot .yard-art,#map-scene .plot .scaffold,#map-scene .plot .hearth-smoke{display:none !important;}
#map-scene .plot .building-ground>img.ew-stage-art,#map-scene .plot:hover .building-ground>img.ew-stage-art,#map-scene .plot:focus-visible .building-ground>img.ew-stage-art{display:block !important;width:100% !important;height:auto !important;aspect-ratio:1 / 1 !important;max-width:100% !important;object-fit:contain !important;object-position:center bottom !important;transform:none !important;scale:1 !important;filter:none !important;image-rendering:auto !important;transition:none !important;}
@media(hover:hover) and (pointer:fine){#map-scene .plot:hover .building-ground{transform:translateY(-2px) scale(1.045) !important;}}
#map-scene .plot:focus-visible .building-ground{transform:translateY(-2px) scale(1.045) !important;}
#map-scene .plot .plot-level{background:linear-gradient(180deg,#407fc9,#234e96) !important;color:#fff4d8 !important;border:1px solid #d8be7c !important;}
@media(max-height:540px) and (orientation:landscape){#map-scene .plot{width:calc(var(--map-pixel) * 52) !important;}}

/* Webtest 139: clean equally sized 512x512 transparent sprites, one illustration per plot. */
#map-scene .plot {width:calc(var(--map-pixel) * 78) !important;overflow:visible !important;}
#map-scene .plot .building-ground, #map-scene .plot:hover .building-ground {width:100% !important; overflow:visible !important;display:block !important;filter:none !important;scale:1 !important;}
#map-scene .plot .building-ground>img.ew-stage-art,#map-scene .plot:hover .building-ground>img.ew-stage-art{width:100% !important;height:auto !important;aspect-ratio:1 !important;object-fit:contain !important;transform:none !important;filter:none !important;}
#map-scene .plot .plot-level{background:linear-gradient(180deg,#407fc9,#234e96) !important;color:#fff4d8 !important;}
@media(hover:hover) and (pointer:fine){#map-scene .plot:hover .building-ground{transform:translateY(-2px) scale(1.045) !important;}}
@media(max-height:540px) and (orientation:landscape){#map-scene .plot{width:calc(var(--map-pixel) * 52) !important;}}

/* Webtest 141 — 50% larger built-building art, stable labels and plot anchors.
   The empty plot retains its natural size and uses the new comic lawn with fence. */
#map-scene .plot { width:calc(var(--map-pixel) * 78) !important; overflow:visible !important; }
#map-scene .plot .building-ground {
  position:relative !important; width:100% !important; height:calc(var(--map-pixel) * 78) !important;
  overflow:visible !important; display:block !important;
  transform-origin:center bottom !important;
}
#map-scene .plot .building-ground > img.ew-stage-art,
#map-scene .plot:hover .building-ground > img.ew-stage-art,
#map-scene .plot:focus-visible .building-ground > img.ew-stage-art {
  position:absolute !important; bottom:0 !important; left:50% !important;
  width:100% !important; height:100% !important; max-width:none !important;
  transform:translateX(-50%) !important; scale:1 !important;
  object-fit:contain !important; object-position:center bottom !important;
  filter:none !important; transition:none !important;
}
#map-scene .plot.plot-built .building-ground > img.ew-stage-art,
#map-scene .plot.plot-built:hover .building-ground > img.ew-stage-art,
#map-scene .plot.plot-built:focus-visible .building-ground > img.ew-stage-art {
  width:150% !important; height:150% !important;
}
#map-scene .plot.plot-empty .building-ground > img.ew-stage-art,
#map-scene .plot.plot-empty:hover .building-ground > img.ew-stage-art {
  width:100% !important; height:100% !important;
}
@media (hover:hover) and (pointer:fine){
  #map-scene .plot:hover {z-index:12}
  #map-scene .plot:hover .building-ground{transform:translateY(-2px) scale(1.045) !important;}
}
#map-scene .plot .label{z-index:20}


/* Webtest 142 — buildings another 50% larger (225% total vs base), exact empty plot image, real loading bar. */
#boot-screen .boot-track{position:relative;overflow:hidden}
#boot-screen .boot-fill{
  width:0%;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#9a5f2e 0%,#f4c86f 45%,#fff0b5 60%,#c67a2e 100%);
  box-shadow:0 0 10px #f3c46688, inset 0 1px 0 #fff5c7aa;
  transition:width .12s linear;
}
#boot-screen .boot-track::after{display:none}

#map-scene .plot.plot-built .building-ground > img.ew-stage-art,
#map-scene .plot.plot-built:hover .building-ground > img.ew-stage-art,
#map-scene .plot.plot-built:focus-visible .building-ground > img.ew-stage-art {
  width:225% !important; height:225% !important;
}
#map-scene .plot.plot-empty .building-ground > img.ew-stage-art,
#map-scene .plot.plot-empty:hover .building-ground > img.ew-stage-art,
#map-scene .plot.plot-empty:focus-visible .building-ground > img.ew-stage-art {
  width:108% !important; height:108% !important;
}


/* Webtest 143 — much smaller empty plots, buildings lower toward labels, bigger blue level badge. */
#map-scene .plot .label{
  margin-top:-14px !important;
  padding-right:18px !important;
}
#map-scene .plot .plot-level{
  width:2.15em !important;
  font:800 11px/1 system-ui,sans-serif !important;
  border:1px solid #e1c87f !important;
  background:linear-gradient(180deg,#4d8ee0 0%, #2a5aa7 100%) !important;
  color:#fff7e6 !important;
  box-shadow:0 2px 5px rgba(16,20,35,.48) !important;
  transform:translate(48%,-48%) !important;
}
#map-scene .plot.plot-built .building-ground > img.ew-stage-art,
#map-scene .plot.plot-built:hover .building-ground > img.ew-stage-art,
#map-scene .plot.plot-built:focus-visible .building-ground > img.ew-stage-art {
  bottom:-8% !important;
}
#map-scene .plot.plot-empty .building-ground > img.ew-stage-art,
#map-scene .plot.plot-empty:hover .building-ground > img.ew-stage-art,
#map-scene .plot.plot-empty:focus-visible .building-ground > img.ew-stage-art {
  width:42% !important;
  height:42% !important;
  bottom:-2% !important;
}
@media (max-width: 900px){
  #map-scene .plot .label{margin-top:-10px !important;}
  #map-scene .plot .plot-level{width:2em !important;font:800 10px/1 system-ui,sans-serif !important;}
  #map-scene .plot.plot-empty .building-ground > img.ew-stage-art,
  #map-scene .plot.plot-empty:hover .building-ground > img.ew-stage-art,
  #map-scene .plot.plot-empty:focus-visible .building-ground > img.ew-stage-art {width:40% !important;height:40% !important;}
}

/* Webtest 145: built sprites 10% smaller; a little extra breathing room above labels. */
#map-scene .plot.plot-built .building-ground > img.ew-stage-art,
#map-scene .plot.plot-built:hover .building-ground > img.ew-stage-art,
#map-scene .plot.plot-built:focus-visible .building-ground > img.ew-stage-art {
  width:202.5% !important;
  height:202.5% !important;
}
#map-scene .plot .label { margin-top:-8px !important; }
@media (max-width:900px){
  #map-scene .plot .label {margin-top:-5px !important;}
}


/* Webtest 147: centered building name labels; effects anchored to the same single panorama. */
#map-scene .plot > .label {
  display:block !important;
  box-sizing:border-box !important;
  position:relative !important;
  text-align:center !important;
  justify-self:center !important;
  align-self:center !important;
  width:max-content !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:12px !important;
  padding-right:12px !important;
  white-space:nowrap !important;
}
#map-scene .plot > .label .plot-level {right:0 !important;}
#map-scene .ew-atmosphere {
  position:absolute;inset:0 auto 0 -100%;width:300%;height:100%;
  pointer-events:none;overflow:visible;z-index:1;
}
#map-scene .ew-mist {opacity:.80;transform-box:view-box;}
#map-scene .ew-mist-one {animation:ew-fog-one 18s ease-in-out infinite alternate !important;}
#map-scene .ew-mist-two {animation:ew-fog-two 25s ease-in-out infinite alternate !important;}
#map-scene .ew-mist-three {animation:ew-fog-three 21s ease-in-out infinite alternate !important;}
@keyframes ew-fog-one {0%{transform:translateX(-38px);opacity:.37}100%{transform:translateX(59px);opacity:1}}
@keyframes ew-fog-two {0%{transform:translateX(56px);opacity:.88}100%{transform:translateX(-45px);opacity:.35}}
@keyframes ew-fog-three {0%{transform:translateX(-28px);opacity:.3}100%{transform:translateX(45px);opacity:.9}}
#map-scene .ew-river-lines path {
  fill:none;stroke:#b4fffa;stroke-width:1.9;
  stroke-linecap:round;stroke-dasharray:5 18 2 15;opacity:.62;
  animation:ew-water-flow 2.8s linear infinite !important;
}
#map-scene .ew-river-lines path:nth-child(2){stroke:#64d8e9;stroke-width:2.2;opacity:.65;animation-duration:3.9s !important;}
#map-scene .ew-river-lines path:nth-child(3){stroke:#f1ffff;opacity:.48;animation-duration:3.2s !important;}
@keyframes ew-water-flow {to{stroke-dashoffset:-80}}
#map-scene .ew-fountain-jet {
  fill:none;stroke:#bffaff;stroke-width:2.5;stroke-linecap:round;opacity:.92;
  stroke-dasharray:5 2;
  animation:ew-fountain-spout 1.15s ease-in-out infinite alternate !important;
}
#map-scene .ew-jet-two {animation-delay:-.43s !important;}
#map-scene .ew-jet-three {animation-delay:-.7s !important;stroke-width:2;}
#map-scene .ew-fountain-ripple {fill:none;stroke:#cafbff;stroke-width:1.6;opacity:.72;animation:ew-fountain-ripple 1.4s ease-in-out infinite !important;transform-origin:704px 370px;}
#map-scene .ew-ripple-two {animation-delay:-.7s !important;}
@keyframes ew-fountain-spout {0%{opacity:.38;stroke-dashoffset:0}100%{opacity:1;stroke-dashoffset:-9}}
@keyframes ew-fountain-ripple {0%{opacity:.86;transform:scale(.7)}100%{opacity:.1;transform:scale(1.3)}}
#map-scene .ew-light {opacity:.56;animation:ew-lantern-pulse 3.9s ease-in-out infinite alternate !important;}
#map-scene .ew-light-slow{animation-duration:5.2s !important;animation-delay:-1.7s !important;}
@keyframes ew-lantern-pulse {0%{opacity:.26}50%{opacity:.74}100%{opacity:.43}}
@media(prefers-reduced-motion:reduce){
  #map-scene .ew-mist,#map-scene .ew-river-lines path,
  #map-scene .ew-fountain-jet,#map-scene .ew-fountain-ripple,#map-scene .ew-light{animation:none !important;}
  #map-scene .ew-mist{opacity:.22;}
}


/* Webtest 148 — subtler river, stronger fog, 2px white outline, larger detail art. */
#map-scene .ew-atmosphere{z-index:1.5;}
#map-scene .ew-mist{opacity:1 !important;mix-blend-mode:screen;}
#map-scene .ew-mist-one{animation:ew-fog-one-148 14s ease-in-out infinite alternate !important;}
#map-scene .ew-mist-two{animation:ew-fog-two-148 19s ease-in-out infinite alternate !important;}
#map-scene .ew-mist-three{animation:ew-fog-three-148 16s ease-in-out infinite alternate !important;}
@keyframes ew-fog-one-148{0%{transform:translateX(-48px);opacity:.58}100%{transform:translateX(68px);opacity:1}}
@keyframes ew-fog-two-148{0%{transform:translateX(64px);opacity:.96}100%{transform:translateX(-54px);opacity:.5}}
@keyframes ew-fog-three-148{0%{transform:translateX(-34px);opacity:.46}100%{transform:translateX(55px);opacity:.92}}
#map-scene .ew-river-lines path{
  fill:none;stroke:#d3fbff;stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:3 20 1 18;opacity:.24;
  animation:ew-water-flow-148 5.8s linear infinite !important;
}
#map-scene .ew-river-lines path:nth-child(2){stroke:#8ceaf5;stroke-width:1.25;opacity:.28;animation-duration:7.2s !important;}
#map-scene .ew-river-lines path:nth-child(3){stroke:#ffffff;stroke-width:.9;opacity:.18;animation-duration:6.4s !important;}
@keyframes ew-water-flow-148{to{stroke-dashoffset:-56}}

.portrait{height:clamp(150px,31vh,250px) !important;}
.portrait img{width:94% !important;height:100% !important;object-fit:contain !important;}
.portrait-with-preview{--preview-width:clamp(88px,35%,150px) !important;}
.portrait-current{padding-inline:clamp(12px,5%,26px) calc(var(--preview-width) + 14px) !important;}
.portrait-next{right:8px !important;bottom:8px !important;width:var(--preview-width) !important;height:clamp(76px,16vh,132px) !important;padding:4px !important;}
.portrait-next-art :is(.sprite,.building-extensions){width:96% !important;height:100% !important;}
.portrait-next figcaption{font-size:clamp(9px,2.15vw,12px) !important;}
@media(max-width:700px){
  .portrait{height:clamp(130px,24vh,195px) !important;}
  .portrait-with-preview{--preview-width:clamp(78px,38%,124px) !important;}
  .portrait-next{height:clamp(68px,14vh,104px) !important;}
}
@media(prefers-reduced-motion:reduce){
  #map-scene .ew-mist,#map-scene .ew-river-lines path{animation:none !important;}
}


/* Webtest 149: efficiently animated flow ONLY on actual cyan river pixels. */
#map-scene .ew-river-lines {display:none !important;}
#map-scene .ew-river-flow {
  position:absolute;top:0;left:-100%;width:300%;height:100%;z-index:1;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:url('scenery/river-water-mask-149.png');
  mask-image:url('scenery/river-water-mask-149.png');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  opacity:.42;
  background-image:
    repeating-linear-gradient(166deg,transparent 0px,transparent 16px,rgba(168,242,247,.36) 17px,transparent 19px,transparent 38px),
    repeating-linear-gradient(188deg,transparent 0px,transparent 29px,rgba(24,152,175,.23) 31px,transparent 33px,transparent 57px);
  background-size:120px 170px,150px 220px;
  animation:ew-current-149 12s linear infinite;
  will-change:background-position;
}
@keyframes ew-current-149{from{background-position:0 0,0 0}to{background-position:16px 170px,-12px 220px}}
/* Fog moves softly with only compositor-friendly translation and opacity. */
#map-scene .ew-mist{
  mix-blend-mode:normal !important;transform-box:fill-box;transform-origin:center center;
  will-change:transform,opacity;
}
#map-scene .ew-mist-one{animation:ew-mist-soft-1 26s ease-in-out infinite alternate !important;}
#map-scene .ew-mist-two{animation:ew-mist-soft-2 34s ease-in-out infinite alternate !important;}
#map-scene .ew-mist-three{animation:ew-mist-soft-3 29s ease-in-out infinite alternate !important;}
@keyframes ew-mist-soft-1{from{transform:translate3d(-42px,0,0);opacity:.74}to{transform:translate3d(58px,-8px,0);opacity:.95}}
@keyframes ew-mist-soft-2{from{transform:translate3d(60px,2px,0);opacity:.92}to{transform:translate3d(-52px,-7px,0);opacity:.64}}
@keyframes ew-mist-soft-3{from{transform:translate3d(-30px,-5px,0);opacity:.62}to{transform:translate3d(48px,4px,0);opacity:.92}}
/* One subtle enlargement on hover; no extra white perimeter. */
#map-scene .plot .building-ground > img.ew-stage-art,
#map-scene .plot:hover .building-ground > img.ew-stage-art,
#map-scene .plot:focus-visible .building-ground > img.ew-stage-art{
  filter:none !important;
}
/* Keep the enlarged current and next-level artwork from version 148. */
@media (prefers-reduced-motion:reduce){
 #map-scene .ew-river-flow,#map-scene .ew-mist{animation:none !important;will-change:auto;}
}


/* Webtest 150: full-size, tightly cropped building portraits (map sprites unchanged). */
#building .portrait{height:clamp(265px,37vh,360px) !important;min-height:265px !important;overflow:hidden;}
#building .portrait-with-preview{
  --preview-width:0px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.24fr) minmax(0,1fr) !important;
  align-items:stretch !important;
  gap:2px !important;
  padding:9px !important;
}
#building .portrait-current{
  display:grid !important;place-items:center !important;
  min-width:0 !important;width:100% !important;height:100% !important;
  padding:0 !important;overflow:visible !important;
}
#building .portrait-current > img.ew-portrait-art,
#building .portrait:not(.portrait-with-preview) > img.ew-portrait-art{
  width:100% !important;height:100% !important;max-width:none !important;
  object-fit:contain !important;filter:none !important;image-rendering:auto !important;
}
#building .portrait-next{
  position:relative !important;right:auto !important;bottom:auto !important;
  width:100% !important;height:100% !important;margin:0 !important;
  padding:6px !important;min-width:0 !important;min-height:0 !important;
  grid-template-rows:minmax(0,1fr) auto !important;
  align-self:stretch !important;
}
#building .portrait-next-art{display:grid !important;place-items:center !important;min-height:0 !important;overflow:hidden !important;}
#building .portrait-next-art > img.ew-portrait-art{
  display:block !important;width:100% !important;height:100% !important;max-width:none !important;
  object-fit:contain !important;filter:none !important;image-rendering:auto !important;
}
#building .portrait-next figcaption{font-size:13px !important;line-height:1.25 !important;}
@media(max-width:700px){
  #building .portrait{height:clamp(238px,34vh,325px) !important;min-height:238px !important;}
  #building .portrait-with-preview{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) !important;padding:6px !important;}
}

/* Webtest 150: visibly flowing water along the existing cyan-pixel river mask.
   Only the composited highlights move; the 3,548px background stays stationary. */
#map-scene .ew-river-flow{
  opacity:1 !important;
  z-index:3 !important;
  background:none !important;
  animation:none !important;
  will-change:auto !important;
  overflow:hidden !important;
}
#map-scene .ew-river-flow::before,
#map-scene .ew-river-flow::after{
  content:'';position:absolute;inset:-110px 0 0 0;
  pointer-events:none;
  background-repeat:repeat;
  will-change:transform;
}
#map-scene .ew-river-flow::before{
  background-image:repeating-linear-gradient(168deg,
    transparent 0px,transparent 9px,
    rgba(206,251,255,.62) 10px,
    rgba(159,241,250,.25) 11px,
    transparent 13px,transparent 27px);
  background-size:48px 56px;
  animation:ew-river-current-a-150 3.2s linear infinite !important;
  opacity:.75;
}
#map-scene .ew-river-flow::after{
  background-image:repeating-linear-gradient(194deg,
    transparent 0px,transparent 19px,
    rgba(70,212,236,.48) 20px,
    transparent 22px,transparent 40px);
  background-size:64px 84px;
  animation:ew-river-current-b-150 5.4s linear infinite !important;
  opacity:.65;
}
@keyframes ew-river-current-a-150{from{transform:translate3d(0,-56px,0)}to{transform:translate3d(0,0,0)}}
@keyframes ew-river-current-b-150{from{transform:translate3d(0,-84px,0)}to{transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){
  #map-scene .ew-river-flow::before,#map-scene .ew-river-flow::after{animation:none !important;transform:none !important;}
}


/* Webtest 151 — compact next-level tile, softened lake fog edge, narrower river, hourglass queue next to menu. */
.game-hud .hud-actions{
  pointer-events:auto;position:relative;display:flex;align-items:center;gap:7px;
  width:max-content;margin-top:8px;
}
.game-hud .hud-actions #menu-open{
  position:static !important;inset:auto !important;top:auto !important;left:auto !important;
  margin:0 !important;width:43px;height:40px;flex:none;
}
.game-hud .hud-actions .queue-drawer{
  position:relative !important;inset:auto !important;top:auto !important;left:auto !important;
  right:auto !important;bottom:auto !important;z-index:20;pointer-events:auto;
}
.game-hud .queue-toggle{
  display:grid;place-items:center;width:43px;height:40px;min-height:40px;
  padding:0;background:#416d70;color:#ffe8b1;border:2px solid #241e2a;
  border-radius:6px;box-shadow:0 2px 0 #211a25,inset 0 0 0 1px #80a5a1;
}
.game-hud .queue-toggle svg{display:block;max-width:25px;max-height:25px;}
.game-hud .queue-toggle::after{content:none !important;display:none !important;}
.game-hud .queue-toggle[aria-expanded=true]{background:#5c8584;border-color:#cfac6f;}
.game-hud #queue-panel{
  position:absolute !important;inset:auto auto auto -50px !important;
  left:-50px !important;right:auto !important;top:calc(100% + 9px) !important;bottom:auto !important;
  width:min(320px,calc(100vw - 24px)) !important;
  max-height:min(58dvh,470px);z-index:25;pointer-events:auto;
  transform-origin:top left;
}
.game-hud #queue-panel[inert]{transform:translateY(-8px);}
@media(max-width:700px){
  .game-hud .hud-actions{gap:6px;margin-top:7px;}
  .game-hud .hud-actions #menu-open,.game-hud .queue-toggle{width:39px;height:37px;min-height:37px;}
  .game-hud #queue-panel{left:-45px !important;}
}
#map-scene .ew-river-flow{
  mask-image:url('scenery/river-water-mask-151.png') !important;
  -webkit-mask-image:url('scenery/river-water-mask-151.png') !important;
  mask-size:100% 100% !important;-webkit-mask-size:100% 100% !important;
  mask-repeat:no-repeat !important;-webkit-mask-repeat:no-repeat !important;
}
/* Keep the large current building but return stage preview to a small bottom-right card. */
#building .portrait-with-preview{
  display:block !important;position:relative !important;padding:10px !important;
}
#building .portrait-current{
  display:grid !important;place-items:center !important;
  width:100% !important;height:100% !important;padding:0 !important;
}
#building .portrait-current > img.ew-portrait-art{width:88% !important;height:94% !important;}
#building .portrait-next{
  position:absolute !important;top:auto !important;left:auto !important;
  right:9px !important;bottom:9px !important;
  width:clamp(98px,30%,140px) !important;
  height:clamp(94px,13vh,126px) !important;
  padding:5px !important;overflow:hidden !important;
  display:grid !important;grid-template-rows:minmax(0,1fr) auto !important;
  background:#3d3036;border:1px solid #bb935d;border-radius:6px;
  box-shadow:0 2px 7px rgba(18,13,15,.5);
}
#building .portrait-next-art > img.ew-portrait-art{width:100% !important;height:100% !important;object-fit:contain !important;}
#building .portrait-next figcaption{font-size:12px !important;line-height:1.2 !important;}
@media(max-width:700px){
  #building .portrait-next{width:clamp(90px,29%,116px) !important;height:clamp(85px,11vh,108px) !important;}
}



/* Webtest 153 — restore the original November 13 comic residents, walking gait and town-square conversations. */
#building .portrait-current > img.ew-portrait-art,
#building .portrait:not(.portrait-with-preview) > img.ew-portrait-art {width:74% !important;height:82% !important;max-width:none !important;}
@media(max-width:700px){
  #building .portrait-current > img.ew-portrait-art,
  #building .portrait:not(.portrait-with-preview) > img.ew-portrait-art {width:72% !important;height:80% !important;}
}
#map-scene .ew-classic-walkers {position:absolute;inset:0;z-index:2;overflow:visible;pointer-events:none;contain:layout style;}
#map-scene .ew-classic-walkers .market-walker {position:absolute;display:block;width:1.6%;height:auto;transform:translate(-50%,-89%);pointer-events:none;will-change:left,top;}
#map-scene .ew-classic-walkers .market-walker svg {display:block;width:100%;height:auto;overflow:visible;transform:scaleX(var(--facing,1));filter:drop-shadow(0 1px 1px rgba(30,24,16,.48));}
#map-scene .ew-classic-walkers .walker-leg {transform-box:fill-box;transform-origin:50% 0;animation:ew153-stride .57s ease-in-out infinite alternate;}
#map-scene .ew-classic-walkers .walker-leg-back {animation-direction:alternate-reverse;}
#map-scene .ew-classic-walkers .walker-body {animation:ew153-bob .57s ease-in-out infinite;}
#map-scene .ew-classic-walkers .plaza-paused :is(.walker-leg,.walker-body) {animation:none;}
#map-scene .ew-classic-walkers .plaza-speaking .walker-body {animation:ew153-nod .75s ease-in-out infinite;}
#map-scene .ew-classic-walkers .plaza-speech {position:absolute;top:-5%;left:50%;transform:translate(-50%,-65%);display:flex;align-items:center;gap:2px;padding:2px 3px;border:1px solid #5c4737;border-radius:7px;background:#e3cca4;}
#map-scene .ew-classic-walkers .plaza-speech[hidden] {display:none;}
#map-scene .ew-classic-walkers .plaza-speech i {width:2px;height:2px;border-radius:50%;background:#644a38;animation:ew153-talk-dot .85s ease-in-out infinite;}
#map-scene .ew-classic-walkers .plaza-speech i:nth-child(2){animation-delay:.14s}
#map-scene .ew-classic-walkers .plaza-speech i:nth-child(3){animation-delay:.28s}
@keyframes ew153-stride {from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
@keyframes ew153-bob {50%{transform:translateY(-1.3px)}}
@keyframes ew153-nod {50%{transform:translateY(-1px) rotate(-2deg)}}
@keyframes ew153-talk-dot {50%{opacity:.36;transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce) {
  #map-scene .ew-classic-walkers .walker-leg,
  #map-scene .ew-classic-walkers .walker-body,
  #map-scene .ew-classic-walkers .plaza-speech i {animation:none !important;}
}

/* Webtest 154: ensure classic pedestrians render visibly above scenery and effects. */
#map-scene .ew-classic-walkers{z-index:5 !important;visibility:visible !important;opacity:1 !important;}
#map-scene .ew-classic-walkers .market-walker{visibility:visible !important;opacity:1 !important;min-width:13px;}


/* Webtest 156 — 50% larger inhabitants; same visual style, real road paths. */
#map-scene .ew-classic-walkers .market-walker{width:3.075% !important;min-width:18px !important;}
#map-scene .ew-classic-walkers .plaza-paused .walker-leg,
#map-scene .ew-classic-walkers .plaza-paused .walker-body{animation-play-state:paused !important;}

/* Webtest 157 — 20% larger characters than v156, still above scenery and below click targets */
#map-scene .ew-classic-walkers .market-walker{width:2.952% !important;min-width:17px !important;}

/* Critical map-coordinate fix: the three-panel panorama is 300% wide and starts one panel left of the central scene. */
#map-scene #ew-classic-walkers{
  position:absolute !important;left:-100% !important;right:auto !important;top:0 !important;bottom:auto !important;
  width:300% !important;height:100% !important;z-index:5 !important;
  pointer-events:none !important;overflow:visible !important;
}
/* 20% larger than the actual v156 (3.075% of ONE panel), not than an incorrectly scaled triple panel. */
#map-scene #ew-classic-walkers .market-walker{
  width:calc(var(--scene-width) * .0369) !important;min-width:18px !important;
}

/* Webtest 158: brighter, softly pulsing lantern lighting. */
#map-scene .ew-lantern-lights .ew-light{opacity:.88;animation:ew-lantern-glow-158 4.4s ease-in-out infinite alternate !important;}
#map-scene .ew-lantern-lights .ew-light-slow{animation-duration:5.7s !important;animation-delay:-1.7s !important;}
@keyframes ew-lantern-glow-158{0%{opacity:.62}50%{opacity:1}100%{opacity:.78}}
@media(prefers-reduced-motion:reduce){#map-scene .ew-lantern-lights .ew-light{opacity:.84;animation:none !important;}}

/* iOS TestFlight 159: visible native notification preferences in game menu. */
#notification-pref[hidden]{display:none !important}
.ew-notification-pref{border:1px solid #a77e54;border-radius:8px;background:#2b2930;padding:12px;display:grid;gap:7px;color:#f8e4bd}
.ew-notification-pref label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;cursor:pointer}
.ew-notification-pref input{accent-color:#d4a05b;min-width:22px;min-height:22px}
.ew-notification-pref small{font-size:12px;line-height:1.3;color:#f4d6a1}

/* Webtest 160: accurate lantern flames only, softly pulsing with limited halo. */
#map-scene .ew-lantern-lights .ew-light{opacity:.90;animation:ew-lantern-160 4.6s ease-in-out infinite alternate !important;}
#map-scene .ew-lantern-lights .ew-light-slow{animation-duration:5.5s !important;animation-delay:-1.8s !important;}
@keyframes ew-lantern-160{0%{opacity:.65}50%{opacity:.94}100%{opacity:.78}}
@media(prefers-reduced-motion:reduce){#map-scene .ew-lantern-lights .ew-light{opacity:.82;animation:none !important;}}


/* Webtest 164 / iOS Build 7: true aspect-ratio map, no vertical stretching.
   The JS computes a cover-sized 2:3 page and centers the crop inside the
   fullscreen terrain. The SAME layout geometry is used for roads, plots,
   people, light effects, and the illustrated background. */
#map-window{
  top:var(--map-top,0px) !important;
  left:var(--map-left,0px) !important;
  width:var(--scene-width) !important;
  height:calc(var(--scene-width) * 1.5) !important;
  max-height:none !important;
}
/* Mobile game HUD and loading art remain full-bleed. */
#boot-screen{position:fixed;inset:0}
#boot-screen .boot-art{width:100%;height:100%;object-fit:cover}
/* Remove transient bottom status popups, not building progress or APNs pushes. */
#toast{display:none !important}


/* Webtest 165 / iOS Build 8: restore a less zoomed phone framing.
   On narrow portrait phones, the top becomes a dedicated HUD tile with
   logo + resources, the map starts below it, and the map fills to the
   bottom without vertical distortion. */
html.ew-phone-layout body{
  background:#342937;
}
html.ew-phone-layout .game-hud{
  pointer-events:auto;
  background:linear-gradient(#38303a,#241f29);
  border:2px solid #987449;
  border-radius:12px;
  box-shadow:0 2px 0 #1b151b,inset 0 0 0 2px #211a23,inset 0 0 0 3px #b48b5144;
  padding:9px 10px 10px;
}
html.ew-phone-layout .game-header{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  gap:6px;
}
html.ew-phone-layout .game-header .brand-logo{
  width:min(40vw,180px);
  max-height:31px;
}
html.ew-phone-layout .game-header #resources{
  width:100%;
}
html.ew-phone-layout .game-hud .hud-actions{
  margin-top:8px;
}
html.ew-phone-layout .game-hud .hud-actions #menu-open,
html.ew-phone-layout .game-hud .queue-toggle{
  width:40px;
  height:38px;
  min-height:38px;
}
html.ew-phone-layout main{
  top:var(--main-top,0px) !important;
  bottom:0 !important;
  left:0 !important;
  right:0 !important;
}
html.ew-phone-layout .world{
  inset:0 !important;
}
html.ew-phone-layout .world::before{
  content:'';
  position:absolute;
  inset:0;
  background:#342937;
  z-index:-2;
}
html.ew-phone-layout .terrain{
  background:#342937;
}
html.ew-phone-layout #map-window{
  top:var(--map-top,0px) !important;
  left:var(--map-left,0px) !important;
}
html.ew-phone-layout footer{
  bottom:max(6px,env(safe-area-inset-bottom)) !important;
}
@media(max-width:700px) and (orientation:portrait){
  html.ew-phone-layout .game-hud{
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    top:max(8px,env(safe-area-inset-top));
  }
}


/* Eichenwacht 166 — complete three-panel desktop map, portrait phone layout.
   The 165 #map-window !important width accidentally clipped the desktop map
   to a single page, despite the desktop scene spanning three pages. */
.terrain.desktop-map #map-window{
  width:calc(var(--scene-width) * 3) !important;
  height:calc(var(--scene-width) * 1.5) !important;
  top:var(--map-top,0px) !important;
  left:var(--map-left,0px) !important;
  overflow:hidden;
}
.terrain.desktop-map #map-scene{
  top:0 !important;
  left:var(--scene-width) !important;
  height:100% !important;
  width:var(--scene-width) !important;
  transition:none !important;
}
/* Resource tile contains only the five resources. The title remains on the
   loading screen and menus, but no longer consumes game HUD height. */
.game-header .brand-logo{display:none !important;}
.game-header{grid-template-columns:minmax(0,1fr) !important;}
.game-header #resources{width:100%;max-width:680px;justify-self:center;}
/* Menu and build queue are floating game controls, NOT inside the resource tile. */
.game-hud{overflow:visible !important;}
.game-hud .hud-actions{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  left:6px !important;
  margin:0 !important;
  z-index:50 !important;
  pointer-events:auto;
}
html.ew-phone-layout .game-hud{padding:8px !important;}
html.ew-phone-layout .game-hud .hud-actions{
  position:fixed !important;
  top:calc(var(--main-top,100px) + 9px) !important;
  left:max(12px,env(safe-area-inset-left)) !important;
  margin:0 !important;
}
html.ew-phone-layout .game-header .brand-logo{display:none !important;}
html.ew-phone-layout main{
  top:var(--main-top,0px) !important;
  bottom:0 !important;
}
/* Loading emblem aligned to the middle of the entire loading screen. */
#boot-screen .boot-logo{
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(84vw,56dvh,560px) !important;
  max-height:54dvh !important;
  object-fit:contain !important;
}
#toast{display:none !important;}


/* Webtest 167 — tighter build timers and semi-transparent resource tile over the map. */
.game-hud{
  background:rgba(52,41,55,.78) !important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.game-header{
  background:rgba(82,63,88,.34) !important;
}
.game-header #resources{
  width:100%;
  max-width:680px;
}
.game-header .resource{
  background:rgba(74,56,74,.78) !important;
}
.game-hud .hud-actions{
  top:calc(100% + 6px) !important;
}
html.ew-phone-layout .game-hud{
  background:rgba(52,41,55,.74) !important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
html.ew-phone-layout .game-header{
  background:rgba(84,64,92,.30) !important;
}
html.ew-phone-layout .game-hud .hud-actions{
  top:calc(var(--main-top,100px) + 4px) !important;
}
#map-scene .plot .site-meter{
  top:calc(100% + 4px) !important;
}
@media(max-width:700px) and (orientation:portrait){
  #map-scene .plot .site-meter{
    top:calc(100% + 3px) !important;
  }
}

/* Webtest 168: only desktop/landscape tablet build timers need a little more
   breathing room under building name chips. Keep phone portrait as v167. */
@media (min-width:701px) {
  #map-scene .plot .site-meter {
    top:calc(100% + 19px) !important;
  }
}

/* Webtest 169 — phone portrait only: put menu and queue clearly below the
   resource tile; do not change desktop or the building timer spacing. */
@media (max-width:760px) and (orientation:portrait) {
  html.ew-phone-layout .game-hud .hud-actions {
    top:calc(var(--main-top,100px) + 38px) !important;
  }
}


/* Webtest 170: slower, tranquil river current. Retain the exact river mask. */
#map-scene .ew-river-flow::before {
  animation-duration:6.8s !important;
}
#map-scene .ew-river-flow::after {
  animation-duration:10.8s !important;
}
/* Keep the visual unchanged for people who request less animation. */
@media (prefers-reduced-motion: reduce) {
  #map-scene .ew-river-flow::before,
  #map-scene .ew-river-flow::after {animation:none !important;}
}