/* ===========================================================
   PokeToVote — PokeCards styles (mobile-first)
   Loaded alongside site.css; reuses its tokens/fonts.
   =========================================================== */
.pc-hero{text-align:center; padding:40px 0 10px}
.pc-hero h1{font-family:var(--display); font-size:clamp(2.2rem,7vw,3.6rem); line-height:.95}
.pc-hero h1 .tv-to{color:var(--gold400)} .pc-hero h1 .tv-vote{color:var(--red600)}
.pc-hero p{max-width:560px; margin:12px auto; color:var(--gray100)}
.pc-hero .disc{font-size:.82rem; color:var(--gray300); font-style:italic; max-width:560px; margin:8px auto 0}

/* filters */
.pc-filters{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:18px 0 26px}
.pc-filter{font-family:var(--head); font-weight:600; font-size:.86rem; color:var(--gray300);
  background:rgba(255,255,255,.06); border:1.5px solid var(--cardBorder); border-radius:var(--r-pill);
  padding:.45em 1em; cursor:pointer; transition:.12s}
.pc-filter:hover{color:#fff; border-color:var(--gold400)}
.pc-filter.on{background:var(--gold400); color:#3a2400; border-color:transparent}

/* sections */
.pc-section{margin:0 0 36px}
.pc-sec-head{display:flex; align-items:baseline; gap:12px; margin:0 4px 14px; flex-wrap:wrap}
.pc-sec-head h2{font-family:var(--display); font-size:clamp(1.4rem,4vw,2rem); margin:0}
.pc-sec-note{color:var(--gray300); font-size:.9rem}

/* grid + tiles */
.pc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.pc-card{background:var(--card); border:1px solid var(--cardBorder); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .14s, box-shadow .14s, border-color .14s}
.pc-card:hover{transform:translateY(-4px); border-color:var(--gold400); box-shadow:var(--shadow-card)}
.pc-thumb{display:block; width:100%; aspect-ratio:1/1; padding:0; border:0; background:#0b1c34; cursor:pointer; overflow:hidden}
.pc-thumb .pc-svg,.pc-thumb .pc-img{display:block; width:100%; height:100%; object-fit:cover}
.pc-meta{padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.pc-titlerow{display:flex; align-items:center; justify-content:space-between; gap:8px}
.pc-titlerow h3{font-family:var(--head); font-weight:600; font-size:1.02rem; margin:0; color:#fff; line-height:1.15}
.pc-sub{color:var(--gray300); font-size:.82rem}
.pc-badge{font-family:var(--head); font-weight:700; font-size:.68rem; letter-spacing:.4px; padding:.2em .6em; border-radius:var(--r-pill); white-space:nowrap}
.pc-badge.free{background:var(--success); color:#04210f} .pc-badge.premium{background:var(--gold400); color:#3a2400}
.pc-actions{display:flex; gap:6px; margin-top:auto; flex-wrap:wrap}
.pc-act{flex:1; min-width:64px; font-family:var(--head); font-weight:600; font-size:.78rem; color:var(--gray100);
  background:rgba(255,255,255,.06); border:1px solid var(--cardBorder); border-radius:var(--r-sm); padding:.5em .4em; cursor:pointer; transition:.12s}
.pc-act:hover{background:rgba(255,255,255,.12); color:#fff}
.pc-act.primary{background:var(--bg-gold,linear-gradient(180deg,#FBD34D,#F59E0B)); color:#3a2400; border:0}

/* coming soon */
.pc-soon{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px}
.pc-soon-card{background:var(--card); border:1px dashed var(--cardBorder); border-radius:var(--r-lg); padding:22px; position:relative}
.pc-soon-badge{font-family:var(--head); font-weight:700; font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--gray300); background:rgba(255,255,255,.08); padding:.2em .7em; border-radius:var(--r-pill)}
.pc-soon-card h3{font-family:var(--display); font-size:1.3rem; margin:12px 0 4px} .pc-soon-card p{color:var(--gray300); font-size:.9rem; margin:0}

/* modal */
.pc-modal{position:fixed; inset:0; z-index:80; display:none}
.pc-modal.open{display:block}
.pc-modal-bg{position:absolute; inset:0; background:rgba(2,6,23,.78); backdrop-filter:blur(4px)}
.pc-modal-box{position:relative; z-index:1; max-width:880px; margin:4vh auto; background:var(--navy800); border:1px solid var(--cardBorder); border-radius:var(--r-xl);
  padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:22px; max-height:92vh; overflow:auto; box-shadow:var(--shadow-card)}
.pc-close{position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:1.1rem; cursor:pointer}
.pc-close:hover{background:rgba(255,255,255,.22)}
.pc-modal-card{border-radius:var(--r-lg); overflow:hidden; align-self:start; background:#0b1c34}
.pc-modal-card .pc-svg,.pc-modal-card .pc-img{width:100%; display:block}
.pc-modal-info h2{font-family:var(--display); font-size:1.7rem; margin:0 0 8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pc-caption{font-size:1.15rem; color:#fff; font-style:italic; margin:0 0 10px}
.pc-modal-sub{color:var(--gray300); margin:0 0 18px}
.pc-modal-actions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.pc-foot{font-family:var(--head); color:var(--gold400); font-weight:600; margin:0 0 6px}
.pc-disclaimer{font-size:.78rem; color:var(--gray500); margin:0}
@media(max-width:680px){.pc-modal-box{grid-template-columns:1fr; margin:2vh auto}}

/* halls */
.hall-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.hall-card{background:var(--card); border:1px solid var(--cardBorder); border-top:4px solid var(--ac,var(--gold400)); border-radius:var(--r-lg); padding:16px; text-align:center; transition:transform .14s, box-shadow .14s}
.hall-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card)}
.hall-art{height:150px; display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:8px}
.hall-art img{max-height:150px; width:auto; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.hall-emoji{font-size:5rem; line-height:1}
.hall-card.soon{opacity:.78} .hall-card.soon .hall-art{filter:grayscale(.3)}
.hall-soon{position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-family:var(--head); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; color:var(--gray300); background:rgba(2,6,23,.7); padding:.2em .7em; border-radius:var(--r-pill)}
.hall-card h3{font-family:var(--head); font-weight:600; font-size:1.1rem; margin:6px 0 2px; color:#fff}
.hall-sub{color:var(--gold400); font-size:.82rem; font-weight:600} .hall-card.pundit .hall-sub{color:var(--gray300); font-style:italic; font-weight:500}
.hall-race{color:var(--gray300); font-size:.82rem; margin-top:2px}
.hall-desc{color:var(--gray100); font-size:.86rem; margin:8px 0 0}
.hall-cards{margin-top:10px; font-family:var(--head); font-weight:600; font-size:.8rem; color:var(--gray300); background:rgba(255,255,255,.06); border-radius:var(--r-pill); padding:.3em .8em; display:inline-block}

/* toast */
#pc-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); z-index:100;
  background:var(--ink,#0F172A); color:#fff; padding:.7em 1.2em; border-radius:var(--r-pill); font-weight:600; font-size:.9rem;
  opacity:0; pointer-events:none; transition:.2s; box-shadow:0 10px 30px rgba(2,6,23,.4)}
#pc-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* PokeCards promo banner on the homepage */
.pc-promo{background:linear-gradient(135deg, rgba(215,38,56,.18), rgba(247,201,72,.18)); border:1px solid var(--cardBorder); border-radius:var(--r-xl); padding:26px; text-align:center}
.pc-promo h2{font-family:var(--display); font-size:clamp(1.6rem,4.5vw,2.4rem); margin:0 0 6px}
.pc-promo p{color:var(--gray100); max-width:560px; margin:0 auto 16px}