/* =====================================================================
   MODO ARQUITETO — arrastar e soltar + rótulos dos botões flutuantes
   (arquivo separado para não misturar com as cores/tema do style.css)
   ===================================================================== */

/* Arrastando: a bandeja fica transparente e não atrapalha soltar perto da borda */
.arch-tray { transition: opacity .15s ease; }
body.arch-dragging .arch-tray { opacity: .3; pointer-events: none; }
body.arch-dragging .arch-actions { display: none !important; }
body.arch-dragging, body.arch-dragging * { cursor: grabbing !important; }

/* Cada botão redondo diz o que faz (sem precisar adivinhar o ícone) */
.arch-actions { padding-bottom: 22px; }
.arch-act { position: relative; }
.arch-act[data-label]::after {
  content: attr(data-label);
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px;
  font-size: var(--fs-xs, 12px); line-height: 1; white-space: nowrap; pointer-events: none;
  color: #fff7e0; text-shadow: 1px 1px 0 #2b1d14, -1px 1px 0 #2b1d14, 1px -1px 0 #2b1d14, -1px -1px 0 #2b1d14;
}

/* Ferramentas da bandeja: foto, desfazer, refazer (sempre visíveis; apagadinhas quando não há o que fazer) */
.arch-tool { min-height: 44px; width: 46px; padding: 0 !important; font-size: 22px; flex: 0 0 auto; }
.arch-tool:disabled { opacity: .35; cursor: default; filter: grayscale(.6); }
html.is-phone .arch-tool { width: 40px; font-size: 20px; }
.arch-card-price { font-size: 11px !important; padding: 0 3px !important; background: #4e8a2e !important; }

/* Modo foto: só a fazenda, com um botão de voltar que nunca some */
body.photo-mode #game-container > :not(#game-canvas):not(#photo-exit):not(#photo-tip) { display: none !important; }
.photo-exit {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 2000;
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; cursor: pointer;
  font-family: var(--pixel-font); font-size: 18px; color: #fff7e0;
  background: rgba(43, 29, 20, 0.72); border: 2px solid rgba(255, 247, 224, 0.7); border-radius: 24px;
}
body:not(.photo-mode) .photo-exit, body:not(.photo-mode) .photo-tip { display: none !important; }
.photo-tip {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2000; pointer-events: none;
  padding: 8px 16px; border-radius: 20px; background: rgba(43, 29, 20, 0.72); color: #fff7e0;
  font-family: var(--pixel-font); font-size: 16px; white-space: nowrap; opacity: 0;
}
.photo-tip.fade { animation: photoTip 3.2s ease forwards; }
@keyframes photoTip { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* Tela estreita (celular em pé): o texto ganha a linha toda e os botões vão para a linha de baixo */
@media (max-width: 560px) {
  .arch-head { flex-wrap: wrap; row-gap: 8px; }
  .arch-head .arch-info { flex: 1 1 100%; order: -1; }
  .arch-head .arch-icon { display: none; }
  #player-architect-done { margin-left: auto; }
}

/* Enfeite escolhido na bandeja: um ✕ mostra que tocar de novo para de colocar */
.arch-card.on::after {
  content: '✕'; position: absolute; top: -8px; left: -8px; width: 20px; height: 20px; line-height: 18px;
  border-radius: 50%; background: #e7a093; color: #5a1a12; border: 2px solid var(--px-out); font-size: 12px; text-align: center;
}

/* Bolinha no botão do Arquiteto: canteiros novos na mochila */
#dock-btn-architect { position: relative; }
.dock-arch-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: #16a34a; color: #fff; border: 1.5px solid #bbf7d0;
  font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; pointer-events: none;
  animation: arch-badge-pulse 1.6s ease-in-out infinite;
}
.dock-arch-badge[hidden] { display: none; }
@keyframes arch-badge-pulse { 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .dock-arch-badge { animation: none; } }
.arch-card-plot { border-color: #16a34a; }