#map { background: #7cc96a; }
.map-world { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.map-svg { width: 100%; height: 100%; display: block; }
.map-svg text { font-family: var(--font); }

.ripple { animation: ripple 6s linear infinite; }
@keyframes ripple { to { stroke-dashoffset: -540; } }

.truck { animation: drive 26s linear infinite; }
.truck.t2 { animation-duration: 31s; animation-direction: reverse; animation-delay: -12s; }
@keyframes drive { from { transform: translateX(-220px); } to { transform: translateX(1840px); } }

.cloud { opacity: .72; pointer-events: none; animation: cloud 90s linear infinite; filter: drop-shadow(0 30px 0 rgba(0,40,0,.08)); }
.cloud.c1 { animation-delay: -10s; --cy: 170px; }
.cloud.c2 { animation-duration: 120s; animation-delay: -70s; --cy: 600px; }
.cloud.c3 { animation-duration: 140s; animation-delay: -40s; --cy: 330px; }
@keyframes cloud { from { transform: translate(-320px, var(--cy)); } to { transform: translate(1700px, var(--cy)); } }

.puff { transform-box: fill-box; transform-origin: center; pointer-events: none; }

/* ---------- Plots ---------- */
.plot { cursor: pointer; }
.plot .lift { transition: transform .28s cubic-bezier(.34,1.56,.64,1), filter .2s; }
.plot:hover .lift { transform: translateY(-5px); filter: brightness(1.06) drop-shadow(0 10px 8px rgba(0,0,0,.18)); }

.pad { stroke-linejoin: round; }
.pad.dirt { fill: #c49a64; stroke: #a57c4a; stroke-width: 3; }
.pad.concrete { fill: #c6c9d2; stroke: #a6aab6; stroke-width: 3; }
.pad-rope { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 8 6; opacity: .7; }
.peg { fill: #7a4b2a; }
.plot-sign { transform-box: fill-box; transform-origin: 50% 100%; }
.plot-sign .board { fill: #f2c48a; stroke: #8a5a2b; stroke-width: 3; }
.plot-empty:hover .plot-sign { animation: bob .9s ease-in-out infinite; }
.plot-empty:hover .pad.dirt { fill: #d6ad76; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.sign-main { font-size: 19px; font-weight: 800; fill: #5a3412; text-anchor: middle; }
.sign-sub { font-size: 11px; font-weight: 600; fill: #8a5a2b; text-anchor: middle; }

.building { --roof: #e85d3a; }
.building .b-body, .building .b-chimney, .building .b-sign, .building .b-signal, .building .tooth, .building .b-counts { transform-box: fill-box; transform-origin: 50% 100%; }
.building .b-counts { transform-origin: 50% 50%; }
.building .wall { fill: #f3ecdb; }
.building .side { fill: #d4c9b1; }
.building .base { fill: #d9ceb6; }
.building .roof { fill: var(--roof); }
.building .roof-side { fill: var(--roof); filter: brightness(.75); }
.building .glass { fill: #bfe1ff; }
.building .gate-frame { fill: #3b3f58; }
.building .gate-light { fill: #ffd77a; }
.building .slat { fill: #9aa3b5; }
.building .slat:nth-child(odd) { fill: #8b94a8; }
.building .b-win { fill: #6f7d99; stroke: #3b3f58; stroke-width: 2; transition: fill .4s; }
.building.is-connected .b-win { fill: #ffe08a; }
.building.is-working .b-win { animation: flicker 1.6s ease-in-out infinite; }
.building.is-working .b-win:nth-of-type(2n) { animation-delay: -.7s; }
@keyframes flicker { 0%, 100% { fill: #ffe08a; } 50% { fill: #fff3c4; } }
.building .sign-board { fill: #23263a; stroke: var(--roof); stroke-width: 3; }
.building .sign-text { font-size: 15px; font-weight: 800; fill: #fff; text-anchor: middle; letter-spacing: .02em; }
.building .lamp { fill: #3b3f58; transition: fill .3s; }
.building .lamp-y.on { fill: #ffc83d; animation: blink 1s steps(2) infinite; filter: drop-shadow(0 0 6px #ffc83d); }
.building .lamp-g.on { fill: #3ee07f; filter: drop-shadow(0 0 6px #3ee07f); }
.building .lamp-r.on { fill: #ff5a4f; filter: drop-shadow(0 0 6px #ff5a4f); }
@keyframes blink { 50% { opacity: .35; } }
.count-pill { fill: rgba(35,38,58,.85); }
.count-pill.review { fill: rgba(94,77,178,.9); }
.count-text { font-size: 13px; font-weight: 800; fill: #fff; text-anchor: middle; }
.count-icon { font-size: 11px; text-anchor: middle; }
.b-gear { opacity: 0; transition: opacity .2s; cursor: pointer; }
.b-gear circle { fill: #fff; stroke: #23263a; stroke-width: 2; }
.b-gear text { font-size: 17px; text-anchor: middle; fill: #23263a; }
.plot:hover .b-gear { opacity: 1; }
.b-gear:hover circle { fill: #ffc83d; }

.construction .scaffold { stroke: #c98b4f; stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; }
.construction .scaffold .diag { stroke-width: 2; opacity: .7; }
.construction .mast, .construction .jib { fill: #ffc83d; stroke: #b88a12; stroke-width: 2; }
.construction .lattice { stroke: #b88a12; stroke-width: 2; }
.construction .weight { fill: #5c6378; }
.construction .cab { fill: #2f6bff; stroke: #1c47b0; stroke-width: 2; }
.construction .tie { fill: none; stroke: #b88a12; stroke-width: 2; }
.construction .cable { stroke: #23263a; stroke-width: 2; }
.construction .hook { fill: none; stroke: #23263a; stroke-width: 3; }

/* ---------- HUD ---------- */
.map-hud { position: absolute; left: 16px; top: 14px; pointer-events: none; }
.hud-title { display: flex; align-items: center; gap: 10px; background: rgba(255,253,247,.94); border-radius: 14px; padding: 8px 14px 8px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: auto; }
.hud-title b { display: block; font-size: 17px; }
.hud-title small { color: var(--muted); font-size: 12px; }

/* ---------- Blueprint wizard ---------- */
.dialog.blueprint { width: min(760px, 96vw); max-height: 94vh; color: #eaf3ff; border: 3px solid #d7e8ff;
  background-color: #1d4f91;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; font-family: var(--mono); }
.blueprint .bp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; border-bottom: 2px dashed rgba(255,255,255,.4); padding-bottom: 10px; }
.blueprint h3 { margin: 0; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.bp-stamp { border: 2px solid #ffc83d; color: #ffc83d; padding: 2px 8px; border-radius: 4px; transform: rotate(-4deg); font-weight: 800; font-size: 12px; }
.bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.bp-grid .span2 { grid-column: span 2; }
.bp-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.blueprint label, .blueprint legend { color: #bcd7ff; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.blueprint input, .blueprint textarea, .blueprint select { background: rgba(255,255,255,.08); border: 1.5px dashed rgba(255,255,255,.45); color: #fff; font-family: var(--mono); }
.blueprint input::placeholder, .blueprint textarea::placeholder { color: rgba(255,255,255,.4); }
.blueprint input:focus, .blueprint textarea:focus, .blueprint select:focus { outline: none; border-style: solid; border-color: #ffc83d; background: rgba(255,255,255,.14); }
.blueprint select option { color: #23263a; }
.blueprint input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }
.blueprint .bp-check { display: flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 12px; cursor: pointer; }
.blueprint .bp-check input { width: auto; margin: 0; accent-color: #ffc83d; }
.blueprint fieldset { border: 1.5px dashed rgba(255,255,255,.3); border-radius: 8px; margin: 0 0 12px; padding: 8px 10px 10px; }
.blueprint small { color: #ffd9a0; }
.blueprint .btn { font-family: var(--font); }
.blueprint .btn:not(.primary) { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.blueprint .btn.danger { color: #ffb4ad; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 6px; border: 2px solid rgba(255,255,255,.5); background: var(--c); cursor: pointer; transition: transform .15s; }
.swatch:hover { transform: scale(1.12); }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 3px #ffc83d; transform: scale(1.12); }
@media (max-width: 700px) { .bp-grid, .bp-row { grid-template-columns: 1fr; } .bp-grid .span2 { grid-column: auto; } }

/* multiplayer: the player's factory agent isn't reachable */
.map-plaque { position: absolute; left: 50%; top: 84px; z-index: 6; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); padding: 16px 18px;
  border-radius: 18px; background: #fffdf7; color: #23263a; border: 3px solid #23263a; box-shadow: 0 6px 0 rgba(35, 38, 58, .3), 0 18px 40px rgba(0, 0, 0, .2); }
.map-plaque[hidden] { display: none; }
.map-plaque { max-height: calc(100% - 110px); overflow-y: auto; }
.mp-guide { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mp-step { display: flex; gap: 10px; align-items: flex-start; }
.mp-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #ff7a2f; color: #fff; font-size: 13px; margin-top: 1px; }
.mp-step > div { flex: 1; min-width: 0; }
.mp-step h4 { margin: 2px 0 2px; font-size: 15px; }
.mp-what { margin: 4px 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
.map-plaque kbd { display: inline-block; padding: 0 5px; border: 1.5px solid #23263a; border-bottom-width: 3px; border-radius: 5px; background: #fff; font: 700 12px system-ui, sans-serif; line-height: 17px; }
.map-plaque h3 { margin: 0 0 6px; font-size: 18px; }
.map-plaque p { margin: 6px 0; font-size: 14px; line-height: 1.4; }
.map-plaque .muted { color: #6b6f86; font-size: 13px; }
.mp-cmd { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 6px 6px 6px 10px; border-radius: 10px; background: #23263a; }
.mp-cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 0; background: none; color: #ffe38a; font-size: 13px; }
.mp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .map-plaque { top: 70px; padding: 12px; } }
.map-plaque p code { padding: 1px 5px; border-radius: 5px; background: #f0ece2; font-size: 12px; }
.mp-dev { margin-top: 8px; font-size: 13px; }
.mp-dev summary { cursor: pointer; color: #6b6f86; font-weight: 700; }
.mp-os { display: inline-flex; gap: 2px; margin: 4px 0 8px; padding: 3px; border-radius: 10px; background: #f0ece2; }
.mp-os button { padding: 4px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 800; color: #6b6f86; cursor: pointer; }
.mp-os button.on { background: #fff; color: #23263a; box-shadow: 0 1px 0 rgba(35, 38, 58, .2); }
.mp-actions.mp-left { justify-content: flex-start; align-items: center; margin-top: 4px; }
.mp-download { font-size: 15px; padding: 9px 16px; }
.mp-done { color: #1f9d55; font-size: 13px; font-weight: 800; }
.mp-steps { margin: 10px 0 6px; padding-left: 22px; font-size: 14px; line-height: 1.45; }
.mp-steps li + li { margin-top: 3px; }
.map-plaque a { color: #2f6fd6; font-weight: 700; }
.mp-sep { margin: 12px 0 8px; border: 0; border-top: 2px dashed #e6dfcf; }