/* =============================================
   CORES.CSS – Estilos do jogo "Cores"
   Depende de css/global.css e css/games/_base.css.
   ============================================= */

html, body {
  --game-bg: linear-gradient(135deg, #F7971E 0%, #FFD200 100%);
  touch-action: manipulation;
  display: flex; flex-direction: column;
}

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

.game-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 14px 60px;
  gap: 10px;
  overflow: hidden;
}

/* COMANDO */
.command-box {
  background: rgba(255,255,255,0.92);
  border-radius: 20px;
  padding: 10px 22px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  width: 100%; max-width: 500px;
  flex-shrink: 0;
}
.cmd-label { font-size: 0.8rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing:.06em; margin-bottom: 3px; }
.cmd-name  { font-size: 2rem; font-weight: 900; color: #1E2340; line-height: 1; }
.cmd-name.pulse { animation: cp 0.4s ease; }
@keyframes cp { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.cmd-swatch {
  width: 42px; height: 42px; border-radius: 50%;
  margin: 6px auto 0;
  border: 4px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background .3s;
}

/* GRADE – preenche a altura disponivel; as linhas dividem o espaco (sempre cabe) */
.colors-grid {
  display: grid;
  gap: 10px;
  width: 100%; max-width: 520px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 62vh;
  grid-auto-rows: 1fr;
  align-self: center;
}

.color-btn {
  min-height: 0;
  border-radius: 20px;
  border: 5px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8px;
  box-shadow: 0 5px 18px rgba(0,0,0,0.2);
  transition: transform .18s cubic-bezier(0.34,1.56,0.64,1), box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
.color-btn:hover  { transform: scale(1.05); box-shadow: 0 10px 28px rgba(0,0,0,0.3); }
.color-btn:active { transform: scale(0.93) !important; }
.color-btn .clabel { font-size: .95rem; font-weight: 800; color: rgba(255,255,255,0.95); text-shadow: 0 1px 5px rgba(0,0,0,0.3); }
.color-btn.correct-anim { animation: cfa .45s ease; }
@keyframes cfa { 0%{transform:scale(1);border-color:#fff} 40%{transform:scale(1.1)} 100%{transform:scale(1);border-color:transparent} }
.color-btn.wrong-anim { animation: wsa .4s ease; }
@keyframes wsa { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-9px)} 75%{transform:translateX(9px)} }

/* PROGRESSO */
.round-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rdot {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background .3s, transform .3s;
}
.rdot.done  { background: rgba(255,255,255,0.9); transform: scale(1.2); }
.rdot.wrong { background: rgba(255,80,80,0.8); }

/* BARRA INFERIOR (override) */
.bottom-bar { background: rgba(0,0,0,0.18); }