/* ═══════════════════════════════════════════════════════════════════════
   Pokébot components — the slab, badges, tiles, set cards, sparklines,
   tabs and tables shared by the home page, the card database, profiles
   and the dashboard. Loaded after site.css on every page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Badges: the truths on a card ─────────────────────────────────────── */
.bdg { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:8px; font-size:.68rem; font-weight:800; letter-spacing:.04em; line-height:1.5; white-space:nowrap; background:rgba(6,3,13,.72); border:1px solid var(--line-2); color:var(--text); backdrop-filter:blur(4px); }
.b-grade { color:var(--gold); border-color:rgba(255,201,77,.5); }
.b-grade.nine { color:var(--green); border-color:rgba(94,255,166,.5); }
.b-grade.nine5 { color:#d9b8ff; border-color:rgba(179,136,255,.6); }
.b-grade.ten { background:linear-gradient(135deg, #ffc94d, #ff9f1c); color:#2b1600; border-color:transparent; box-shadow:0 0 14px rgba(255,201,77,.55); }
.b-grade.black { background:#0b0b0d; color:#f4f4f4; border-color:#3a3a3a; box-shadow:0 0 14px rgba(255,255,255,.18); }
.b-first { color:#ffd98a; border-color:rgba(255,201,77,.45); background:rgba(80,50,0,.7); }
.b-wf { background:linear-gradient(135deg, #ffe08a, #ffb020); color:#2b1600; border-color:transparent; box-shadow:0 0 12px rgba(255,176,32,.5); }
.b-shiny { color:#fff; border-color:transparent; background:linear-gradient(120deg, #ff5ea2, #a878ff, #3ee0d0); background-size:200% 100%; animation:foilidle 4s ease-in-out infinite alternate; }
.b-lab { color:var(--cyan); border-color:rgba(62,224,208,.4); }
.b-lock { color:var(--muted); }

/* ── Tile: picture + name + meta, in any grid ─────────────────────────── */
.tile { position:relative; display:block; text-decoration:none; color:inherit; }
.tile .holo-card { transition:transform .35s var(--ease), box-shadow .35s; }
a.tile:hover .holo-card { transform:translateY(-4px); box-shadow:0 0 0 1px var(--rc, var(--line-2)), 0 22px 50px color-mix(in srgb, var(--rc, #7c3aed) 35%, transparent); }
.tile-badges { position:absolute; top:6px; left:6px; right:6px; z-index:2; display:flex; flex-wrap:wrap; gap:4px; pointer-events:none; }
.tile-name { margin-top:9px; font-weight:700; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile-meta { display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile-foot { font-size:.7rem; color:var(--dim); margin-top:3px; font-variant-numeric:tabular-nums; }
.tile .n { color:var(--dim); font-family:var(--font-m); font-size:.7rem; margin-right:4px; }
.tile.dim .holo-card { filter:grayscale(1) brightness(.45); }
.tile.dim .tile-name, .tile.dim .tile-meta { color:var(--dim); }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px 14px; }
.tiles.lg { grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); }
.tiles.sm { grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:12px 10px; }

/* ── Shiny recolours (the bot re-tones the whole card; here a filter does) ─ */
.holo-card.shiny-neon img { filter:saturate(2.4) hue-rotate(300deg) contrast(1.15); }
.holo-card.shiny-ghost img { filter:saturate(.3) brightness(1.35) contrast(.9) hue-rotate(160deg); }
.holo-card.shiny-midnight img { filter:hue-rotate(220deg) saturate(1.4) brightness(.8); }
.holo-card.shiny-chrome img { filter:grayscale(1) contrast(1.6) brightness(1.15); }
.holo-card.shiny-noir img { filter:grayscale(1) contrast(1.3); }
.holo-card.shiny-negative img { filter:invert(1) hue-rotate(180deg); }
.holo-card.shiny-gold img { filter:sepia(1) saturate(3) hue-rotate(5deg) brightness(1.05); }
.holo-card.shiny-void img { filter:brightness(.25) contrast(1.8) saturate(0); }
.holo-card.shiny-void::after { content:''; position:absolute; inset:0; mix-blend-mode:screen; background:radial-gradient(circle at 50% 45%, rgba(168,120,255,.55), transparent 60%); pointer-events:none; }
.holo-card.shiny-pastel img { filter:saturate(.7) brightness(1.25) hue-rotate(20deg); }
.holo-card.shiny-sepia img { filter:sepia(.9) contrast(1.05); }
.holo-card[class*="shiny-"] { box-shadow:0 0 0 1.5px rgba(255,255,255,.55), 0 0 30px rgba(168,120,255,.6), 0 24px 60px rgba(0,0,0,.6); }
.sparkles { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent), radial-gradient(2px 2px at 80% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 35% 80%, #fff, transparent), radial-gradient(1px 1px at 55% 50%, #fff, transparent); animation:twinkle 2.4s ease-in-out infinite alternate; mix-blend-mode:screen; }
@keyframes twinkle { from { opacity:.35; transform:scale(1); } to { opacity:1; transform:scale(1.03); } }

/* ── The slab ─────────────────────────────────────────────────────────── */
.slab { --case:rgba(255,255,255,.14); --label:#f6f2ff; position:relative; width:100%; padding:10px 10px 12px; border-radius:16px; background:linear-gradient(160deg, color-mix(in srgb, var(--case) 55%, #1a1230), color-mix(in srgb, var(--case) 35%, #0a0614)); box-shadow:0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.6); }
.slab::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 60%); }
.slab.black { --case:#111114; }
.slab-label { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:0 10px; align-items:center; padding:7px 10px 6px; margin-bottom:8px; border-radius:8px; background:var(--label); color:#191325; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.sl-co { grid-column:1; font-family:var(--font-d); font-weight:800; font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:#5b21b6; }
.sl-name { grid-column:1; font-weight:800; font-size:.8rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-name span { font-weight:600; font-size:.66rem; color:#5f5776; }
.sl-first { grid-column:1; font-size:.56rem; font-weight:800; letter-spacing:.08em; color:#8a5a00; }
.sl-grade { grid-column:2; grid-row:1 / span 3; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; padding-left:8px; border-left:1px solid rgba(0,0,0,.1); }
.sl-grade b { font-family:var(--font-d); font-weight:800; font-size:1.55rem; letter-spacing:-.04em; }
.sl-grade i { font-style:normal; font-size:.5rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#5b21b6; white-space:nowrap; }
.slab.black .sl-grade b { color:#000; } .slab.black .sl-grade i { color:#000; }
.sl-subs { grid-column:1 / -1; display:flex; gap:6px; margin-top:5px; font-family:var(--font-m); font-size:.56rem; font-weight:700; color:#3b3352; }
.sl-subs span { padding:1px 5px; border-radius:4px; background:rgba(91,33,182,.08); }
.sl-cert { grid-column:1 / -1; margin-top:4px; font-family:var(--font-m); font-size:.54rem; letter-spacing:.06em; color:#7a7192; }
.slab .holo-card { border-radius:3% / 2.2%; box-shadow:0 8px 20px rgba(0,0,0,.5); }
.slab.sm { padding:6px 6px 8px; border-radius:11px; }
.slab.sm .slab-label { padding:5px 7px 4px; margin-bottom:5px; }
.slab.sm .sl-co { font-size:.42rem; } .slab.sm .sl-name { font-size:.66rem; } .slab.sm .sl-name span { font-size:.56rem; } .slab.sm .sl-grade b { font-size:1.2rem; } .slab.sm .sl-grade i { font-size:.42rem; } .slab.sm .sl-subs { font-size:.48rem; gap:4px; } .slab.sm .sl-cert { font-size:.46rem; }
.slabs { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:16px; }
.slabs a { text-decoration:none; color:inherit; display:block; transition:transform .3s var(--ease); }
.slabs a:hover { transform:translateY(-4px); }
.slab-cap { margin-top:8px; font-size:.76rem; color:var(--muted); text-align:center; }

/* ── Set cards (database index, home teaser) ──────────────────────────── */
.setgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.setcard { display:flex; flex-direction:column; text-decoration:none; color:inherit; overflow:hidden; }
.sc-art { position:relative; height:150px; display:flex; align-items:flex-end; justify-content:center; padding:0 12px; overflow:hidden; background:radial-gradient(90% 90% at 50% 100%, rgba(124,58,237,.35), transparent 70%); }
.sc-art img { width:38%; aspect-ratio:600/825; object-fit:cover; border-radius:6px; box-shadow:0 14px 30px rgba(0,0,0,.6); transform:translateY(18%) rotate(-8deg); transition:transform .4s var(--ease); }
.sc-art img:nth-child(2) { transform:translateY(8%); z-index:2; margin:0 -8%; } .sc-art img:nth-child(3) { transform:translateY(18%) rotate(8deg); }
.setcard:hover .sc-art img { transform:translateY(6%) rotate(-10deg); } .setcard:hover .sc-art img:nth-child(2) { transform:translateY(-4%); } .setcard:hover .sc-art img:nth-child(3) { transform:translateY(6%) rotate(10deg); }
.sc-body { position:relative; padding:14px 16px 16px; border-top:1px solid var(--line); }
.sc-name { font-family:var(--font-d); font-weight:700; font-size:.98rem; }
.sc-meta { font-size:.78rem; color:var(--muted); margin-top:3px; }
.sc-meta .new { color:var(--gold); }
.sc-pop { font-size:.74rem; color:var(--dim); margin-top:6px; font-variant-numeric:tabular-nums; }
.sc-bar { height:5px; border-radius:5px; background:rgba(255,255,255,.06); margin-top:10px; overflow:hidden; }
.sc-bar i { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg, var(--violet), var(--pink)); transition:transform .8s var(--ease); }

/* ── Sparkline, countdown, stat tiles ─────────────────────────────────── */
.spark { height:26px; margin:6px auto 0; width:120px; }
.spark svg { width:100%; height:100%; overflow:visible; }
.sp-line { fill:none; stroke:var(--cyan); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.sp-fill { fill:rgba(62,224,208,.15); }
.countdown { display:flex; gap:10px; }
.countdown div { min-width:74px; padding:12px 8px; border-radius:14px; text-align:center; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.countdown b { display:block; font-family:var(--font-d); font-weight:800; font-size:1.7rem; letter-spacing:-.03em; color:var(--gold); line-height:1; font-variant-numeric:tabular-nums; }
.countdown span { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; }
.kpi { padding:14px 16px 12px; }
.kpi .k { font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.kpi .v { font-family:var(--font-d); font-weight:700; font-size:1.45rem; color:var(--gold); margin-top:4px; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi .s { font-size:.72rem; color:var(--dim); margin-top:3px; min-height:1.1em; }

/* ── Tabs, tables, filters ────────────────────────────────────────────── */
.tabs { display:flex; flex-wrap:wrap; gap:8px; }
.tabs button, .chips button, .chips a { padding:8px 14px; border-radius:24px; font-size:.82rem; font-weight:600; color:var(--muted); background:rgba(255,255,255,.04); border:1px solid var(--line); cursor:pointer; transition:.15s; text-decoration:none; }
.tabs button:hover, .chips button:hover, .chips a:hover { color:var(--text); border-color:var(--line-2); }
.tabs button.active, .chips button.active, .chips a.active { color:#fff; background:linear-gradient(135deg, var(--violet), var(--violet-2)); border-color:transparent; box-shadow:0 8px 20px rgba(124,58,237,.35); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips .rdot { margin-right:4px; }
.table { width:100%; border-collapse:collapse; font-size:.9rem; }
.table th { text-align:left; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); font-weight:700; }
.table td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr.me td { background:rgba(168,120,255,.1); }
.table .rank { font-family:var(--font-d); font-weight:800; color:var(--dim); width:52px; }
.table tr:nth-child(1) .rank { color:var(--gold); } .table tr:nth-child(2) .rank { color:#cfd6e6; } .table tr:nth-child(3) .rank { color:#d59a5f; }
.table .who a { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; font-weight:700; }
.table .who span { display:flex; flex-direction:column; min-width:0; }
.table .who small.sub { color:var(--dim); font-size:.78rem; font-weight:400; }
.who-av { width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; background:var(--bg3); box-shadow:0 0 0 1px var(--line-2); }
.table .who a:hover { color:var(--violet); }
.table .val { font-family:var(--font-d); font-weight:700; color:var(--gold); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.table .sub { color:var(--dim); font-size:.78rem; }
.center { text-align:center; margin-top:24px; }
.hbar { display:flex; height:12px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.05); }
.hbar i { display:block; height:100%; background:var(--rc, var(--violet)); box-shadow:inset 0 0 12px rgba(255,255,255,.15); flex:0 0 var(--w, 0%); }
.legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; }
.legend span { display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--muted); }
.legend b { color:var(--text); font-weight:600; }
.empty { grid-column:1 / -1; text-align:center; padding:56px 24px; color:var(--muted); }
.empty .big { font-size:2.4rem; margin-bottom:10px; }
.empty h3 { font-family:var(--font-d); color:var(--text); margin-bottom:6px; }
.empty .btn { margin-top:16px; }
.pagination { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; padding:28px 0 8px; }
.pg { min-width:40px; height:40px; padding:0 13px; border-radius:11px; font-size:.86rem; font-weight:700; background:rgba(255,255,255,.04); color:var(--muted); border:1px solid var(--line); cursor:pointer; transition:.15s; }
.pg:hover:not(:disabled) { color:var(--text); border-color:var(--violet); }
.pg.active { background:linear-gradient(135deg, var(--violet), var(--violet-2)); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(124,58,237,.4); }
.pg:disabled { opacity:.4; cursor:default; } .pg.dots { border:none; background:none; cursor:default; }
.field, .toolbar select, .toolbar input, .tb-btn { height:38px; padding:0 12px; border-radius:10px; font-size:.86rem; font-family:var(--font-b); background:rgba(255,255,255,.04); color:var(--text); border:1px solid var(--line-2); outline:none; transition:.15s; }
.toolbar select, select.field { appearance:none; -webkit-appearance:none; padding-right:28px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a99bcf' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; cursor:pointer; }
select option { background:var(--bg2); }
.field:focus, .toolbar select:focus, .toolbar input:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(168,120,255,.2); }
.tb-btn { cursor:pointer; color:var(--muted); } .tb-btn:hover { color:var(--text); border-color:var(--violet); }
.page-head { padding:52px 0 22px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.page-head h1 { font-family:var(--font-d); font-size:clamp(1.9rem, 4.6vw, 3rem); letter-spacing:-.03em; line-height:1.05; margin:8px 0 10px; }
.page-head .lead { font-size:1rem; }
.skel-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px 14px; }
.skel-tiles div { aspect-ratio:600/825; border-radius:12px; }

@media (max-width:1060px) { .setgrid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px) { .setgrid { grid-template-columns:1fr; } .countdown div { min-width:0; flex:1; padding:10px 4px; } .countdown b { font-size:1.3rem; } .tiles { grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)); gap:12px 10px; } .slabs { grid-template-columns:repeat(2, 1fr); gap:10px; } }