/* InputCard — поле ввода (input + 2 кнопки) с blur-подложкой. */

/* Лампочка-hint в cooldown'е (30 сек в публичных/стрим/системных комнатах): потухшая,
   некликаемая. Класс ставит InputCard.setLeftCooldown(true) из IndexPage после клика. */
.input-card button.ghost.hint-cooling {
  opacity: 0.35;
  cursor: not-allowed;
}

.input-card {
  background: var(--panel);
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  box-shadow: var(--shadow-card);
  position: sticky; top: 8px; z-index: var(--z-sticky);
}

/* На /create карточка зелёная — единый «creation»-стиль с share/room-card. */
body.create-page .input-card {
  background-color: var(--panel-solid);
  background-image: var(--grad-success);
  border-color: rgba(var(--success-rgb), 0.35);
}

.input-row { display: flex; gap: 8px; align-items: stretch; }
.input-row > button {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  min-width: 52px; min-height: 52px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
}

/* Эмодзи 🎯/🎲 в кнопке создания игры — то же оптическое выравнивание, что и
   на win-actions: 🎲 чуть выше центра, 🎯 — чуть выше и правее. */
.input-row > button[data-emoji="🎲"] { padding: 0 0 2px 0; }
.input-row > button[data-emoji="🎯"] { padding: 0 0 4px 4px; }

.input-card input[type="search"],
#word, #nick-input, #settings-name-input {
  flex: 1; min-width: 0;
  padding: 14px 16px;
  font-size: var(--fs-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  transition: border-color var(--t-quick);
}
.input-card input[type="search"]:focus,
#word:focus, #nick-input:focus, #settings-name-input:focus {
  background: var(--surface-strong); border-color: var(--accent);
}

/* Спиннер на submit: появляется при > 300мс задержке. */
button.submitting { position: relative; color: transparent !important; opacity: 1; }
button.submitting::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vec-spin 0.7s linear infinite;
}

.msg { margin-top: 10px; font-size: 13px; color: var(--far); }

@media (max-width: 480px) {
  .input-row { gap: 6px; }
  .input-row > button {
    width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
    font-size: 20px;
  }
  .input-card input[type="search"],
  #word, #nick-input, #settings-name-input { font-size: 15px; padding: 10px 12px; }
  .input-card { padding: 10px; }
}