/* Xzentosia — Saved Players • Glassy Neon v2 (drop-in)
   - No HTML/JS changes required
   - AMOLED-safe, glass + gradient borders, soft glows, micro-anims
*/

:root{
  --accent:#B38AFF; --accent-2:#8E6BFF; --ink:#EDE6FF; --dim:#9aa0aa;
  --bg:#050508; --panel:#0b0e13; --edge:#1a1d25;
  --g1:#b38aff; --g2:#8e6bff; --g3:#7f52ff; --g4:#4b2cff;
  --glass-bg: rgba(12,15,20,.55);
  --glass-stroke: rgba(255,255,255,.06);
  --glass-blur: 12px;
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,.4);
  --footer-h: 56px;
  font-synthesis-weight:none;
}
*{ box-sizing:border-box }
html,body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px ui-monospace,Menlo,Consolas,monospace;
}

/* Ambient neon fog */
body::before, body::after{
  content:""; position:fixed; inset:-20%;
  filter:blur(80px); opacity:.35; pointer-events:none; z-index:0;
  background:
    radial-gradient(40% 35% at 20% 25%, rgba(179,138,255,.55), transparent 60%),
    radial-gradient(35% 40% at 85% 70%, rgba(78,44,255,.45), transparent 65%),
    radial-gradient(30% 30% at 50% 10%, rgba(142,107,255,.35), transparent 60%);
  animation: fog 22s linear infinite alternate;
}
body::after{ animation-duration:28s; animation-direction:alternate-reverse; opacity:.25 }
@keyframes fog{
  0%{ transform:translate3d(0,0,0) scale(1) }
  100%{ transform:translate3d(2vw,-1.5vh,0) scale(1.03) }
}

/* ===== top + layout ===== */
.topbar{
  position:relative; z-index:2;
  padding:16px 20px;
  padding-left:calc(16px + env(safe-area-inset-left,0px));
  padding-right:calc(16px + env(safe-area-inset-right,0px));
  border-bottom:1px solid var(--edge);
  display:flex; align-items:end; gap:16px;
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  background:linear-gradient(180deg, rgba(12,15,20,.65), rgba(12,15,20,.25));
}
.topbar h1{
  margin:0; font-size:20px;
  background:linear-gradient(90deg, var(--g1), var(--g2) 45%, var(--g4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 12px rgba(142,107,255,.22);
}
.hint{ color:var(--dim); font-size:12px }

.wrap{
  max-width:1100px; margin:24px auto; padding:0 16px;
  display:grid; gap:16px; position:relative; z-index:1;
}
.panel{
  border:1px solid transparent; border-radius:16px; padding:16px;
  background:
    linear-gradient(180deg, var(--glass-bg), rgba(10,12,17,.45)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)) border-box;
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--glass-stroke);
}

/* ===== tabs (Dashboard link) ===== */
.tabs{ display:flex; gap:8px; border-bottom:1px solid var(--edge) }
.tabbtn{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:#cfd2ff;
  padding:8px 12px; border-radius:12px 12px 0 0;
  border:1px solid rgba(255,255,255,.06); border-bottom:none;
  background:linear-gradient(180deg, rgba(11,14,19,.85), rgba(11,14,19,.6));
  transition:transform .12s ease, box-shadow .12s ease, color .12s ease, background .2s ease;
}
.tabbtn:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 6px 20px rgba(142,107,255,.18) }
.tabbtn:active{ transform:translateY(0) }

/* ===== status ===== */
.status{
  padding:10px 12px; border-radius:10px;
  background:rgba(11,14,19,.5);
  border:1px dashed rgba(255,255,255,.08);
  color:var(--dim);
  backdrop-filter: blur(6px);
}
.status.ok{ border-color:#2ecc71; color:#2ecc71 }
.status.warn{ border-color:#f1c40f; color:#f1c40f }
.status.err{ border-color:#e74c3c; color:#e74c3c }

/* ===== search bar ===== */
.row{ display:flex; gap:12px; align-items:center }
.inp{
  flex:1; background:rgba(11,14,19,.7); color:var(--ink);
  border:1px solid rgba(255,255,255,.06); border-radius:12px;
  padding:10px 12px; outline:none; backdrop-filter: blur(6px);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.inp::placeholder{ color:var(--dim); opacity:.85 }
.inp:focus{
  border-color:transparent;
  box-shadow:0 0 0 2px rgba(142,107,255,.35), 0 6px 18px rgba(142,107,255,.15) inset;
}
.btn{
  background:linear-gradient(135deg, var(--g1), var(--g2) 60%, var(--g4));
  border:0; color:#fff; border-radius:12px; padding:10px 14px; cursor:pointer;
  box-shadow:0 10px 24px rgba(142,107,255,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn:active{ transform:translateY(0) scale(.98) }

/* ===== grid of profiles ===== */
.cardgrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px;
}
#grid:empty::after{
  content:"No saved players yet"; color:var(--dim);
  display:block; text-align:center; padding:24px 8px;
  border:1px dashed rgba(255,255,255,.08); border-radius:12px;
  background:rgba(11,14,19,.45);
}
.card{
  background:rgba(11,14,19,.6);
  border:1px solid rgba(255,255,255,.06); border-radius:14px;
  padding:12px; display:grid; gap:10px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .15s ease;
  backdrop-filter: blur(6px);
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(142,107,255,.12) }
.card:active{ transform:translateY(0) scale(.99) }

/* ===== avatar stack (perfect overlay) ===== */
.avatar{
  position:relative; width:96px; height:96px; aspect-ratio:1/1;
  border-radius:12px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.avatar.big{ width:120px; height:120px }
.avatar .icon{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:#0a0d12;
  border:1px solid #1a1d25; border-radius:12px; z-index:1;
}
.avatar .frame{
  position:absolute; inset:0; width:105%; height:105%;
  object-fit:cover; border-radius:12px; z-index:10; pointer-events:none;
  filter: drop-shadow(0 0 10px rgba(142,107,255,.22));
}

/* ===== meta/content ===== */
.meta{ display:grid; gap:6px }
.meta b{
  font-size:14px;
  background:linear-gradient(90deg, var(--g1), var(--g2) 50%, var(--g4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.meta small{ color:var(--dim) }
.kvline{ display:flex; gap:8px; align-items:center }
.uid{
  background:linear-gradient(180deg, rgba(17,21,42,.8), rgba(17,21,42,.55));
  border:1px solid rgba(255,255,255,.06); padding:4px 8px; border-radius:10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

/* ===== detail view + charts ===== */
.charts{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;
}
.chart{
  border:1px solid transparent; border-radius:14px; padding:12px;
  background:
    linear-gradient(180deg, rgba(12,15,20,.65), rgba(12,15,20,.4)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,0)) border-box;
  backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--glass-stroke);
}
.chart-head h3{
  margin:0; color:#fff; font-size:14px;
}
.chart-head h3::after{
  content:""; display:inline-block; height:1px; margin-left:10px; vertical-align:middle; width:40%;
  background:linear-gradient(90deg, rgba(179,138,255,.35), rgba(78,44,255,.0) 70%);
  opacity:.35;
}

/* fixed-ratio wrapper so canvases don’t stretch */
.canvas-wrap{ position:relative; width:100%; aspect-ratio:16/10 }
.canvas-wrap>canvas{
  position:absolute; inset:0; width:100% !important; height:100% !important; display:block;
}

/* ===== responsive ===== */
@media (max-width:700px){
  html,body{ font-size:13.5px }
  .panel .row:first-child{ flex-direction:column; align-items:stretch; gap:8px }
  .inp, .btn{ width:100%; min-height:44px; font-size:16px }
  .cardgrid{ grid-template-columns:1fr }
  .charts{ grid-template-columns:1fr }
  .avatar{ width:84px; height:84px }
  .avatar.big{ width:110px; height:110px }
}

/* ===== footer ===== */
body{ padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom,0px)) }
.foot{
  position: fixed; left:0; right:0; bottom:0; z-index:100;
  min-height: var(--footer-h);
  display:flex; align-items:center; justify-content:center;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom,0px));
  background:
    linear-gradient(180deg, rgba(12,15,20,.85), rgba(12,15,20,.6)) padding-box,
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0)) border-box;
  border-top: 1px solid var(--edge); color: var(--dim);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* ===== utilities ===== */
[hidden]{ display:none !important }

/* scrollbar */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(179,138,255,.5), rgba(142,107,255,.35));
  border:2px solid rgba(11,14,19,.6); border-radius:999px;
}
*::-webkit-scrollbar-track{ background:rgba(11,14,19,.35) }