@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --text: #f3f7ff;
  --muted: rgba(232,238,255,.78);
  --panel: rgba(10,12,20,.72);
  --panel-brd: rgba(255,255,255,.12);
  --btn: linear-gradient(90deg,#ff3a82,#5233ff);
}
body {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  min-height: 100vh;
  color: var(--text);
  background: #050505;
  position: relative;
}
.site-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.gradient-background { position: absolute; inset: 0; }
.gradient-sphere { position: absolute; border-radius: 50%; filter: blur(60px); transition: transform .35s ease; }
.sphere-1 { width: 40vw; height: 40vw; background: linear-gradient(40deg, rgba(255, 0, 128, 0.8), rgba(255, 102, 0, 0.4)); top: -10%; left: -10%; animation: float-1 15s ease-in-out infinite alternate; }
.sphere-2 { width: 45vw; height: 45vw; background: linear-gradient(240deg, rgba(72, 0, 255, 0.8), rgba(0, 183, 255, 0.4)); bottom: -20%; right: -10%; animation: float-2 18s ease-in-out infinite alternate; }
.sphere-3 { width: 30vw; height: 30vw; background: linear-gradient(120deg, rgba(133, 89, 255, 0.5), rgba(98, 216, 249, 0.3)); top: 60%; left: 20%; animation: float-3 20s ease-in-out infinite alternate; }
.grid-overlay { position: absolute; inset: 0; background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px); }
.glow { position: absolute; width: 40vw; height: 40vh; background: radial-gradient(circle, rgba(72, 0, 255, 0.15), transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: pulse 8s infinite alternate; filter: blur(30px); }
.noise-overlay { position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }
.particles-container { position: absolute; inset: 0; pointer-events: none; }
.particle { position: absolute; background: white; border-radius: 50%; opacity: 0; }

@keyframes float-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(10%,10%) scale(1.1);} }
@keyframes float-2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-10%,-5%) scale(1.15);} }
@keyframes float-3 { from { transform: translate(0,0) scale(1); opacity:.3; } to { transform: translate(-5%,10%) scale(1.05); opacity:.6; } }
@keyframes pulse { from { opacity: .3; transform: translate(-50%,-50%) scale(.9);} to { opacity:.7; transform: translate(-50%,-50%) scale(1.1);} }

.topbar {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .4rem;
  padding: 1rem 1rem .8rem;
  position: relative;
}
.topbar h1 { font-size: clamp(1.4rem,2.8vw,2.2rem); font-weight: 800; background: linear-gradient(to right,#fff,#acacac); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.topbar p, .topbar small { color: var(--muted); }
.db-nav { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; }
.db-nav a { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .34rem .72rem; background: rgba(13,16,27,.62); }
.jr-logo {
  position: absolute; top: .85rem; left: 1.35rem;
  width: 84px; height: 84px; border-radius: 50%; text-decoration: none; color: #fff;
  display: grid; place-items: center; font-weight: 800; letter-spacing: 1px; font-size: 1.55rem;
  border: 2px solid rgba(255,255,255,.3); background: radial-gradient(circle, rgba(255,255,255,.15), rgba(255,255,255,.02));
  box-shadow: 0 0 25px rgba(82,51,255,.4), inset 0 0 16px rgba(255,58,130,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.jr-logo::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.45);
  animation: spin 8s linear infinite;
}
.jr-logo:hover { transform: scale(1.06); box-shadow: 0 0 30px rgba(0,183,255,.5), inset 0 0 20px rgba(255,58,130,.65); }
.jr-logo:active { color: #ffd6ec; box-shadow: 0 0 35px rgba(255,58,130,.7), 0 0 20px rgba(82,51,255,.7); }
@keyframes spin { to { transform: rotate(360deg); } }

.db-topbar { padding-top: 5.8rem; }
.header-search-wrap { position: absolute; right: 1rem; top: 1rem; width: min(320px, 44vw); text-align: left; }
#quick-player-search {
  width: 100%; border-radius: 999px; border: 1px solid var(--panel-brd); padding: .55rem .85rem;
  background: rgba(10,12,20,.82); color: #fff;
}
.quick-search-dropdown {
  margin-top: .35rem; border: 1px solid var(--panel-brd); border-radius: 10px;
  background: rgba(10,12,20,.93); max-height: 250px; overflow: auto; display: none;
}
.quick-search-item { padding: .5rem .65rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.08); }
.quick-search-item:hover { background: rgba(82,51,255,.22); }

.db-layout, .pitch-wrap, .about-card {
  margin: 0 1rem 1rem;
  background: var(--panel);
  border: 1px solid var(--panel-brd);
  backdrop-filter: blur(6px);
  border-radius: 14px;
}
.db-layout { display: grid; grid-template-columns: 270px 1fr; gap: .9rem; padding: .9rem; }
.db-filters { display: grid; gap: .55rem; align-content: start; }
.db-filters label { display: grid; gap: .2rem; color: var(--muted); font-size: .85rem; }
.db-filters input, .db-filters select, .db-filters button, #formation-select, #clear-btn, #slot-search-input, #roster-name, #share-btn, .share-actions button {
  border-radius: 10px; border: 1px solid var(--panel-brd); background: rgba(10,12,20,.78); color: #fff; padding: .5rem .6rem;
}
.db-filters button, #clear-btn, #share-btn, .share-actions button { background-image: var(--btn); border: none; }

.db-results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.db-results { display: grid; gap: .42rem; }
.db-player-row { display:grid; grid-template-columns:54px 1fr auto; gap:.55rem; align-items:center; border:1px solid rgba(255,255,255,.2); border-radius:8px; background: rgba(20,24,38,.65); padding:.36rem; }
.db-player-face { width:54px; height:54px; border-radius:8px; object-fit:cover; border:1px solid rgba(255,255,255,.2); }
.db-player-main h3 { font-size: 1rem; }
.db-primary-position, .db-player-main p { color: var(--muted); font-size: .8rem; margin-top: .12rem; }

.pagination { display:flex; justify-content:flex-end; gap:.3rem; margin-top:.75rem; }
.page-btn { border:1px solid rgba(255,255,255,.2); background: rgba(10,12,20,.8); color:#fff; min-width:30px; height:28px; border-radius:4px; cursor:pointer; }
.page-btn.active { background:#0ca6ff; border-color:#0ca6ff; }

.pitch-wrap { padding: .8rem; }
.board-toolbar { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-bottom:.8rem; }
#share-btn { width: 40px; font-weight: 800; }
#share-btn[data-tooltip]:hover::after { content: attr(data-tooltip); position:absolute; top: calc(100% + 6px); left:50%; transform:translateX(-50%); background: rgba(0,0,0,.85); color:#fff; font-size:.68rem; padding:.2rem .35rem; border-radius:4px; }

.squad-board { display:grid; grid-template-columns:110px minmax(500px,860px) 110px; gap:.8rem; align-items:start; }
.side-column h2 { margin-bottom:.45rem; font-size:.9rem; color:var(--muted); }
.side-slots { display:grid; gap:.45rem; }
.pitch { position:relative; width:100%; aspect-ratio:11/16; border-radius:12px; background: linear-gradient(180deg,#0f2f68,#06183b 35%,#081027); border:2px solid rgba(255,255,255,.25); overflow:hidden; }
.pitch::before { content:''; position:absolute; inset:1rem; border:2px solid rgba(255,255,255,.28); border-radius:6px; }

.slot { border:1px dashed rgba(255,255,255,.45); background: rgba(14,18,29,.65); border-radius:10px; min-height:98px; display:flex; align-items:center; justify-content:center; }
.pitch-slot { position:absolute; width:95px; min-height:114px; transform:translate(-50%,-50%); }
.side-slot { min-height:74px; }
.slot-label { font-weight:700; font-size:.8rem; color:var(--muted); }
.drop-target { outline:2px solid #0ca6ff; outline-offset:2px; }
.slot.filled { padding:0; border:none; background:transparent; }
.slot.filled .player-card { width:100%; height:100%; }

.player-card { position:relative; width:100%; min-height:100%; border-radius:10px; border:1px solid rgba(255,255,255,.25); background: linear-gradient(180deg, rgba(62,41,173,.35), rgba(10,12,20,.96)); color:#fff; padding:.35rem; display:grid; grid-template-rows:auto 1fr auto; gap:.25rem; }
.player-meta-top { display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
.player-last-name { font-size:.69rem; line-height:1.1; }
.player-position { font-size:.62rem; color:var(--muted); font-weight:700; }
.player-face { width:100%; height:56px; object-fit:cover; border-radius:7px; border:1px solid rgba(255,255,255,.2); }
.player-face-fallback { width:100%; height:56px; border-radius:7px; border:1px solid rgba(255,255,255,.2); background: rgba(22,10,4,.65); display:grid; place-items:center; font-weight:800; }
.player-foot { display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
.remove-btn { position:absolute; right:-7px; top:-7px; width:18px; height:18px; border:none; border-radius:999px; background:#fff; color:#000; font-size:.75rem; display:none; z-index:2; opacity:0; transition:opacity 120ms ease; }
.remove-btn.show { display:inline-flex; align-items:center; justify-content:center; }
.player-card:hover .remove-btn.show, .player-card:focus-within .remove-btn.show { opacity:1; }

.compact-card { min-height:58px; grid-template-rows:auto auto; gap:.2rem; }
.compact-card .player-face, .compact-card .player-position { display:none; }
.compact-card .player-last-name { font-size:.68rem; }
.flag-row { display:flex; gap:.2rem; flex-wrap:wrap; max-width: 96px; }
.country-flag { width:18px; height:12px; border-radius:2px; border:1px solid rgba(255,255,255,.45); overflow:hidden; background-size:cover; display:inline-block; }
.country-flag img { width:100%; height:100%; object-fit:cover; display:block; }
.info-btn { border-radius:999px; border:1px solid rgba(255,255,255,.4); width:20px; height:20px; display:grid; place-items:center; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; }

/* flag fallbacks */
.country-flag.fallback-usa { background: linear-gradient(90deg,#213f9a 0 42%, transparent 42%), repeating-linear-gradient(to bottom,#c82c2c 0,#c82c2c 2px,#fff 2px,#fff 4px); }
.country-flag.fallback-italy { background: linear-gradient(90deg,#1f8f44 0 33%,#fff 33% 66%,#d12929 66%); }
.country-flag.fallback-nigeria { background: linear-gradient(90deg,#218c47 0 33%,#fff 33% 66%,#218c47 66%); }
.country-flag.fallback-germany { background: linear-gradient(to bottom,#111 0 33%,#c42626 33% 66%,#efc130 66%); }
.country-flag.fallback-england { background:#fff; background-image:linear-gradient(90deg,transparent 42%,#d12929 42% 58%,transparent 58%),linear-gradient(transparent 42%,#d12929 42% 58%,transparent 58%); }
.country-flag.fallback-france { background: linear-gradient(90deg,#214ea0 0 33%,#fff 33% 66%,#d12929 66%); }
.country-flag.fallback-ghana { background: linear-gradient(to bottom,#d12929 0 33%,#e3c62f 33% 66%,#218c47 66%); }
.country-flag.fallback-spain { background: linear-gradient(to bottom,#c42626 0 25%,#efc130 25% 75%,#c42626 75%); }
.country-flag.fallback-argentina { background: linear-gradient(to bottom,#78b7ff 0 33%,#fff 33% 66%,#78b7ff 66%); }
.country-flag.fallback-portugal { background: linear-gradient(90deg,#218c47 0 42%,#d12929 42%); }
.country-flag.fallback-mexico { background: linear-gradient(90deg,#218c47 0 33%,#fff 33% 66%,#d12929 66%); }
.country-flag.fallback-norway { background: #c42626; }
.country-flag.fallback-jamaica { background: linear-gradient(45deg,#111 0 45%,#e3c62f 45% 55%,#218c47 55%); }
.country-flag.fallback-croatia { background: linear-gradient(to bottom,#d12929 0 33%,#fff 33% 66%,#214ea0 66%); }
.country-flag.fallback-liberia { background: linear-gradient(90deg,#214ea0 0 40%,transparent 40%), repeating-linear-gradient(to bottom,#d12929 0,#d12929 2px,#fff 2px,#fff 4px); }
.country-flag.fallback-japan { background: radial-gradient(circle at center,#d12929 0 35%,#fff 36%); }
.country-flag.fallback-netherlands { background: linear-gradient(to bottom,#d12929 0 33%,#fff 33% 66%,#214ea0 66%); }
.country-flag.fallback-suriname { background: linear-gradient(to bottom,#218c47 0 20%,#fff 20% 30%,#d12929 30% 70%,#fff 70% 80%,#218c47 80%); }
.country-flag.fallback-lithuania { background: linear-gradient(to bottom,#e3c62f 0 33%,#218c47 33% 66%,#d12929 66%); }
.country-flag.fallback-denmark { background: #d12929; }
.country-flag.fallback-canada { background: linear-gradient(90deg,#d12929 0 25%,#fff 25% 75%,#d12929 75%); }
.country-flag.fallback-poland { background: linear-gradient(to bottom,#fff 0 50%,#d12929 50%); }
.country-flag.fallback-peru { background: linear-gradient(90deg,#d12929 0 33%,#fff 33% 66%,#d12929 66%); }
.country-flag.fallback-brazil { background: #218c47; }
.country-flag.fallback-ireland { background: linear-gradient(90deg,#218c47 0 33%,#fff 33% 66%,#f28b24 66%); }
.country-flag.fallback-armenia { background: linear-gradient(to bottom,#d12929 0 33%,#214ea0 33% 66%,#efc130 66%); }
.country-flag.fallback-elsalvador { background: linear-gradient(to bottom,#2d74d1 0 33%,#fff 33% 66%,#2d74d1 66%); }
.country-flag.fallback-belgium { background: linear-gradient(90deg,#111 0 33%,#efc130 33% 66%,#c42626 66%); }
.country-flag.fallback-ivorycoast { background: linear-gradient(90deg,#f28b24 0 33%,#fff 33% 66%,#218c47 66%); }
.country-flag.fallback-iran { background: linear-gradient(to bottom,#218c47 0 33%,#fff 33% 66%,#c42626 66%); }

.player-modal, .search-modal, .share-modal { width:min(560px,94vw); border:1px solid rgba(255,255,255,.2); border-radius:12px; background:#090f1d; color:#fff; padding:.8rem; }
.player-modal::backdrop, .search-modal::backdrop, .share-modal::backdrop { background: rgba(0,0,0,.55); }
.modal-head { display:flex; justify-content:space-between; align-items:center; }
#modal-close,#slot-search-close,#share-close { border:none; background:transparent; color:#fff; font-size:1.4rem; cursor:pointer; }
.modal-player { display:grid; grid-template-columns:100px 1fr; gap:.9rem; margin-top:.75rem; }
.modal-player-face { width:100px; height:100px; object-fit:cover; border-radius:8px; border:1px solid rgba(255,255,255,.2); }
#modal-body ul { margin:0; padding-left:1rem; line-height:1.45; }
#club-flag-wrap,#birth-flag-wrap { display:inline-flex; margin-left:.35rem; vertical-align:middle; }
.search-results { margin-top:.7rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.55rem; max-height:60vh; overflow:auto; }
.search-result { border:none; padding:0; background:transparent; text-align:left; }
.share-actions { margin-top:.6rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
#share-status { color:var(--muted); margin:.35rem 0 0; }
.share-modal.is-busy .share-actions { opacity:.5; pointer-events:none; }
.share-modal.is-busy #share-status::after { content:''; display:inline-block; width:14px; height:14px; margin-left:8px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation: spin 1s linear infinite; }
.force-export-layout { grid-template-columns:110px minmax(500px,860px) 110px !important; }

.about-card { padding: 1rem; max-width: 920px; margin: 0 auto 1rem; text-align: center; }
.about-card p, .about-card li { color: var(--muted); line-height: 1.5; }
.about-card ul { margin: .6rem auto; display: inline-block; text-align: left; }
.about-card .small-note { font-size: .82rem; }

.featured-on { margin: 1rem 0; }
.featured-on h2 { font-size: clamp(1.4rem,3vw,2rem); margin-bottom: .6rem; }
.featured-logos { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: .75rem; align-items: center; }
.featured-logos img { width: 100%; max-height: 68px; object-fit: contain; background: rgba(255,255,255,.96); border-radius: 8px; padding: .35rem; }


@media (max-width: 1100px) {
  .header-search-wrap { position: static; width: min(560px, 90vw); }
  .topbar { padding-top: 1rem; }
  .jr-logo { left: 1.35rem; top: .75rem; }
  .db-topbar { padding-top: 1rem; }
  .db-layout { grid-template-columns: 1fr; }
  .squad-board { grid-template-columns:1fr; }
  .pitch { order:1; max-width:560px; margin:0 auto; }
  .side-column-subs { order:2; }
  .side-column-reserves { order:3; }
  .side-slots { grid-template-columns:repeat(7,minmax(50px,1fr)); gap:.4rem; }
  .side-column-reserves .side-slots { grid-template-columns:repeat(8,minmax(50px,1fr)); }
  .side-slot { min-height:64px; }
  .pitch-slot { width:86px; min-height:104px; }
}


.media-layout {
  display: grid;
  gap: .9rem;
  padding: 1rem;
}
.publication-card {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(9,14,26,.72);
  padding: .9rem;
  text-align: left;
}
.publication-card h2 { font-size: 1.1rem; margin-bottom: .3rem; }
.publication-card h2 a { color: #fff; }
.publication-meta { font-size: .82rem; color: var(--muted); margin-bottom: .4rem; }
.related-player-link { display: inline-block; margin-top: .45rem; color: #8fd8ff; text-decoration: none; }
.media-related-wrap { margin-top: .65rem; display: grid; gap: .45rem; justify-items: start; }
.related-player-label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.media-related-card { width: 160px; }
.reader-toggle {
  margin-top: .6rem;
  border: none;
  border-radius: 999px;
  padding: .45rem .8rem;
  color: #fff;
  background-image: var(--btn);
  cursor: pointer;
}
.reader-content {
  margin-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: .6rem;
}
.reader-controls { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .55rem; }
.reader-controls button, .reader-controls select {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(10,12,20,.78);
  color: #fff;
  padding: .35rem .55rem;
}
.reader-article {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--muted);
  max-height: 360px;
  overflow: auto;
  padding-right: .4rem;
}