/* /assets/css/member.css */

/* Keep tables inside cards from overflowing vertically */
.table-scroll { max-height: 650px; overflow-y: auto; }
.table-scroll::-webkit-scrollbar { width: 0; background: transparent; }

/* Ensure first cell nickname layout looks neat */
#members td.nickname { display: flex; align-items: center; gap: 0.5rem; }

/* Optional: tighten the “Rank” cell’s inline image a touch */
#members td img.inline { vertical-align: text-bottom; }

/* Nothing else here on purpose — neon table skin lives in droplog.css */

/* ========== Energy Bar (Jedi CC) ========== */
.energy {
  --rail-h: 18px;
  --rail-r: 999px;
  --rail-bg: rgba(15,23,42,.65);
  --rail-brd: rgba(148,163,184,.25);
  --seg-gap: 2px;        /* visual “segments” */
  --tick-color: rgba(255,255,255,.06);

  --fill-grad: linear-gradient(90deg,#60a5fa 0%, #22d3ee 35%, #34d399 65%, #facc15 100%);
  --fill-glow: 0 0 10px rgba(56,189,248,.45), 0 0 18px rgba(56,189,248,.25);

  --max-grad: linear-gradient(90deg,#f59e0b 0%,#fbbf24 35%,#fde047 70%,#fff 100%);
  --max-glow: 0 0 14px rgba(250,204,21,.55), 0 0 24px rgba(250,204,21,.35);

  display: grid;
  gap: .35rem;
  color: #d1d5db;
  font-size: .875rem;
}

/* top labels */
.energy-top{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.75rem;color:#cbd5e1
}
.energy-pill{
  display:inline-block;padding:.15rem .5rem;border-radius:999px;
  font-size:.7rem;letter-spacing:.2px;background:rgba(148,163,184,.15);
  border:1px solid rgba(148,163,184,.25)
}
.energy-pill--max{background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.35);color:#fde68a}

/* row with icons + rail */
.energy-row{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center}
.energy-icon{width:28px;height:28px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.energy-rail{
  position:relative;height:var(--rail-h);border-radius:var(--rail-r);
  background:linear-gradient(#0000,#0000), var(--rail-bg);
  border:1px solid var(--rail-brd);
  overflow:hidden;isolation:isolate;
}

/* subtle segment grid */
.energy-grid{
  position:absolute;inset:0;pointer-events:none;mix-blend:screen;opacity:.9;
  background:
    repeating-linear-gradient(90deg,
      var(--tick-color) 0, var(--tick-color) 1px,
      transparent 1px, transparent calc(10% - var(--seg-gap)));
}

/* the fill */
.energy-fill{
  position:absolute;inset:0 auto 0 0;width:0%;
  background: var(--fill-grad);
  box-shadow: var(--fill-glow);
  border-radius:var(--rail-r);
  animation: energy-grow .9s ease forwards, energy-sheen 2.4s linear .6s infinite;
  transform: translateZ(0);
}
.energy-rail.is-max .energy-fill{
  background: var(--max-grad);
  box-shadow: var(--max-glow);
}

/* moving shimmer overlay */
.energy-fill::after{
  content:"";position:absolute;inset:0;
  background: linear-gradient(90deg, transparent 0%,
    rgba(255,255,255,.18) 45%, rgba(255,255,255,.32) 50%,
    rgba(255,255,255,.18) 55%, transparent 100%);
  left:-60%; width:60%;
  filter: blur(.5px);
  opacity:.0; /* becomes visible via animation */
}

/* glow spark at the front */
.energy-spark{
  position:absolute;top:50%;translate:-50% -50%;
  width:12px;height:12px;border-radius:50%;
  background:#fff; opacity:.9; pointer-events:none;
  box-shadow:
    0 0 10px rgba(255,255,255,.9),
    0 0 24px rgba(56,189,248,.65),
    0 0 36px rgba(56,189,248,.4);
}
.energy-rail.is-max .energy-spark{
  box-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 26px rgba(250,204,21,.75),
    0 0 42px rgba(250,204,21,.5);
}

/* status text */
.energy-status{font-size:.72rem;margin-top:.1rem}
.energy-status__text {
  color: #e0faff; /* very light cyan, almost white */
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow:
    0 0 2px rgba(56,189,248,.9),
    0 0 4px rgba(56,189,248,.65),
    0 0 6px rgba(56,189,248,.45);
  animation: energy-status-glow 3s ease-in-out infinite;
}
}.energy-status__text--max{color:#fde68a;text-shadow:0 0 6px rgba(250,204,21,.55)}
/* ---- Fix stacking + soften segments ---- */
.energy-rail { position: relative; }
.energy-fill  { position:absolute; inset:0 auto 0 0; z-index: 2; }
.energy-spark { z-index: 3; }
.energy-grid  { z-index: 1; opacity: .18; mix-blend-mode: overlay; } /* was .9 + screen */

/* Optional: if you want fewer/lighter segments */
.energy-grid {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.10) 0,
      rgba(255,255,255,.10) 1px,
      transparent 1px,
      transparent 12%
    );
}
@keyframes energy-status-glow {
  0%,100% {
    text-shadow:
      0 0 2px rgba(56,189,248,.9),
      0 0 4px rgba(56,189,248,.65),
      0 0 6px rgba(56,189,248,.45);
  }
  50% {
    text-shadow:
      0 0 3px rgba(56,189,248,1),
      0 0 6px rgba(56,189,248,.75),
      0 0 9px rgba(56,189,248,.55);
  }
}
/* One-click way to hide segments entirely when desired */
.energy-rail.no-segs .energy-grid { display: none; }
/* animations */
@keyframes energy-grow{
  from{ width:0% }
  to  { width: calc(var(--pct) * 1%) }
}
@keyframes energy-sheen{
  0%   { opacity:.0 }
  10%  { opacity:.75; transform: translateZ(0) }
  60%  { opacity:.0;  transform: translateX(160%) }
  100% { opacity:.0 }
}
.energy-rail.is-max .energy-fill{ animation-duration:1.2s }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .energy-fill{ animation:none; width: calc(var(--pct) * 1%) }
  .energy-fill::after{ display:none }
  .energy-spark{ display:none }
}

/* make the rail a hard clip box */
.energy-rail{
  overflow: hidden;
  box-sizing: border-box;
}

/* use transform-based progress so it never overshoots */
.energy-fill{
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);                 /* start collapsed */
  animation: energy-grow .9s ease forwards, energy-sheen 2.4s linear .6s infinite;
}

/* animate to the exact % using scaleX instead of width */
@keyframes energy-grow{
  to { transform: scaleX(calc(var(--pct) / 100)); }
}

/* keep the spark within bounds even at 0%/100% */
.energy-spark{
  left: clamp(0%, calc(var(--pct) * 1%), 100%);
}

/* (optional) if you still see any edge bleed from borders */
.energy-fill{ border-right: 0 } /* border is on the rail already */
/* ===== Jedi CC theme + spacey vibe patch ===== */
.energy{
  /* site palette */
  --c-cyan:  #38bdf8;  /* neon cyan */
  --c-teal:  #22d3ee;
  --c-green: #34d399;
  --c-gold:  #facc15;
  --c-rail:  rgba(2,6,23,.72);   /* deeper rail bg to match cards */
  --c-brd:   rgba(148,163,184,.22);

  --fill-grad: linear-gradient(90deg,var(--c-cyan) 0%, var(--c-teal) 35%, var(--c-green) 65%, var(--c-gold) 100%);
  --fill-glow: 0 0 10px rgba(56,189,248,.45), 0 0 18px rgba(56,189,248,.25);
  --max-grad:  linear-gradient(90deg,#f59e0b 0%,#fbbf24 35%,#fde047 70%,#fff 100%);
  --max-glow:  0 0 14px rgba(250,204,21,.55), 0 0 24px rgba(250,204,21,.35);
}

/* deepen rail + border to match cards */
.energy-rail{
  background: var(--c-rail);
  border-color: var(--c-brd);
}

/* subtle drifting starfield behind the fill */
.energy-rail::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(2px 2px at 10% 30%, rgba(255,255,255,.22) 0 60%, transparent 61%) ,
    radial-gradient(1.5px 1.5px at 55% 70%, rgba(255,255,255,.18) 0 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 82% 40%, rgba(255,255,255,.14) 0 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 28% 85%, rgba(255,255,255,.14) 0 60%, transparent 61%);
  transform: translateX(0);
  animation: energy-stars 12s linear infinite;
  opacity:.55;
  mix-blend-mode:screen;
}

/* shimmer stays as-is on .energy-fill::after from previous CSS */

/* breathing glow on the bar */
.energy-fill{
  animation:
    energy-grow .9s ease forwards,
    energy-breathe 4.5s ease-in-out 1.2s infinite; /* soft glow loop */
}

/* brighter cyan->gold spark + gentle pulse */
.energy-spark{
  box-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 26px rgba(56,189,248,.75),
    0 0 42px rgba(56,189,248,.45);
  animation: energy-spark-pulse 2.4s ease-in-out infinite;
}
.energy-rail.is-max .energy-spark{
  box-shadow:
    0 0 12px rgba(255,255,255,.95),
    0 0 28px rgba(250,204,21,.85),
    0 0 46px rgba(250,204,21,.55);
}

/* lighten the segment grid just a touch */
.energy-grid{ opacity:.14; }

/* animations */
@keyframes energy-stars {
  from { transform: translateX(0) }
  to   { transform: translateX(-12%) } /* slow drift */
}
@keyframes energy-breathe {
  0%,100% { filter: drop-shadow(0 0 0 rgba(56,189,248,0)) }
  50%     { filter: drop-shadow(0 0 8px rgba(56,189,248,.35)) }
}
@keyframes energy-spark-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1) }
  50%     { transform: translate(-50%,-50%) scale(1.12) }
}

/* reduced-motion: keep the look, ditch the loops */
@media (prefers-reduced-motion: reduce){
  .energy-rail::before,
  .energy-fill,
  .energy-spark{ animation: none !important; }
}
/* Base stat header */
.stat-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .35rem;
}

/* Cyan variant */
.stat-header--cyan {
  background: linear-gradient(90deg,#38bdf8 0%,#22d3ee 50%,#34d399 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: statHeaderSweep 6s linear infinite;
  text-shadow:
    0 0 3px rgba(56,189,248,.85),
    0 0 6px rgba(56,189,248,.55);
  border-bottom: 1px solid rgba(56,189,248,0.25);
}

/* Gold variant */
.stat-header--gold {
  background: linear-gradient(90deg,#facc15 0%,#fbbf24 50%,#fde047 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: statHeaderSweep 6s linear infinite;
  text-shadow:
    0 0 3px rgba(250,204,21,.85),
    0 0 6px rgba(250,204,21,.55);
}

/* ICON glow — stronger than text */
.stat-header [aria-hidden] {
  font-size: 1rem;
  opacity: 1;
  -webkit-text-fill-color: currentColor; /* keep emoji visible */
  filter: drop-shadow(0 0 6px currentColor)
          drop-shadow(0 0 12px currentColor);
}

/* Stat amount gold */
.stat-amount--gold {
  color: #facc15;
  text-shadow:
    0 0 2px rgba(250,204,21,.85),
    0 0 5px rgba(250,204,21,.55);
}

/* Meta line */
.stat-meta {
  color: #94a3b8;
  font-size: .72rem;
}

/* Sweep animation */
@keyframes statHeaderSweep {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.stat-header [aria-hidden] {
  font-size: 1rem;
  opacity: .9;
  -webkit-text-fill-color: currentColor; /* keep emoji visible */
}

/* Header text (already glowy) stays as-is */

/* Icons inside stat headers — softer control */
.stat-header [aria-hidden] {
  font-size: 1rem;
  opacity: .9;
  -webkit-text-fill-color: currentColor; /* keep emoji visible */
}

/* ultra subtle glow (default) */
.icon-glow-subtle {
  filter: drop-shadow(0 0 1px currentColor) !important;
}

/* balanced glow (slightly brighter, still soft) */
.icon-glow-balanced {
  filter: drop-shadow(0 0 1px currentColor)
          drop-shadow(0 0 2px currentColor) !important;
}

/* stronger (if you ever want more) */
.icon-glow-strong {
  filter: drop-shadow(0 0 2px currentColor)
          drop-shadow(0 0 4px currentColor) !important;
}
.icon-glow-none {
  filter: none !important;
}
/* Active segmented button style */
.active-btn{
  color:#fff !important;
  background: linear-gradient(180deg,#1fb6ff 0%, #0ea5e9 100%) !important;
  border-color: rgba(56,189,248,.6) !important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,.35),
    0 8px 22px rgba(56,189,248,.25),
    inset 0 0 0 1px rgba(255,255,255,.08);
}