/* Des fondations solides: a building site, a yellow crane carrying a white MakeProps banner. */
.tower { position: absolute; inset: 0; touch-action: none; }
.tower::before { content: ''; position: absolute; left: calc(-1 * var(--bleed)); right: calc(-1 * var(--bleed)); top: 76px; bottom: calc(-1 * var(--bleed)); background: linear-gradient(#9CC9F8 0%, #CFE5FF 48%, #EEF5FF 82%) 0 0 / 100% 744px repeat-x, #EEF5FF; }
.tower-sky { position: absolute; left: 0; right: 0; top: 76px; bottom: 0; overflow: hidden; }
.cloud { position: absolute; height: 34px; border-radius: 34px; background: rgba(255, 255, 255, .9); }
.cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 54px; height: 54px; left: 20px; top: -26px; }
.cloud::after { width: 40px; height: 40px; left: 62px; top: -16px; }
.cloud-a { left: 470px; top: 160px; width: 130px; }
.cloud-b { left: 880px; top: 196px; width: 110px; opacity: .85; }
.cloud-c { left: 1040px; top: 120px; width: 110px; }
.skyline { position: absolute; left: 0; right: 0; bottom: 60px; height: 160px; background:
  linear-gradient(#C4D4EC, #C4D4EC) 330px 60px / 80px 100px no-repeat,
  linear-gradient(#B4C7E3, #B4C7E3) 414px 18px / 56px 142px no-repeat,
  linear-gradient(#C9D7EE, #C9D7EE) 1020px 82px / 92px 78px no-repeat,
  linear-gradient(#B4C7E3, #B4C7E3) 1100px 30px / 70px 130px no-repeat; }

.crane { position: absolute; left: 0; top: 0; width: 1180px; height: 820px; pointer-events: none; }
.crane-steel { fill: none; stroke: #DDA200; }
.crane-cable { fill: none; stroke: #8A8F96; stroke-width: 2; }
.crane-logo { color: var(--logo-ink); }

.plot { position: absolute; height: 10px; background: #9AA3AF; border-radius: 2px; }
.floors, .debris { position: absolute; inset: 0; pointer-events: none; }
.floor { position: absolute; height: 44px; display: grid; place-items: center; border-radius: 3px; background: var(--floor); color: #FFFFFF; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .25); }
.floor::before { content: ''; position: absolute; left: 10px; right: 10px; top: 10px; bottom: 15px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 22px, transparent 22px 34px); }
.floor span { position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.floor-landed { animation: land .22s ease-out; }
.floor-cut { opacity: .85; }
.load { position: absolute; z-index: 3; width: 520px; height: 320px; pointer-events: none; }
.load-rig { position: absolute; left: 0; top: 0; }
.floor-hanging { box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .16), 0 18px 30px rgba(22, 65, 148, .25); }
.ground { position: absolute; left: calc(-1 * var(--bleed)); right: calc(-1 * var(--bleed)); top: 760px; bottom: calc(-1 * var(--bleed)); z-index: 2; background: radial-gradient(circle, rgba(80, 60, 30, .28) 1.2px, transparent 1.7px) 0 0 / 12px 12px, #BCA683; }
.ground::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(-45deg, #F2B705 0 14px, #1E1E1E 14px 28px); }

.yard { position: absolute; z-index: 4; left: 24px; top: 176px; width: 268px; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; box-shadow: 0 12px 30px rgba(12, 51, 81, .16); }
.yard-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.yard-logo { width: 130px; height: 25px; color: var(--logo-ink); margin-bottom: 4px; }
.yard-head b { font-size: 17px; }
.yard-head span { font-size: 13px; color: var(--ink-soft); }
.yard-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.yard-block { height: 40px; padding: 0; border: 0; background: none; text-align: left; }
.yard-bar { display: flex; align-items: center; height: 40px; padding: 0 10px; border-radius: 4px; background: var(--floor); color: #FFFFFF; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); }
.yard-block:active .yard-bar { filter: brightness(1.1); }
.yard-used { opacity: .28; filter: grayscale(.6); pointer-events: none; }
.tower-prompt { position: absolute; z-index: 5; left: 740px; top: 772px; transform: translateX(-50%); padding: 8px 20px; border-radius: 30px; background: #FFFFFF; box-shadow: 0 4px 12px rgba(12, 51, 81, .16); font-size: 15px; font-weight: 600; white-space: nowrap; }
.tower .stamp { left: 740px; top: 300px; }

@keyframes land { 0% { transform: translateY(-4px) scaleY(.96); } 100% { transform: none; } }