/* ===== KaledKards theme (luxury) ===== */
:root{
  --bg:#0a0a0b;
  --bg-2:#151517;
  --card:#161618;
  --card-hover:#1f1f22;
  --border:#2a2a2e;
  --border-soft:#232326;
  --text:#f0f0f2;
  --muted:#9a9aa2;
  --accent:#c8ccd4;      /* silver */
  --accent-ink:#12161d;  /* dark text on silver */
  --accent-2:#6b7688;
  --accent-grad:linear-gradient(145deg,#f0f2f5 0%,#c8ccd4 46%,#9aa0ac 100%);
  --silver-text:linear-gradient(180deg,#ffffff 0%,#c9ced7 55%,#aab0bc 100%);
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 20px 50px rgba(0,0,0,.5);
  --font-head:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 50% -8%, #1c1a1a 0%, rgba(28,26,26,0) 62%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:16px;padding:16px 28px;
  background:rgba(10,10,11,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:6px;cursor:pointer}
.brand-name{
  font-family:var(--font-head);font-size:24px;font-weight:800;letter-spacing:.2px;
  white-space:nowrap;
  background:var(--silver-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#fff;
}
.brand-accent{-webkit-text-fill-color:transparent}
.top-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center;
  background:rgba(255,255,255,.03);border:1px solid var(--border-soft);border-radius:999px;padding:5px}
.top-nav a{
  color:var(--muted);font-size:13.5px;font-weight:600;letter-spacing:.3px;
  padding:8px 20px;border-radius:999px;transition:.18s;white-space:nowrap;
}
.top-nav a:hover{color:#fff;background:var(--card-hover)}
.top-nav a.active{color:var(--accent-ink);background:var(--accent-grad);
  box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.header-actions{display:flex;align-items:center;gap:14px}
.ig-link{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);
  width:40px;height:40px;border-radius:999px;border:1px solid var(--border);background:var(--bg-2);transition:.16s}
.ig-link:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.search-box{
  background:var(--bg-2);border:1px solid var(--border);color:var(--text);
  padding:10px 16px;border-radius:999px;min-width:220px;outline:none;font-size:14px;transition:.16s;
}
.search-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,204,212,.12)}
.btn{
  background:var(--accent-grad);color:var(--accent-ink);border:none;padding:10px 18px;
  border-radius:999px;font-weight:700;cursor:pointer;font-size:14px;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6);transition:.16s;
}
.btn.secondary{background:var(--bg-2);color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}

/* Layout */
.wrap{max-width:1200px;margin:0 auto;padding:28px}

/* Home banner (full-width; drop in images/banner.png) */
.banner-wrap{
  width:100%;margin:2px 0 28px;border-radius:16px;overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow);
}
.banner-img{width:100%;height:auto;max-height:420px;object-fit:cover;display:block}
.banner-placeholder{
  width:100%;min-height:240px;display:flex;align-items:center;justify-content:center;
  text-align:center;background:
    repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 14px,#101011 14px,#101011 28px);
  border:1.5px dashed var(--border);border-radius:16px;
}
.bp-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:6px}
.bp-sub{color:var(--muted);font-size:14px}
.bp-sub code{background:var(--card);padding:2px 7px;border-radius:6px;border:1px solid var(--border)}
.page-title{display:flex;align-items:baseline;gap:16px;margin:10px 0 26px;flex-wrap:wrap}
.page-title h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.2px}
.crumb{color:var(--muted);font-size:13.5px;margin-bottom:6px;cursor:pointer;letter-spacing:.3px;transition:.15s}
.crumb:hover{color:var(--accent)}
.count-pill{background:rgba(255,255,255,.04);border:1px solid var(--border-soft);color:var(--muted);
  padding:5px 14px;border-radius:999px;font-size:12.5px;letter-spacing:.3px}

/* Portfolio value panel */
.portfolio{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#191919,#100f10);
  border:1px solid var(--border);border-radius:16px;padding:18px 20px;margin:2px 0 28px;
  box-shadow:var(--shadow);
}
.portfolio::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-grad)}
.pf-top{display:flex;gap:12px;flex-wrap:wrap}
.pf-stat{
  flex:1;min-width:150px;
  background:rgba(255,255,255,.03);border:1px solid var(--border-soft);border-radius:12px;padding:14px 16px;
}
.pf-stat-growth{display:flex;flex-direction:column;justify-content:center}
.pf-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px}
.pf-value{
  font-family:var(--font-head);font-size:30px;font-weight:700;line-height:1.05;margin-top:6px;
  background:var(--silver-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pf-asof{color:var(--muted);font-size:12px;margin-top:6px;letter-spacing:.3px}
.pf-change{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-family:var(--font-head);font-size:24px;font-weight:700;line-height:1;
}
.pf-change.up{color:#3fb950}
.pf-change.down{color:#e5484d}
.pf-change.flat{color:var(--muted)}
.pf-arrow{font-size:15px}
.pf-chart{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft)}
.pf-svg{width:100%;height:96px;display:block}
.pf-chart-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:11.5px;margin-top:2px}

/* Category filter tabs */
.cat-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 26px}
.cat-tab{
  padding:9px 20px;border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:.3px;
  color:var(--muted);background:var(--bg-2);border:1px solid var(--border-soft);transition:.18s;
}
.cat-tab:hover{color:#fff;border-color:var(--accent);transform:translateY(-1px)}
.cat-tab.active{color:var(--accent-ink);background:var(--accent-grad);border-color:transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}

/* Latest Additions strip */
.latest{margin:0 0 34px}
.latest-strip{
  display:flex;gap:18px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;
}
.latest-strip::-webkit-scrollbar{height:8px}
.latest-strip::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
.latest-strip .card-tile{flex:0 0 190px;scroll-snap-align:start}

/* Grids */
.grid{display:grid;gap:20px}
.grid.players{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* Player tile */
.player-tile{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.player-tile:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.player-photo{
  aspect-ratio:3/4;background:var(--bg-2);display:grid;place-items:center;overflow:hidden;
}
.player-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.player-tile:hover .player-photo img{transform:scale(1.06)}
.player-photo .placeholder{color:var(--muted);font-size:13px;text-align:center;padding:10px}
.player-info{padding:16px}
.player-info h3{margin:0 0 4px;font-size:19px;font-weight:600;letter-spacing:.2px}
.player-info .meta{color:var(--muted);font-size:12.5px;letter-spacing:.3px}

/* Card tile */
.card-tile{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-tile:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.card-img{aspect-ratio:5/7;background:var(--bg-2);display:grid;place-items:center;overflow:hidden;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card-tile:hover .card-img img{transform:scale(1.06)}
.card-img .placeholder{color:var(--muted);font-size:12px;text-align:center;padding:10px}
.card-badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.badge{background:rgba(10,12,16,.78);color:#e9ecf2;font-size:11px;font-weight:600;letter-spacing:.3px;
  padding:4px 9px;border-radius:999px;border:1px solid rgba(200,204,212,.5);backdrop-filter:blur(4px)}
.card-body{padding:14px 15px}
.card-body h4{margin:0 0 4px;font-size:16px;font-weight:600;line-height:1.3}
.card-body .sub{color:var(--muted);font-size:12.5px;letter-spacing:.2px}

/* Category sections on player page */
.cat-section{margin-bottom:34px}
.cat-header{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
}
.cat-header h3{
  margin:0;font-size:21px;font-weight:700;letter-spacing:-.1px;
  position:relative;padding-left:16px;
}
.cat-header h3::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:22px;border-radius:3px;background:var(--accent-grad);
}

/* About / Contact prose pages */
.page-prose{max-width:760px;color:var(--text);font-size:16px;line-height:1.7}
.page-prose p{margin:0 0 16px}
.contact-actions{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.contact-email{color:var(--muted);font-size:14px}

/* Empty state */
.empty{
  text-align:center;color:var(--muted);padding:60px 20px;
  border:1px dashed var(--border);border-radius:var(--radius);background:var(--bg-2)
}
.empty h3{color:var(--text);margin:0 0 8px}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:50;padding:24px
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  max-width:900px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:1fr 1fr
}
.modal-img{background:var(--bg-2);display:grid;place-items:center;min-height:360px;overflow:hidden}
.modal-img img{width:100%;height:100%;object-fit:contain;max-height:80vh}
.modal-img .placeholder{color:var(--muted);padding:20px;text-align:center}
.modal-detail{padding:30px;position:relative}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;
  color:var(--muted);font-size:26px;cursor:pointer;line-height:1;transition:.15s}
.modal-close:hover{color:var(--text)}
.modal-detail h3{margin:0 4px 2px 0;font-size:26px;font-weight:600;padding-right:30px}
.modal-detail .player-name{color:var(--muted);font-family:var(--font-body);font-weight:600;
  text-transform:uppercase;letter-spacing:2px;font-size:12px;margin-bottom:18px}
.spec-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--border-soft);font-size:14px}
.spec-row .k{color:var(--muted);letter-spacing:.2px}
.spec-row .v{text-align:right;font-weight:600}
.modal-notes{margin-top:18px;color:var(--muted);font-size:14px;line-height:1.6}

/* Bottom call-to-action (follow / contact) */
.cta{margin-top:10px}
.cta-inner{
  text-align:center;border:1px solid var(--border);border-radius:18px;
  background:linear-gradient(135deg,#191919,#100f10);
  padding:40px 26px;box-shadow:var(--shadow);
}
.cta-title{margin:0 0 8px;font-size:28px;font-weight:700}
.cta-sub{color:var(--muted);margin:0 auto 22px;font-size:15px;max-width:520px;line-height:1.6}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-actions .btn{padding:12px 22px}

footer{color:var(--muted);text-align:center;padding:36px;font-size:13px;
  border-top:1px solid var(--border-soft);margin-top:30px}
.footer-links{margin-bottom:8px}
.footer-links a{color:var(--muted);transition:.15s}
.footer-links a:hover{color:var(--accent)}

@media(max-width:820px){
  .top-nav{order:3;flex-basis:100%;justify-content:center;margin-top:6px}
}

@media (max-width:640px){
  .modal{grid-template-columns:1fr}
  .search-box{min-width:140px}
  .wrap{padding:18px}
}