/* platform/cards.css — カード・ゲーム一覧・ボタン (旧 core.css から分割・見た目の変更なし) */

/* ─── Cards ─── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.card + .card { margin-top: 10px; }

/* ─── Game Grid ─── */
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 0;
}
.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.game-card:active { transform: scale(0.96); }
.game-card:hover { border-color: var(--border2); }
.game-card-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  position: relative;
}
.game-card-thumb.bomba       { background: linear-gradient(135deg, #1a0a00, #3d1a00); }
.game-card-thumb.quiz        { background: linear-gradient(135deg, #001a0e, #003322); }
.game-card-thumb.life        { background: linear-gradient(135deg, #0a001a, #1a0040); }
.game-card-thumb.puzzle      { background: linear-gradient(135deg, #001a1a, #003344); }
.game-card-thumb.sultan      { background: linear-gradient(135deg, #0a0800, #2a1f00); }
.game-card-thumb.ritmouz     { background: linear-gradient(135deg, #1a0014, #3d0030); }
.game-card-thumb.tanovar     { background: linear-gradient(135deg, #1a0a00, #3d2200); }
.game-card-thumb.qovunim     { background: linear-gradient(135deg, #001a00, #003300); }
.game-card-thumb.oshustasi   { background: linear-gradient(135deg, #1a0800, #3d1800); }
.game-card-thumb.qahramonlar { background: linear-gradient(135deg, #1a0000, #3d0000); }
.game-card-thumb.generic      { background: linear-gradient(135deg, #0a0a1a, #1c1c40); }
.game-card-thumb.choyxona    { background: linear-gradient(135deg, #001400, #002800); }
.game-card-info { padding: 10px 12px; }
.game-card-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.game-card-desc  { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-card-no { color: var(--text-muted); font-weight: 600; font-size: 0.85em; margin-right: 2px; }
.game-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
}

/* ─── Quick play(お気に入り・最近遊んだ) ─── */
.quick-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
.quick-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 16px; color: var(--text-primary); font: inherit; font-weight: 700; font-size: 0.85rem;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.quick-chip:active { transform: scale(0.96); }
.quick-chip-emoji { font-size: 1.3rem; }
.fav-btn {
  position: absolute; top: 6px; left: 6px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.45); color: #fff; font-size: 1.1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fav-btn.on { color: #ffc83d; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  width: 100%;
}
.btn:active { opacity: 0.8; transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-secondary { background: var(--bg-card2); color: var(--text-primary); border: 1px solid var(--border2); }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-teal    { background: var(--accent2); color: var(--on-accent); }
.btn-ghost   { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn-sm { padding: 8px 14px; font-size: 0.8rem; width: auto; }