/* FEIN — Neon Noir UI */
/* ====================================================== */
/* Color system */
:root{
  --bg:#05070b;
  --bg-2:#070a10;
  --panel:#0b0f14;
  --panel-2:#0c1219;
  --ink:#e8eefc;
  --ink-soft:#d7def0;
  --muted:#9aa6bd;
  --line:#172033;

  /* Neon accents */
  --accent:#ff7a1a;     /* orange */
  --accent-2:#37d3ff;   /* cyan */
  --accent-3:#b26bff;   /* violet */
  --good:#10b981;
  --bad:#ef4444;
  --warn:#f59e0b;

  /* Shadows & effects */
  --shadow-lg:0 20px 50px rgba(0,0,0,.55);
  --shadow-md:0 10px 25px rgba(0,0,0,.45);
  --shadow-sm:0 6px 16px rgba(0,0,0,.35);
  --ring:0 0 0 1px rgba(255,255,255,.04);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(255,122,26,.06), transparent 40%),
              radial-gradient(1200px 900px at 120% 0%, rgba(55,211,255,.05), transparent 50%),
              var(--bg);
  color:var(--ink);
  font:14px/1.45 ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utilities */
.hidden,[hidden]{display:none !important}
.spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:12px}
.center{text-align:center}
.kbd{padding:.15em .45em;border:1px solid var(--line);border-radius:6px;background:#0a0f16}

.wrap{max-width:1200px;margin:0 auto;padding:14px}

/* Grid */
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.col{min-width:0}
.gap{gap:10px}

@media (max-width:960px){ .row{grid-template-columns:1fr} }

/* ====================================================== */
/* Brand header (IG-style motion + glow) */
.brand{
  position:relative;
  padding:34px 16px 20px;
  background:
    radial-gradient(800px 500px at 15% 0%, rgba(255,122,26,.08), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(55,211,255,.08), transparent 65%),
    linear-gradient(180deg,#070b11,#060a0f);
  overflow:hidden;
  isolation:isolate;
}
.brand::before,
.brand::after{
  content:"";
  position:absolute; inset:auto -20% -40% -20%;
  height:160px;
  background:conic-gradient(from 180deg at 50% 50%, rgba(255,122,26,.12), rgba(55,211,255,.12), rgba(178,107,255,.12), rgba(255,122,26,.12));
  filter:blur(40px);
  animation:slow-pan 20s linear infinite;
  opacity:.6;
  z-index:0;
}
.brand::after{ animation-direction:reverse; animation-duration:28s; opacity:.45 }

@keyframes slow-pan{ 0%{transform:translateX(-10%)} 50%{transform:translateX(10%)} 100%{transform:translateX(-10%)} }

.brand-trio{
  width:min(100%, 980px); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  position:relative; z-index:1;
}

/* Logo with neon aura */
.fein-logo-link{display:block; transform:translateZ(0)}
.fein-logo{
  width:min(32vw, 300px); height:auto; border-radius:18px;
  box-shadow:
    0 0 28px 10px rgba(249,115,22,.55),
    0 0 1px 1px rgba(255,255,255,.06);
  filter:saturate(1.1) contrast(1.03);
  transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
  will-change:transform, filter;
}
.fein-logo.glow:hover{
  transform:perspective(800px) translateZ(0) scale(1.04) rotate(-.25deg);
  box-shadow:
    0 0 50px 16px rgba(249,115,22,.9),
    0 0 0 1px rgba(255,255,255,.08);
}

/* Potency meters */
.potency-socket{width:150px; display:flex; flex-direction:column; align-items:center; gap:6px}
.level-label{
  margin-top:4px;color:#a6b2c2;letter-spacing:.08em;font-weight:800;font-size:11px; text-transform:uppercase;
}

.potency-badge{position:relative;width:128px;height:128px;isolation:isolate}
.potency-badge .ring{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(closest-side,rgba(249,115,22,.45), transparent 70%),
    conic-gradient(from 0deg, rgba(255,122,26,.7), rgba(55,211,255,.7), rgba(178,107,255,.7), rgba(255,122,26,.7));
  box-shadow:inset 0 0 70px rgba(249,115,22,.35), 0 0 40px rgba(55,211,255,.28);
  filter:blur(.1px);
  animation:spin-slow 14s linear infinite;
}
@keyframes spin-slow{ to{ transform:rotate(360deg) } }

.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{ 0%,100%{transform:scale(1); opacity:.95} 50%{transform:scale(1.06); opacity:1} }

.potency-badge .level-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:800 44px/1 system-ui;
  text-shadow:
    0 0 18px rgba(255,122,26,.9),
    0 0 28px rgba(55,211,255,.6);
}

/* Caption */
.potency-caption{text-align:center;margin-top:10px; position:relative; z-index:1}
#potencyTier{margin:6px 0 2px;font-size:22px}
#potencyTag{margin:0;color:var(--muted)}

/* ====================================================== */
/* Cards — glassy with neon rims */
.card{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) border-box,
    linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid transparent;
  border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

.card-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,#0f1620,#0b111a);
}
.card-body{padding:12px}

/* Badges / meta */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); background:#0a1017; color:var(--ink); font-size:12px;
}

/* ====================================================== */
/* Inputs & buttons */
label{display:flex;flex-direction:column;gap:6px;font-weight:700}
input,select{
  background:#0b1118; border:1px solid var(--line); color:var(--ink);
  border-radius:12px; padding:10px 12px; width:100%;
  outline:none; transition:border-color .2s, box-shadow .2s, transform .08s ease;
}
input:focus,select:focus{
  border-color:rgba(255,122,26,.55);
  box-shadow:0 0 0 3px rgba(255,122,26,.15), 0 0 0 1px rgba(255,255,255,.03) inset;
}

.btn{
  position:relative;
  background:#0b1118; border:1px solid #223041; color:#cfe7ff;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.06) }
.btn:active{ transform:translateY(0) scale(.98) }

.btn.primary{ background:linear-gradient(180deg,#132033,#0f1722); border-color:#1a2e40; color:#e8f3ff }
.btn.primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 22px rgba(55,211,255,.25), 0 0 14px rgba(255,122,26,.18) inset;
  pointer-events:none;
}
.btn.ghost{background:transparent;border-color:#223041}
.btn.danger{background:#1b0f12;border-color:#3b1620;color:#ffd6d6}

/* Segmented control */
.seg{
  display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg,#0b1118,#0a0f15);
}
.seg-btn{border:0;background:transparent;color:#cfe7ff;padding:8px 14px;cursor:pointer;transition:background .2s}
.seg-btn.active{background:#142131}

/* ====================================================== */
/* Info blocks */
.info{
  margin-top:10px; padding:10px;
  border:1px dashed var(--line); border-radius:12px;
  background:linear-gradient(180deg,#0a0f15, #0a0f15aa);
}

/* Membership & action rows */
.membership{margin-top:10px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* ====================================================== */
/* Tables */
.table-wrap{overflow:auto}
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.0));
  border-radius:12px; overflow:hidden;
}
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:10px 12px; text-align:left; vertical-align:middle;
}
.table thead th{
  font-weight:800; color:#d8e1ee;
  background:linear-gradient(180deg,#0f1620,#0b111a);
  position:sticky; top:0; z-index:2;
  backdrop-filter:blur(4px);
}
.table tbody tr{
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.table tbody tr:hover{
  background:linear-gradient(90deg, rgba(255,122,26,.06), transparent 35%),
             #0f141c;
  transform:translateY(-1px);
}

/* Player cells */
.pcell{display:flex;align-items:center;gap:10px}
.pavatar{
  width:36px;height:36px; border-radius:50%; overflow:hidden;
  background:linear-gradient(180deg,#111824,#0c1219);
  box-shadow:0 0 0 1px #1a2330;
}
.pavatar img{
  width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(.98);
  transition:opacity .3s ease, transform .3s ease;
}
.pavatar img.loaded{opacity:1; transform:scale(1)}
.pmeta{display:flex;flex-direction:column}
.pname{font-weight:800}
.psub{font-size:12px;color:var(--muted)}

/* ====================================================== */
/* Micro animations */
.fade-in{animation:fade .5s ease both}
.slide-up{animation:slideUp .5s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Reveal/hide with smoothness when using [hidden] toggling via JS */
[hidden] + *,
.info[hidden],
.membership[hidden]{
  display:block; max-height:0; padding-top:0; padding-bottom:0; margin:0; overflow:hidden; opacity:0;
  transition:max-height .28s ease, opacity .24s ease, margin .24s ease, padding .24s ease;
}
.reveal{ max-height:600px !important; opacity:1 !important; }

/* ====================================================== */
/* Responsive tweaks */
@media (max-width:960px){
  .brand-trio{gap:14px}
  .fein-logo{width:min(46vw, 240px)}
  .potency-socket{width:126px}
  .table th,.table td{padding:8px 10px}
}
/* Clickable circle target */
.potency-badge.hit{ border:0; padding:0; background:transparent; width:128px; height:128px; cursor:pointer }
.potency-badge.hit:focus-visible{ outline:3px solid rgba(255,122,26,.35); border-radius:999px }

/* Arrows */
.potency-arrow{
  appearance:none; -webkit-appearance:none;
  width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#0b1118,#0a0f15);
  color:var(--ink); cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  margin-bottom:6px;
}
.potency-arrow:hover{ transform:translateY(-1px); background:#0f1722; border-color:#1a2e40 }
.potency-arrow:active{ transform:translateY(0) scale(.98) }
.potency-arrow.left  { margin-right:6px }
.potency-arrow.right { margin-left:6px }

/* Skeleton loader for leagues table */
.skeleton-row{
  height:16px;background:linear-gradient(90deg,#0d121a,#111925,#0d121a);
  background-size:200% 100%; border-radius:8px; margin:10px 0;
  animation:shimmer 1.2s linear infinite
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Make bubbles feel clickable */
.potency-badge{ cursor:pointer }
.potency-badge.clickflash { filter:brightness(1.15); transform:scale(1.02); transition:transform .15s ease, filter .15s ease }
.potency-badge:active{ transform:scale(.985) }

/* If your bubbles are not buttons, give them a focus ring */
.potency-badge[role="button"]:focus-visible{
  outline:3px solid rgba(255,122,26,.35);
  border-radius:999px;
}
/* Make bubbles feel clickable */
.potency-badge{ cursor:pointer }
.potency-badge.clickflash { filter:brightness(1.15); transform:scale(1.02); transition:transform .15s ease, filter .15s ease }
.potency-badge:active{ transform:scale(.985) }
.potency-badge[role="button"]:focus-visible{
  outline:3px solid rgba(255,122,26,.35);
  border-radius:999px;
}