/* Shared game card (.tb-card) — All Games grid and the home rails. Moved verbatim from games.html.
   Hover screenshot preview is driven by initGamesHoverPreview() in app.js. */
/* Game cards (games page grid view) */
.tb-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #151518; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; transition: transform .2s ease, border-color .2s, box-shadow .2s, background .2s; }
.tb-card:hover { transform: translateY(-3px); border-color: rgba(243,145,37,.4); background: #1A1A1E; box-shadow: 0 18px 40px -18px rgba(243,145,37,.35); }
.tb-card-cover { position: relative; display: block; aspect-ratio: 460 / 215; background: #0e0e11; overflow: hidden; }
.tb-card-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.tb-card:hover .tb-card-cover > img { transform: scale(1.02); }
.tb-card-badges { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.tb-card-disc { background: #E11D48; color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 13px; line-height: 1; padding: 5px 8px; border-radius: 8px; box-shadow: 0 4px 12px rgba(225,29,72,.35); }
.tb-card-tag { display: inline-flex; align-items: center; gap: 5px; background: rgba(11,11,13,.8); backdrop-filter: blur(6px); border: 1px solid rgba(243,145,37,.55); color: #F39125; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: .04em; }
.tb-card-wish { position: absolute; top: 4px; inset-inline-end: 4px; z-index: 4; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: #fff; }
.tb-card-wish > b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(11,11,13,.65); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); transition: background .15s, transform .15s; }
.tb-card-wish:hover > b { background: rgba(11,11,13,.9); transform: scale(1.06); }
.tb-card-wish.wishlist-btn, .tb-card-wish.wishlist-btn.active { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.tb-card-wish.wishlist-btn:hover { transform: none; }
.tb-card-wish.active > b { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.55); }
.tb-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tb-card-title { font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.25; color: #fff; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.tb-card-title a:hover { color: #F39125; }
.tb-card-ends { font-size: 12px; color: #fda4af; display: flex; align-items: center; gap: 5px; }
.tb-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.tb-card-price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.tb-card-price .prefix { font-size: 11px; color: #9CA3AF; font-weight: 600; }
.tb-card-price .was { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: #64748B; text-decoration: line-through; white-space: nowrap; }
.tb-card-price .now { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 20px; color: #2BD97C; white-space: nowrap; }
.tb-card-price .now small { font-size: 12px; font-weight: 600; color: #9CA3AF; margin-inline-start: 4px; }
.tb-card-add { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 16px; border-radius: 12px; background: #F39125; color: #000; font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 6px 18px -6px rgba(243,145,37,.6); transition: background .15s, transform .1s; }
.tb-card-add:hover { background: #FF9A28; }
.tb-card-add:active { background: #D97812; transform: scale(.96); }
@media (max-width: 560px) {
    .tb-card-add { padding: 0; width: 44px; } .tb-card-add .lbl { display: none; }
    .tb-card-title { font-size: 14px; } .tb-card-price .now { font-size: 16px; } .tb-card-body { padding: 10px 10px 12px; }
    .tb-card-tag { font-size: 10px; padding: 2px 6px; }
}

/* 3-up desktop grid: bigger cards get slightly larger type */
@media (min-width: 1280px) {
    .tb-card-body { padding: 14px 16px 16px; }
    .tb-card-title { font-size: 18px; }
    .tb-card-price .now { font-size: 22px; }
}

/* Hover screenshot preview (mouse users only; injected by app.js) */
.tb-card-shots { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.tb-card-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.tb-card-shots img.on { opacity: 1; }
.tb-card-segs { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.tb-card-segs i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; }
.tb-card-segs i b { display: block; height: 100%; width: 0; background: #fff; }
.tb-card-segs i.done b { width: 100%; }
.tb-card-segs i.run b { width: 100%; transition: width 1500ms linear; }
.tb-card.previewing .tb-card-shots, .tb-card.previewing .tb-card-segs { opacity: 1; }
.tb-card.previewing .tb-card-cover > img { transform: none; }

@media (prefers-reduced-motion: reduce) { .tb-card, .tb-card-cover > img, .tb-card-shots, .tb-card-shots img { transition: none !important; } .tb-card:hover { transform: none; } }