/* Game cards (src/comps/Chat/GameCard.jsx): one game per card, with a band of
   art, its name and blurb, live chips and an action. Shared by the chat's Play
   picker (index.html) and the games hub (games.html), so it is a stylesheet of
   its own rather than part of theme.css, which the hub doesn't load. */

/* A card is one big button: art, words, chips, then its action at the foot. */
.gameCard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2c2c31;
  border-radius: 10px;
  background: #222226;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.gameCard:hover {
  transform: translateY(-2px);
  border-color: #3d3d44;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.gameCard:focus-visible { outline: 2px solid #8cf; outline-offset: 2px; }

/* something on: a green ring, the thing that says "people are in here" */
.gameCardLive { border-color: #2f7d4f; box-shadow: 0 0 0 1px #2f7d4f inset; }
.gameCardLive:hover { border-color: #3fa066; }

.gameCardArt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;
  flex: none;
  overflow: hidden;
}

/* big, faint and slightly turned: placeholder art until there are images */
.gameCardGlyph {
  font-size: 54px;
  color: rgba(255, 255, 255, 0.88);
  transform: rotate(-8deg);
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.gameCard:hover .gameCardGlyph { transform: rotate(-3deg) scale(1.08); }

.gameCardLiveDot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25), 0 0 8px #4ade80;
  animation: gameCardPulse 1.6s ease-in-out infinite;
}

@keyframes gameCardPulse {
  50% { opacity: 0.45; }
}

.gameCardBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 10px 11px 6px;
  min-width: 0;
}

.gameCardName { color: #f2f2f2; font-size: 14.5px; font-weight: 600; }

.gameCardBlurb {
  color: #8d8d95;
  font-size: 11.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.gameCardChips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }

.gameCardChip {
  padding: 1px 7px;
  border-radius: 999px;
  background: #2c2c32;
  color: #c9c9cf;
  font-size: 11px;
  white-space: nowrap;
}
.gameCardLive .gameCardChip:first-child { background: #1f3a2a; color: #7ee2a5; }

.gameCardAction {
  margin: 4px 11px 11px;
  padding: 6px 0;
  border-radius: 7px;
  background: #2f2f36;
  color: #eee;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.gameCard:hover .gameCardAction { background: #39f; color: #fff; }
.gameCardLive .gameCardAction { background: #2f7d4f; color: #fff; }

/* The Whiteboard: the same parts in a row under the games. */
.gameCardWide {
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
.gameCardWide .gameCardArt { width: 74px; height: auto; align-self: stretch; }
.gameCardWide .gameCardGlyph { font-size: 34px; }
.gameCardWide .gameCardBody { padding: 10px 12px; }
.gameCardWide .gameCardBlurb { -webkit-line-clamp: 1; line-clamp: 1; }
.gameCardWide .gameCardAction { flex: none; margin: 0 12px; padding: 6px 14px; }


@media (prefers-reduced-motion: reduce) {
  .gameCardLiveDot { animation: none; }
  .gameCard, .gameCardGlyph { transition: none; }
}

/* Already open (the games hub, where several can be up): a blue ring, and the
   action says so. */
.gameCardOpen { border-color: #2a5a8c; box-shadow: 0 0 0 1px #2a5a8c inset; }
.gameCardOpen .gameCardAction { background: #1d3b5c; color: #9cd0ff; }

/* A plugin's art: its author's icon, or its letter, on its own gradient. */
.gameCardImage {
  width: 56px;
  height: 56px;
  border-radius: 22%;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.gameCardLetter {
  color: rgba(255, 255, 255, 0.9);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.gameCardWide .gameCardImage { width: 40px; height: 40px; }
.gameCardWide .gameCardLetter { font-size: 30px; }