/* =========================================================
   FEIN · Neon Futurism — Clean, Unified (Desktop/Mobile)
   ========================================================= */

/* ---------- Theme Vars ---------- */
:root{
  --bg:#05070b; --bg-2:#070a10;
  --panel:#0b0f14; --panel-2:#0c1219;
  --ink:#e9eefb; --ink-soft:#cfd8ec; --muted:#9aa6bd;
  --line:#172033;

  --accent:#ff7a1a;      /* orange glow */
  --accent-2:#ffb36f;    /* softer orange */
  --cyan:#37d3ff; --vio:#b26bff;
  --good:#10b981; --bad:#ef4444;

  --shadow-xl:0 40px 80px rgba(0,0,0,.6);
  --shadow-lg:0 28px 60px rgba(0,0,0,.55);
  --shadow-md:0 14px 30px rgba(0,0,0,.4);
  --shadow-sm:0 8px 18px rgba(0,0,0,.3);

  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --speed:180ms;

  --step--1: clamp(.80rem,.78rem + .2vw,.9rem);
  --step-0:  clamp(.95rem,.90rem + .4vw,1.05rem);
  --step-1:  clamp(1.10rem,1.00rem + .6vw,1.25rem);
  --step-2:  clamp(1.30rem,1.10rem + .9vw,1.55rem);
  --step-3:  clamp(1.60rem,1.30rem + 1.2vw,1.95rem);
  --step-4:  clamp(2.00rem,1.60rem + 1.6vw,2.40rem);
  --step-5:  clamp(2.50rem,1.90rem + 2.2vw,3.00rem);

  --content:1200px;
  --gut: clamp(12px,1.5vw,24px);

  /* Header potency hue (for ring + glow) */
  --potency-hue: 120;
  --potency-pct: .4;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,122,26,.08), transparent 60%),
    radial-gradient(900px 420px at 80% 0%, rgba(55,211,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  font:14px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
.hidden,[hidden]{ display:none !important }

/* Utilities */
.spacer{ flex:1 } .center{text-align:center} .muted{color:var(--muted)}
.wrap{ max-width:1280px; margin:0 auto; padding:14px }

/* ---------- Container / Columns ---------- */
.container{ width:min(100%,var(--content)); margin-inline:auto; padding:max(16px,env(safe-area-inset-top)) var(--gut) 80px; }
.grid{ display:grid; gap:14px; grid-template-columns:2fr 1fr; align-items:start }
.left-col, .right-col{ display:grid; gap:var(--gut) }
@media (max-width:980px){ .grid{ grid-template-columns:1fr } }

/* =========================================================
   Brand Header (FF logo left, FEIN centered, potency tight)
   ========================================================= */
.brand{
  --text:#fff;
  display:grid; grid-template-columns:auto 1fr;
  align-items:start; gap:clamp(12px,3vw,28px);
  padding:clamp(10px,2vw,16px);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  outline:1px solid rgba(255,255,255,.08);
  position:relative; overflow:clip;
}
.brand::after{
  content:""; position:absolute; inset:-40%;
  background: conic-gradient(from 0deg,
    hsla(var(--potency-hue),95%,55%,.12),
    transparent 25%,
    hsla(var(--potency-hue),95%,55%,.12),
    transparent 55%,
    hsla(var(--potency-hue),95%,55%,.12));
  filter: blur(60px) saturate(120%);
  animation:brand-swirl 18s linear infinite; pointer-events:none;
}
@keyframes brand-swirl{ to{ transform:rotate(360deg) } }

/* FF logo (bigger, pinned) */
.brand-logo{ align-self:start; z-index:1; }
.brand-logo img{
  height:72px; width:auto; border-radius:12px; object-fit:cover;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:transform .18s ease, filter .18s ease;
}
.brand-logo:hover img{ transform:translateY(-1px) scale(1.02); filter:brightness(1.06); }

/* Center column: accept .brand-center OR .brand-inner */
.brand-center, .brand-inner{
  display:flex; flex-direction:column; align-items:center;
  gap: clamp(8px,1.6vw,12px); z-index:1;
}

/* FEIN logo centered above potency */
.fein-logo-link{ display:inline-flex; align-items:center; justify-content:center; }
.fein-logo{
  height:64px; width:auto; object-fit:contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.35));
  transition: transform .25s ease, filter .25s ease;
}
.fein-logo-link:hover .fein-logo{
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 10px 28px hsla(var(--potency-hue),90%,55%,.45));
}

/* Potency row (tight badge + chip) */
.potency-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:2px; }
.potency-badge{
  position:relative; isolation:isolate;
  width: clamp(64px, 9.5vw, 88px); aspect-ratio:1/1;
  border:0; border-radius:50%; cursor:pointer;
  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,.08) 45%, rgba(0,0,0,.25)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  outline:1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 18px 36px rgba(0,0,0,.28);
  transition:transform .16s ease, filter .16s ease;
}
.potency-badge:hover{ transform:translateY(-1px) scale(1.02); filter:saturate(1.06) }
.potency-badge.ghost{ opacity:.55; filter:grayscale(.2) brightness(.95) }
.potency-badge .ring{
  position:absolute; inset:-2px; border-radius:50%;
  background: conic-gradient(from 0turn,
    hsla(var(--potency-hue),96%,58%,calc(.55 + .45*var(--potency-pct))) 0 14%,
    hsla(var(--potency-hue),96%,58%,0) 15% 45%,
    hsla(var(--potency-hue),96%,58%,calc(.45 + .35*var(--potency-pct))) 46% 60%,
    hsla(var(--potency-hue),96%,58%,0) 61% 100%);
  filter: blur(.6px) saturate(120%);
  mask: radial-gradient(closest-side, transparent 68%, #000 69%);
  animation:pot-spin 10s linear infinite;
}
@keyframes pot-spin{ to{ transform:rotate(1turn) } }
.potency-badge .level-num{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  font-size: clamp(26px,3.6vw,32px); color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.45), 0 0 18px rgba(255,255,255,.14);
}

/* Tight inline label */
.potency-chip{
  display:inline-flex; align-items:center; height:34px;
  padding:0 10px 0 8px; border-radius:999px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#e9ebee; background:rgba(255,255,255,.08);
  outline:1px solid rgba(255,255,255,.12); white-space:nowrap; user-select:none;
}

/* Caption */
.potency-caption{ text-align:center; margin-top:2px; }
#potencyTier{
  margin:0; font-weight:800; font-size:clamp(18px,3.2vw,22px);
  background: linear-gradient(90deg, hsla(var(--potency-hue),96%,72%,1), #fff 35%, hsla(var(--potency-hue),96%,72%,1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}
#potencyTag{ margin:.2rem 0 0; color:var(--muted) }

/* Mobile header */
@media (max-width:720px){
  .brand{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .brand-logo{ justify-self:start; }
}

/* =========================================================
   Cards / Buttons / Controls / Tables (single concise set)
   ========================================================= */
.card,.panel{
  background: linear-gradient(180deg, rgba(18,24,33,.85), rgba(12,17,25,.85));
  border:1px solid #121a27; border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); padding:16px; color:var(--ink);
}
.card + .card{ margin-top:14px; }

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;
}
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{
  --bg:#101826; --bd:#1b2942;
  appearance:none; border:1px solid var(--bd);
  background:linear-gradient(180deg,var(--bg),#0b121c);
  color:var(--ink); padding:10px 14px; border-radius:12px;
  font-size:var(--step-0); font-weight:600; line-height:1;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  transition: transform var(--speed) ease, box-shadow var(--speed) ease, border-color var(--speed) ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-1px); border-color:#2a3c63; box-shadow:0 10px 24px rgba(0,0,0,.45) }
.btn:active{ transform:translateY(0) }
.btn.acc{
  background:linear-gradient(180deg,#1b1008,#140c07); border-color:#3a250f; color:#ffd8b8;
  box-shadow:0 0 0 1px rgba(255,122,26,.25) inset, 0 6px 20px rgba(255,122,26,.25);
}
.btn.ghost{ background:transparent; border-color:#24324e; color:var(--ink-soft) }

.tabs,.mini-tabs{
  background:rgba(12,17,25,.7); border:1px solid #141d2c; border-radius:var(--r-md);
  padding:6px; display:flex; gap:6px; flex-wrap:wrap;
}
.tab,.m-tab{
  background:transparent; color:var(--ink-soft); border:1px solid transparent;
  padding:10px 12px; border-radius:10px; font-weight:600; cursor:pointer;
  transition: background var(--speed), color var(--speed), border-color var(--speed);
}
.tab[aria-selected="true"], .m-tab[aria-selected="true"]{
  color:#ffe9d6; background:linear-gradient(180deg, rgba(255,122,26,.10), rgba(255,122,26,.06));
  border-color:rgba(255,122,26,.35); box-shadow:0 0 0 1px rgba(255,122,26,.15) inset;
}

/* Tables */
.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--step-0) }
.table th,.table td{ padding:12px; border-bottom:1px solid #101824; color:var(--ink); text-align:left; vertical-align:middle }
.table th{ color:#cfe0ff; font-weight:700 }
.table tr:hover td{ background: rgba(17,25,37,.45) }
.table img{ max-height:24px; height:auto } /* safety */

/* Player avatar sizes */
:root{ --ava-team:24px; --ava-player:26px; --ava-radius:6px }
.col-logo{ width: calc(var(--ava-team) + 12px) }
.pp-ava{ width:var(--ava-team); height:var(--ava-team); border-radius:var(--ava-radius); object-fit:cover; vertical-align:middle; background:#f2f2f2 }
.pp-ava.player{ width:var(--ava-player); height:var(--ava-player); border-radius:50% }

/* Reaction pills */
:root{
  --pill-bg:#0f141b; --pill-fg:#d7e2ff; --pill-ring:rgba(255,255,255,.10);
  --pill-pad-y:4px; --pill-pad-x:10px; --pill-gap:8px; --pill-radius:999px; --pill-hover:rgba(255,255,255,.14);
  --cnt-bg:rgba(255,255,255,.10); --cnt-weight:700;
}
.react-pills{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pill-gap) }
.react-pill,.share-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:var(--pill-pad-y) var(--pill-pad-x); border-radius:var(--pill-radius);
  border:1px solid var(--pill-ring); background:var(--pill-bg); color:var(--pill-fg);
  font-size:12px; line-height:1; cursor:pointer; transition: background .15s, border-color .15s, transform .02s;
}
.react-pill:hover,.share-pill:hover{ background:var(--pill-hover) }
.react-pill:focus-visible,.share-pill:focus-visible{ outline:0; border-color:#5b8cff; box-shadow:0 0 0 3px rgba(91,140,255,.25) }
.react-pill .cnt{ min-width:20px; text-align:center; padding:2px 6px; border-radius:10px; background:var(--cnt-bg); font-weight:var(--cnt-weight) }
.react-pill[data-react="fire"]{ border-color:rgba(255,160,50,.35) }
.react-pill[data-react="fish"]{ border-color:rgba(0,200,255,.35) }
.react-pill[data-react="trash"]{ border-color:rgba(255,80,120,.35) }
/* ==== Header layout: FF left, FEIN right, pill+label centered ==== */

/* Make header a positioning context + center the middle stack */
header.brand{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;                 /* center pill + caption */
  padding: clamp(16px, 2.5vw, 24px) clamp(16px, 2.5vw, 24px) clamp(20px, 3vw, 28px);
}

/* FF site logo (first link in header) — big, pinned top-left */
header.brand > a:first-of-type{
  position: absolute;
  top: clamp(10px, 2.4vw, 18px);
  left: clamp(10px, 2.4vw, 18px);
  z-index: 2;
}
header.brand > a:first-of-type img{
  height: clamp(72px, 9vw, 110px);
  width: auto;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* FEIN (dopest) logo — big, pinned top-right */
.fein-logo-link{
  position: absolute;
  top: clamp(6px, 1.8vw, 16px);
  right: clamp(10px, 2.4vw, 18px);
  z-index: 2;
  display: block;
}
.fein-logo{
  height: clamp(100px, 12vw, 150px);
  width: auto;
  filter: drop-shadow(0 0 34px rgba(255,122,26,.35));
}

/* Pill + title stack in the center */
.potency-row,
.potency-socket{
  display: flex;
  flex-direction: column;              /* stack */
  align-items: center;
  gap: 8px;
}
.potency-caption{ text-align: center; margin-top: 2px; }

/* Bigger pill */
.potency-badge{
  width: clamp(96px, 12.5vw, 132px);
  aspect-ratio: 1 / 1;
}

/* Remove the plain "TEAM POTENCY" text */
.potency-chip,                      /* if present */
.potency-socket .level-label{       /* your current label */
  display: none !important;
}

/* Tighten things on small screens */
@media (max-width: 720px){
  header.brand > a:first-of-type img{ height: 64px; }
  .fein-logo{ height: 78px; }
  .potency-badge{ width: 92px; }
}
.roster-divider {
  border: 0;
  border-top: 1px solid var(--border, rgba(255,255,255,0.12));
  margin: 6px 0 2px;
  opacity: .8;
}
tr.team-total td {
  border-top: 1px solid var(--border, rgba(255,255,255,0.2));
  padding-top: 8px;
}
/* Visual highlight for selected team row in League box */
.opp-row.selected {
  outline: 2px solid var(--accent, #4ea1ff);
  outline-offset: 0;
  background: rgba(78,161,255,.08);
}
/* App Start */
/* .hidden { display: none !important; } */
.install-fein-btn {
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: .65rem 1rem;
  font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  background: #2d7df4;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.install-fein-btn:hover { transform: translateY(-1px); }
.install-fein-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.install-fein-btn:disabled { opacity: .6; cursor: default; }

@media (prefers-color-scheme: dark) {
  .install-fein-btn { background: #3a86ff; }
}
.install-banner {
  display: flex;
  justify-content: center;
  padding: 0.75rem;
  background: var(--panel-1, #111827);
}
.install-banner .install-fein-btn {
  font-size: 15px;
}
button[data-install-fein] {
  display: inline-flex; /* or block if you want full width */
  justify-content: center;
  align-items: center;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent, #2563eb);
  color: #fff;
  border: none;
}

/* App End */

.btn-logout {
  background: #b91c1c; /* red-700 */
  color: #fff;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: filter .2s ease;
}
.btn-logout:hover {
  filter: brightness(1.15);
}
/* ===== Opponents header pill row ===== */
.pill-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:#0e1524; color:#e6edf7; font-weight:700; font-size:13px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  white-space:nowrap;
}
.pill--league{ opacity:.95 }
.pill--action{
  cursor:pointer; user-select:none;
  background:linear-gradient(180deg,#ffb476,#ff8e38); color:#1a0f07;
  border-color:rgba(0,0,0,.25);
}
.pill--action:hover{ filter:brightness(1.06) }
.pill .ico{ font-size:14px; line-height:1; }