/* ── Construction Site Theme ─────────────────────────────────────────────── */
@import url('/styles.css?v=construct-1');

.campus-shell { border-color: #5a7248; }
.map-toolbar { background: #1e2e1c; }
.agent-button { width: 96px; height: 112px; }
.agent-button .agent-name { font-size: 15px; }
.agent-button .agent-state { font-size: 11px; }
.agent-meter { top: 112px; width: 74px; }

/* Walking animation for agents */
@keyframes walk-across {
  0%   { transform: translateX(0px); }
  45%  { transform: translateX(28px) rotate(4deg); }
  55%  { transform: translateX(28px) rotate(4deg); }
  100% { transform: translateX(0px); }
}
@keyframes walk-legs {
  0%, 100% { transform: rotate(-18deg); }
  50%       { transform: rotate(18deg); }
}
@keyframes breathe {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.04); }
}
@keyframes crane-swing {
  0%, 100% { transform: rotate(-8deg); }
  50%       { transform: rotate(8deg); }
}
@keyframes work-spark {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  50%       { opacity: 1; transform: translateY(-14px) scale(1.2); }
}
.agent-button.walking {
  animation: walk-across 5s ease-in-out infinite, breathe 3s ease-in-out infinite;
}
.agent-button.walking .character-body { animation: walk-legs 0.35s ease-in-out infinite; }
.agent-button.working .work-signal { animation: work-spark 1.2s ease-out infinite; }

/* Building rise */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.building { animation: rise-in 0.6s ease-out both; }
.building-0 { animation-delay: 0.05s; }
.building-1 { animation-delay: 0.15s; }
.building-2 { animation-delay: 0.25s; }
.building-3 { animation-delay: 0.35s; }
.building-4 { animation-delay: 0.45s; }
.building-5 { animation-delay: 0.55s; }

/* Crane arm swing */
.crane { animation: crane-swing 6s ease-in-out infinite; transform-origin: 50% 85%; }

/* Token burn panel */
#token-panel {
  position: fixed; top: 80px; right: 14px; width: 290px; max-width: calc(100vw - 28px);
  background: #1c2e1c; border: 2px solid #5a7248; border-radius: 12px;
  padding: 12px 14px; font-size: 12px; color: #dbe6c4; z-index: 200;
  box-shadow: 0 4px 24px #0006;
}
@media (max-width: 900px) {
  #token-panel { display: none; }
  main { display: block; height: auto; min-height: 0; }
  .campus-shell { margin-bottom: 14px; }
  .viewport { height: 62vh; }
}
#token-panel h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: 1px; color: #9fd0c2; }
.token-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid #2a402a; }
.token-row:last-child { border: none; }
.token-row span { color: #becedc; }
.token-row b { color: #e5f1dd; font-size: 13px; }
.token-burn { color: #ff9a6c !important; }

/* Progress bars */
.progress { height: 6px; background: #1e3455; border-radius: 4px; overflow: hidden; }
.progress div { height: 100%; background: linear-gradient(90deg, #4ecf8c, #8ff1d0); border-radius: 4px; transition: width 0.5s ease; }
.progress.high div { background: linear-gradient(90deg, #ffd580, #ffe8a0); }
.progress.low div { background: linear-gradient(90deg, #ff9a6c, #ffb89a); }

/* Passgate overlay */
#passgate-overlay {
  display: none; position: fixed; inset: 0; background: #0d1a10ee;
  z-index: 1000; align-items: center; justify-content: center;
}
#passgate-overlay.open { display: flex; }
.pin-form { background: #1c2e1c; border: 2px solid #5a7248; border-radius: 14px; padding: 32px 28px; text-align: center; max-width: 360px; }
.pin-form h3 { color: #9fd0c2; margin: 0 0 6px; letter-spacing: 2px; font-size: 16px; }
.pin-form p { color: #7a9a7a; font-size: 12px; margin: 0 0 20px; }
.pin-form input { background: #0d1a10; border: 2px solid #5a7248; border-radius: 8px; color: #e5f1dd; padding: 10px 16px; font-size: 18px; letter-spacing: 4px; width: 100%; text-align: center; outline: none; }
.pin-form input:focus { border-color: #8ff1d0; }
.pin-form button { margin-top: 16px; background: #2d5a2d; border: 2px solid #5a7248; border-radius: 8px; color: #9fd0c2; padding: 10px 28px; font-size: 14px; cursor: pointer; letter-spacing: 1px; }
.pin-form button:hover { background: #3a723a; }
.pin-error { color: #ff9a6c; font-size: 12px; margin-top: 10px; min-height: 18px; }

/* Reality layer (behind passgate) */
#reality-layer { display: none; }
#reality-layer.unlocked { display: block; }