/* One compact troop row; two upward drawers never resize the city. */ #gameScreen .bottom-hud.navigation97 { position:relative!important;display:grid!important; grid-template-columns:150px minmax(0,1fr) 150px; flex-direction:row!important;align-items:center!important;gap:12px!important; min-height:0!important;height:auto!important;padding:5px 16px!important; overflow:visible!important;z-index:100; } #gameScreen .navigation97 .hud-actions { position:absolute!important;inset:0!important;display:block!important; width:auto!important;min-width:0!important;overflow:visible!important; pointer-events:none; } #gameScreen .navigation97 .live-army59 { grid-column:2;grid-row:1;width:100%!important;min-width:0!important; justify-content:safe center!important;overflow-x:auto!important; } #gameScreen .navigation97 .nav97-toggle { position:relative;grid-row:1;display:flex;align-items:center;justify-content:center; gap:8px;min-height:50px;padding:8px 10px;border:1px solid #bfa365; border-radius:10px;background:linear-gradient(#294444,#142b30);color:#f7e6bd; font:600 14px system-ui;cursor:pointer;z-index:2; } #gameScreen .navigation97 .nav97-toggle.nav97-left {grid-column:1} #gameScreen .navigation97 .nav97-toggle.nav97-right {grid-column:3} #gameScreen .navigation97 .nav97-badge {position:absolute;right:-4px;top:-5px;min-width:20px;padding:2px 5px;border-radius:12px;background:#bf6824;color:#fff;font:bold 11px system-ui;box-shadow:0 2px 5px #0006} #gameScreen .navigation97 .nav97-badge[hidden] {display:none!important} #gameScreen .navigation97 .nav97-arrow {transition:transform .2s} #gameScreen .navigation97 [aria-expanded="true"] .nav97-arrow {transform:rotate(180deg)} #gameScreen .navigation97 .nav97-panel { position:absolute;bottom:calc(100% + 8px);width:230px;max-width:calc(100vw - 24px); max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;gap:7px;padding:12px;box-sizing:border-box; background:linear-gradient(135deg,#203b3e,#11252c);border:1px solid #c0a363; border-radius:12px;box-shadow:0 10px 30px #0008; visibility:hidden;opacity:0;transform:translateY(14px);pointer-events:none; transition:transform .2s,opacity .2s,visibility .2s; } #gameScreen .navigation97 .nav97-panel.nav97-left {left:0} #gameScreen .navigation97 .nav97-panel.nav97-right {right:0} #gameScreen .navigation97 .nav97-panel.open {visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto} #gameScreen .navigation97 .nav97-panel>button { position:relative;display:flex!important;align-items:center;justify-content:flex-start; flex-direction:row!important;gap:10px;min-height:43px!important;width:100%!important; padding:9px 12px!important;border:1px solid #698476!important;border-radius:8px!important; background:#294341!important;color:#fff1d0!important;font-size:14px!important; } #gameScreen .navigation97 .nav97-panel>button img {width:23px!important;height:23px!important;object-fit:contain} #gameScreen .navigation97 button:hover {filter:brightness(1.14)} #gameScreen .navigation97 button:focus-visible {outline:3px solid #f4d68b;outline-offset:2px} @media(max-width:700px){ #gameScreen .bottom-hud.navigation97 {grid-template-columns:48px minmax(0,1fr) 48px;gap:6px!important;padding:4px 6px!important} #gameScreen .navigation97 .nav97-toggle {min-height:46px;padding:5px;font-size:19px} #gameScreen .navigation97 .nav97-toggle>span:not(:first-child):not(.nav97-badge) {display:none} #gameScreen .navigation97 .live-army59 {justify-content:flex-start!important} } @media(prefers-reduced-motion:reduce){ #gameScreen .navigation97 .nav97-panel,#gameScreen .navigation97 .nav97-arrow {transition:none} } /* Construction lots stay invisible until hovered, focused or selecting a site. */ #gameScreen #browserCity .browser-plot.empty, #gameScreen #browserCity .guard-plot60.vacant { width:7%!important;height:calc(var(--city-height,600px)*.075)!important; min-width:30px!important;min-height:24px!important;aspect-ratio:auto; transform:translate(-50%,-100%);border:0!important;border-radius:0!important; background:transparent!important;justify-content:center; } #gameScreen #browserCity .guard-plot60.vacant {width:4.5%!important;height:calc(var(--city-height,600px)*.045)!important} #gameScreen #browserCity .browser-plot.empty span, #gameScreen #browserCity .guard-plot60.vacant span { opacity:0;transition:opacity .16s;background:transparent!important;border:0!important; } #gameScreen #browserCity .browser-plot.empty:hover, #gameScreen #browserCity .browser-plot.empty:focus-visible, #gameScreen #browserCity .guard-plot60.vacant:hover, #gameScreen #browserCity .guard-plot60.vacant:focus-visible, body:has(#browserDialog.construction-sidebar98) #gameScreen #browserCity .browser-plot.empty, body:has(#browserDialog.construction-sidebar98) #gameScreen #browserCity .guard-plot60.vacant { background:#f8df6d38!important;outline:2px solid #ffe69a;outline-offset:1px; box-shadow:0 0 16px #ffe59b88; } #gameScreen #browserCity .browser-plot.empty:hover span, #gameScreen #browserCity .browser-plot.empty:focus-visible span, #gameScreen #browserCity .guard-plot60.vacant:hover span, #gameScreen #browserCity .guard-plot60.vacant:focus-visible span, body:has(#browserDialog.construction-sidebar98) #gameScreen #browserCity .browser-plot.empty span, body:has(#browserDialog.construction-sidebar98) #gameScreen #browserCity .guard-plot60.vacant span {opacity:1;color:#fff1af;text-shadow:0 1px 4px #000;font-weight:bold} #browserDialog.construction-sidebar98 { inset:70px 12px 90px auto!important;width:min(370px,calc(100vw - 24px)); padding:0!important;background:transparent!important;backdrop-filter:none!important; z-index:20000;display:flex!important;align-items:stretch;pointer-events:none; } #browserDialog.construction-sidebar98>article { width:100%!important;max-width:100%!important;height:100%;max-height:100%!important; box-sizing:border-box;padding:12px!important;pointer-events:auto;overflow:auto!important; } #browserDialog.construction-sidebar98 header h2 {font-size:20px!important} #browserDialog.construction-sidebar98 .building-catalog73 {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #browserDialog.construction-sidebar98 .building-catalog73 button {min-width:0;font-size:12px} #browserDialog.construction-sidebar98 .building-catalog73 img {width:80px;height:70px} #browserDialog.construction-sidebar98 .browser-dialog-body>p {font-size:12px;line-height:1.4} @media(max-width:600px){#browserDialog.construction-sidebar98 {inset:100px 6px 80px auto!important;width:min(300px,calc(100vw - 12px))}} @media(prefers-reduced-motion:reduce){#gameScreen #browserCity .browser-plot span {transition:none!important}} /* More substantial sprites, retaining reachable centres in dense layouts. */ #gameScreen #browserCity .browser-plot:not(.empty):not(.guard-plot60) img {height:calc(var(--city-height,600px)*.145)} #gameScreen #browserCity .browser-plot[data-construction-building="townhall"] img {height:calc(var(--city-height,600px)*.19)} #gameScreen #browserCity .browser-plot[data-construction-building="wall"] img {height:calc(var(--city-height,600px)*.085)} #gameScreen #browserCity .guard-plot60:not(.vacant) img {height:calc(var(--city-height,600px)*.07)} #gameScreen #browserCity .browser-plot:not(.empty):not(.vacant) {height:calc(var(--city-height,600px)*.075);min-height:26px} #gameScreen #browserCity .browser-plot:not(.empty):not(.vacant)>img {position:absolute;bottom:20px;pointer-events:none} #gameScreen #browserCity .browser-plot:not(.empty):not(.vacant)>span {position:absolute;bottom:0;pointer-events:none} #gameScreen #browserCity .guard-plot60:not(.vacant) {height:calc(var(--city-height,600px)*.045);min-height:20px} #gameScreen #browserCity .guard-plot60:not(.vacant)>img {bottom:14px} #browserDialog.construction-sidebar98 .construction-cost99 {display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:5px;color:#514124;font-size:11px} #browserDialog.construction-sidebar98 .construction-cost99 span {display:inline-flex;align-items:center;gap:3px} #browserDialog.construction-sidebar98 .construction-cost99 img {width:17px;height:17px} body:has(#browserDialog[data-construction-slot="0"]) #browserCity>.browser-plot:nth-child(1 of .browser-plot), body:has(#browserDialog[data-construction-slot="1"]) #browserCity>.browser-plot:nth-child(2 of .browser-plot), body:has(#browserDialog[data-construction-slot="2"]) #browserCity>.browser-plot:nth-child(3 of .browser-plot), body:has(#browserDialog[data-construction-slot="3"]) #browserCity>.browser-plot:nth-child(4 of .browser-plot), body:has(#browserDialog[data-construction-slot="4"]) #browserCity>.browser-plot:nth-child(5 of .browser-plot), body:has(#browserDialog[data-construction-slot="5"]) #browserCity>.browser-plot:nth-child(6 of .browser-plot), body:has(#browserDialog[data-construction-slot="6"]) #browserCity>.browser-plot:nth-child(7 of .browser-plot), body:has(#browserDialog[data-construction-slot="7"]) #browserCity>.browser-plot:nth-child(8 of .browser-plot), body:has(#browserDialog[data-construction-slot="8"]) #browserCity>.browser-plot:nth-child(9 of .browser-plot), body:has(#browserDialog[data-construction-slot="9"]) #browserCity>.browser-plot:nth-child(10 of .browser-plot) {outline:3px solid #6df5ed!important;background:#3de4cd55!important;box-shadow:0 0 22px #49eee4!important} #buildingModal .recruit-card {display:flex;flex-direction:column;gap:8px;padding:14px!important} #buildingModal .recruit-card p {margin:4px 0} #buildingModal .recruit-card button {margin-top:auto;min-height:40px} .forge-research-card {gap:8px;padding:14px!important} .mission-status {border-radius:7px;padding:5px 8px;background:#204640;color:#fff0c6!important;font-weight:600} /* The ground anchor belongs to the scene, never to the label or image box. */ #gameScreen #browserCity .browser-plot.grounded114 { transform:translate(-50%,-50%)!important; height:calc(var(--city-height,600px)*.055)!important; min-height:0!important;min-width:0!important;max-width:none; isolation:isolate; } #gameScreen #browserCity .browser-plot.grounded114>img { height:calc(var(--city-height,600px)*var(--sprite-height))!important; width:auto!important;max-width:calc(var(--city-height,600px)*.22); aspect-ratio:auto;object-fit:contain; bottom:25%!important;left:50%;transform:translateX(-50%); filter:drop-shadow(0 3px 2px #0006); } #gameScreen #browserCity .browser-plot.grounded114>span { position:absolute;top:100%;bottom:auto!important;left:50%;transform:translateX(-50%); pointer-events:none;opacity:0;transition:opacity .15s; } #gameScreen #browserCity .browser-plot.grounded114:hover>span, #gameScreen #browserCity .browser-plot.grounded114:focus-visible>span {opacity:1} #gameScreen #browserCity .browser-plot.grounded114:hover, #gameScreen #browserCity .browser-plot.grounded114:focus-visible {outline:2px solid #ffe69a;outline-offset:2px} #gameScreen #browserCity .browser-plot.grounded114.empty, #gameScreen #browserCity .browser-plot.grounded114.vacant {border-radius:50%!important}