/* The skin round — the second question the two splash modes ask once the
   champion has been named.

   Styled as a card rather than a second guess form, deliberately: it appears
   below an answer box on a board that is already solved, and a row of controls
   identical to the one that just disappeared would read as the game not having
   registered the win. The panel is its own block, with its own heading, so it
   is visibly a new question rather than a repeat of the old one.

   It borrows .splash-card's surface treatment rather than reusing that class,
   because board.css centres its contents and this panel is left-aligned prose
   plus a form row. */

.skin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}

.skin-heading {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.skin-status {
  color: var(--text-muted);
  font-size: var(--text-md);
  margin-bottom: 12px;
  /* Reserved whether or not there is a message, so the form below does not
     jump a line every time the status clears. */
  min-height: 1.4em;
}

.skin-result {
  color: var(--success);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

.skin-form {
  display: flex;
  gap: 8px;
}

/* Matched to #guessInput above it. The two are never on screen at the same
   time — the guess form hides the moment the champion is named — but a player
   moves straight from one to the other, and a differently-sized box would read
   as a different kind of control. */
#skinInput {
  flex: 1;
  min-width: 0; /* a flex item's default min-width:auto refuses to shrink below its content */
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  padding: 11px 14px;
}
#skinInput:focus {
  outline: none;
  border-color: var(--accent);
}
/* The page's focus ring, not the weaker local border above — same reasoning as
   #guessInput, and this ID selector outranks the :where() rule in base.css. */
#skinInput:focus-visible {
  box-shadow: var(--focus-ring);
}

#skinGuessBtn {
  background: var(--success);
  border-color: var(--success);
  color: #05200F;
  font-weight: 700;
}
#skinGuessBtn:hover:not(:disabled) {
  background: var(--success-hover);
  border-color: var(--success-hover);
}

/* Outlined rather than filled, matching #giveUpBtn on the form above: clearly
   the way out without competing with Guess for attention. */
#skinGiveUpBtn {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
#skinGiveUpBtn:hover:not(:disabled) {
  background: var(--danger);
  color: var(--text);
}

/* Stacked on narrow screens. The buttons keep their full width here rather
   than sitting side by side — at this width a two-up row leaves each of them
   too narrow to read at the uppercase tracking they carry. */
@media (max-width: 480px) {
  .skin-form {
    flex-direction: column;
  }
}