/* Comparison cell colors */
.cell-equal        { background-color: #6aaa64; color: white; }
.cell-close-to     { background-color: #c9b458; color: white; }
.cell-different    { background-color: #787c7e; color: white; }
.cell-lower-than   { background-color: #787c7e; color: white; }
.cell-greater-than { background-color: #787c7e; color: white; }

/* Guess form */
.guess-form { margin: 1rem 0; gap: 0.5rem; align-items: center; display: flex; }
.guess-form input { flex: 1; padding: 0.5rem 0.5rem 0.5rem 4rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; width: 300px; }
.guess-form button { padding: 0.5rem 1rem; font-size: 1rem; background: #6aaa64; color: white; border: none; border-radius: 4px; cursor: pointer; }
.guess-form button:disabled { background: #787c7e; cursor: not-allowed; }

/* Counter */
.guess-counter { margin: 0.5rem 0; font-size: 0.9rem; color: #555; }

/* Game banner (win/loss) */
.banner-win { background: #6aaa64; color: white; padding: 1rem; border-radius: 8px; text-align: center; margin: 1rem 0; font-weight: bold; }
.banner-loss { background: #787c7e; color: white; padding: 1rem; border-radius: 8px; text-align: center; margin: 1rem 0; }


/* Guess submit button -- matches win banner green */
.guess-btn { background-color: #6aaa64; color: white; border-color: transparent; }
.guess-btn:hover { background-color: #5a9a54; border-color: transparent; }
.guess-btn:disabled { background-color: #787c7e; border-color: transparent; cursor: not-allowed; }

/* Share/copy button inside game banner */
.share-btn {
    margin-top: 0.5rem;
    background: rgba(255,255,255,0.25);
    color: inherit;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 4px;
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.share-btn:hover { background: rgba(255,255,255,0.4); }

/* Mobile: show game content above sidebar (column-reverse) */
@media screen and (max-width: 768px) {
  .game-columns {
    flex-direction: column-reverse;
  }
}