/* AIPredCards — TikTok-style swipeable prediction-card feed. Theme vars only. */

.cards-filters{
  display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem;
  position:sticky;top:var(--header-h, 62px);z-index:10;padding:.4rem 0;background:var(--bg)
}
.cardchip{cursor:pointer;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font:inherit;font-size:.82rem;font-weight:600;
  padding:.32rem .7rem;border-radius:999px;transition:.12s}
.cardchip:hover{border-color:var(--brand);color:var(--text)}
.cardchip.active{background:rgba(22,199,132,.14);border-color:var(--brand);color:var(--brand)}

/* Feed: vertical scroll-snap stack, one card centred per screen on mobile. */
.cards-feed{
  display:flex;flex-direction:column;gap:1rem;
  max-height:calc(100vh - 150px);overflow-y:auto;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
  padding:.25rem;margin:0 -.25rem;outline:none;scrollbar-width:thin
}
.cards-slide{scroll-snap-align:center;scroll-snap-stop:always;display:flex;justify-content:center}
.cards-slide.is-hidden{display:none}

.predcard{
  width:100%;max-width:440px;background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:18px;padding:1.15rem 1.15rem 1rem;
  display:flex;flex-direction:column;gap:.7rem;
  box-shadow:0 6px 24px rgba(0,0,0,.28)
}

.pc-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.pc-league{font-weight:700;color:var(--text);text-transform:none;letter-spacing:0;font-size:.82rem}

.pc-teams{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.2rem 0}
.pc-team{display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:1;min-width:0;text-align:center}
.pc-crest{width:48px;height:48px;object-fit:contain}
.pc-crest-ph{font-size:34px;line-height:48px;height:48px}
.pc-name{font-weight:700;font-size:.95rem;line-height:1.2}
.pc-v{color:var(--muted);font-weight:400;font-size:.8rem;flex:0 0 auto}

.pc-pick{display:flex;align-items:center;gap:.55rem;background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem}
.pc-pick-lbl{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.pc-pick-big{font-size:1.05rem;font-weight:800;padding:.22rem .55rem;border-radius:8px}
.pc-pick-prob{margin-left:auto;font-size:1.4rem;font-weight:800;color:var(--brand)}

.pc-conf{display:flex;flex-direction:column;gap:.3rem}
.pc-conf-track{height:7px;background:var(--bg);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.pc-conf-fill{display:block;height:100%;background:linear-gradient(90deg,var(--brand-2),var(--brand))}
.pc-conf-num{font-size:.78rem;font-weight:600}

.pc-value{display:flex;align-items:center;gap:.5rem;font-size:.82rem;
  background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.35);
  border-radius:10px;padding:.45rem .65rem}
.pc-value-badge{font-weight:800;color:var(--warn);letter-spacing:.04em;font-size:.74rem}
.pc-value-txt{color:var(--text)}

.pc-why{margin:0;font-size:.86rem;color:var(--text);line-height:1.45}
.pc-why-lbl{display:inline-block;color:var(--brand);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;margin-right:.4rem}

.pc-cred{font-size:.73rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:.55rem}
.pc-cred a{color:var(--muted);text-decoration:underline}
.pc-cred a:hover{color:var(--brand)}

.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.pc-brand{display:inline-flex;align-items:center;gap:.3rem;font-weight:800;font-size:.82rem;color:var(--brand);opacity:.85}
.pc-ball{font-size:.95rem}
.pc-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.pc-btn{cursor:pointer;border:1px solid var(--line);background:var(--surface);
  color:var(--text);font:inherit;font-size:.8rem;font-weight:600;
  padding:.34rem .6rem;border-radius:8px;text-decoration:none;transition:.12s}
.pc-btn:hover{border-color:var(--brand)}
.pc-save.is-saved{background:rgba(22,199,132,.16);border-color:var(--brand);color:var(--brand)}
.pc-open{color:var(--brand)}

.cards-end{scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;
  gap:.7rem;padding:2rem 1rem;text-align:center}
.cards-hint{text-align:center;margin:.8rem 0 0}

@media (max-width:560px){
  .cards-feed{max-height:calc(100vh - 130px)}
  .predcard{max-width:none}
  .pc-crest{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){.cards-feed{scroll-behavior:auto}}

/* === Beat the AI game === */
.pc-game{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.6rem}
.pc-game-lbl{font-size:.8rem;color:var(--muted);margin-bottom:.4rem}
.pc-game-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem}
.pc-call{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem .3rem;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);color:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.pc-call:hover{border-color:var(--brand)}
.pc-call.is-ai{border-color:rgba(22,199,132,.45)}
.pc-call.is-chosen{border-color:var(--brand);background:rgba(22,199,132,.16);font-weight:700}
.pc-call-out{font-size:.82rem}
.pc-call-ai{font-size:.58rem;color:var(--brand);font-weight:700}
.pc-call-pts{font-size:.7rem;color:var(--muted)}
.pc-game-state{margin-top:.45rem;font-size:.78rem}
.pc-game-state.is-back{color:var(--brand)}
.pc-game-state.is-counter{color:#f4b740}
/* You-vs-AI scoreboard */
.game-scoreboard{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:.4rem auto 1rem;max-width:680px;padding:.7rem;border:1px solid var(--brand);border-radius:12px;background:linear-gradient(180deg,rgba(22,199,132,.1),rgba(255,255,255,.02))}
.gs-cell{display:flex;flex-direction:column;align-items:center;min-width:70px}
.gs-cell b{font-size:1.15rem}
.gs-cell span{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}