/* =============================================
   FORMAS.CSS – Estilos do jogo "Encaixar Formas"
   Depende de css/global.css e css/games/_base.css.
   ============================================= */

html, body {
  --game-bg: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
  display: flex; flex-direction: column;
}

.game-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 50px 14px 8px; gap: 8px; flex-shrink: 0; z-index: 100;
}

#arena {
  flex: 1; position: relative; overflow: hidden;
}

/* BARRA INFERIOR (variante em flex, sem text-align) */
.bottom-bar {
  display: flex; align-items: center; gap: 10px;
  text-align: left;
}
.prog-info { font-size: 1rem; font-weight: 800; color: #fff; white-space: nowrap; }
.prog-wrap { flex:1; height: 9px; background: rgba(255,255,255,0.2); border-radius: 99px; overflow: hidden; }
.prog-fill { height:100%; background:#fff; border-radius:99px; transition: width .4s ease; }
.instr-lbl { font-size: 1rem; font-weight: 800; color: rgba(255,255,255,0.88); white-space: nowrap; }

/* SLOTS */
.slot {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  border: 4px dashed rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.1);
  transition: border-color .2s, background .2s, transform .2s;
}
.slot.hover-active { border-color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.22); transform: scale(1.06); }
.slot.filled       { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); }
.slot-ghost { width:70%; height:70%; opacity:0.28; font-size: 2.2rem; display:flex; align-items:center; justify-content:center; }

/* PEÇAS */
.piece {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: box-shadow .15s, transform .15s;
  z-index: 10; touch-action: none;
}
.piece.dragging { cursor:grabbing; box-shadow: 0 16px 36px rgba(0,0,0,0.4); transform: scale(1.1) rotate(3deg); z-index:100; }
.piece.placed   { animation: snap-in .3s cubic-bezier(0.34,1.56,0.64,1) forwards; pointer-events:none; }
@keyframes snap-in { 0%{transform:scale(1.2) rotate(4deg)} 100%{transform:scale(1) rotate(0)} }