/* The factory floor (js/floor.js): one lane per machine, drawn in canvas. */

/* The door: the same plank sign as the dungeon, on the other side of the field. */
.floor-door {
  left: 8px; right: auto !important;
  background: none; border: 0; padding: 0; cursor: pointer;
}
html:not(.embed) .floor-door { left: 18px !important; right: auto !important; top: 10px !important; }
html.embed .floor-door { left: 4px; right: auto; top: 2px; }
.floor-door .prop-art { width: clamp(44px, 8.6vh, 74px); }
.floor-door:hover { transform: scale(1.06) rotate(2deg); }
.floor-door .gear { animation: floor-gear 3s linear infinite; transform-box: fill-box; transform-origin: center; }
.floor-door .puff { animation: floor-puff 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.floor-door .puff.p2 { animation-delay: 1.2s; }
@keyframes floor-gear { to { transform: rotate(360deg); } }
@keyframes floor-puff {
  0% { transform: translate(0, 6px) scale(.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(6px, -14px) scale(1.4); opacity: 0; }
}

/* The panel is wider than the others: a lane wants room for machines. */
.panel--floor {
  max-width: min(520px, 100%) !important;
  width: 100%;
  padding: 12px 12px 14px !important;
}
.panel--floor .panel-head { gap: 10px; }
.floor-total {
  margin-left: auto;
  padding: 3px 10px;
  border: 2px solid var(--ink, #2c2416);
  border-radius: 99px;
  background: linear-gradient(#fff3b0, #ffd34d);
  font-family: var(--pixel, monospace);
  font-size: .7rem;
  box-shadow: 0 2px 0 var(--ink, #2c2416);
}
.floor-total:empty { display: none; }
.floor-empty { margin: 8px 2px 12px; font-size: .86rem; line-height: 1.45; }
.floor-lanes { display: grid; gap: 10px; }

.lane {
  position: relative;
  height: 138px;
  border: 3px solid var(--ink, #2c2416);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 0 var(--ink, #2c2416), inset 0 0 0 2px rgba(255, 255, 255, .25);
  background: #1b2233;
  animation: lane-in .45s cubic-bezier(.3, 1.4, .5, 1) both;
}
.lane canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lane-tag {
  position: absolute; left: 8px; top: 7px;
  display: flex; align-items: baseline; gap: 7px;
  padding: 3px 10px 4px;
  background: url('../assets/ui/plank.svg') center / 100% 100% no-repeat;
  color: #fff8ea;
  text-shadow: 0 2px 0 #5a3b12, 1px 0 0 #5a3b12, -1px 0 0 #5a3b12;
  pointer-events: none;
}
.lane-tag b { font-family: var(--shout, sans-serif); font-weight: 400; font-size: .82rem; letter-spacing: .02em; }
.lane-tag span { font-family: var(--pixel, monospace); font-size: .62rem; opacity: .95; }
.lane-more {
  position: absolute; right: 8px; bottom: 7px;
  padding: 2px 8px;
  border: 2px solid var(--ink, #2c2416);
  border-radius: 99px;
  background: #fff8ea;
  font-family: var(--pixel, monospace);
  font-size: .6rem;
  box-shadow: 0 2px 0 var(--ink, #2c2416);
}
.lane.is-locked { filter: grayscale(.85) brightness(.75); }
.lane.is-locked .lane-tag b { letter-spacing: .2em; }
@keyframes lane-in { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

.floor-shop, .floor-link {
  display: block; width: 100%;
  margin-top: 12px;
  padding: 9px 12px;
  border: 3px solid var(--ink, #2c2416);
  border-radius: 12px;
  background: linear-gradient(#7ee08a, #3fbf58);
  color: #10301a;
  font-family: var(--shout, sans-serif);
  font-size: .9rem;
  box-shadow: 0 4px 0 var(--ink, #2c2416);
  cursor: pointer;
}
.floor-shop:active, .floor-link:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink, #2c2416); }
.floor-link {
  margin: 0 0 10px;
  background: linear-gradient(#fff3b0, #ffd34d);
  color: #3a2606;
  font-size: .82rem;
}

/* The shop's machine icons are the floor's own drawings now. */
.upgrade-icon--art { padding: 0 !important; background: none !important; border: 0 !important; }
.upgrade-icon--art img { width: 46px; height: 46px; display: block; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .floor-door .gear, .floor-door .puff, .lane { animation: none; }
}