/* ---------- Theme ---------- */
:root{
  --bg:#0b0b0b;
  --panel: rgba(255,255,255,0.06);
  --glass-stroke: rgba(255,255,255,0.18);
  --txt:#f6f6f6;
  --muted:#c7c7c7;
  --orange:#ff7a18;
  --orange-strong:#ff8c32;
  --good:#39d98a;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--txt); background:var(--bg); overflow-x:hidden;
}
.container{ width:min(1200px,92vw); margin-inline:auto }

/* ---------- Background ---------- */
.bg-mesh{
  position:fixed; inset:-10vmax; z-index:-3;
  background:
    radial-gradient(40vmax 40vmax at 15% 15%, rgba(255,122,24,.15), transparent 60%),
    radial-gradient(50vmax 50vmax at 85% 25%, rgba(255,122,24,.08), transparent 60%),
    radial-gradient(55vmax 55vmax at 50% 90%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #0b0b0b 0%, #0a0a0a 100%);
  filter:saturate(1.1);
  animation: meshShift 20s ease-in-out infinite alternate;
}
@keyframes meshShift{ 0%{ transform:translateY(0)} 100%{ transform:translateY(-2vh)} }
.grid-overlay{
  position:fixed; inset:0; z-index:-2;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/40px 40px;
  mask-image: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.9), transparent 80%);
  pointer-events:none;
}
.orbs{ position:fixed; inset:0; z-index:-1; pointer-events:none }
.orb{ position:absolute; width:28vmax; height:28vmax; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,122,24,.20), rgba(255,122,24,0) 70%);
  filter: blur(30px); animation: float 14s ease-in-out infinite }
.o1{ top:10%; left:-8%; animation-delay:-2s }
.o2{ bottom:-10%; right:-6%; animation-duration:18s }
.o3{ top:55%; left:60%; width:22vmax; height:22vmax; animation-duration:16s }
@keyframes float{ 0%{ transform: translate(0,0) } 50%{ transform: translate(2vmax,-1vmax) } 100%{ transform: translate(-1vmax,1vmax) } }

/* ---------- Header ---------- */
.header{
  display:flex; align-items:center; justify-content:space-between; padding:24px 0;
}
.brand{ display:flex; gap:.6rem; align-items:center; color:var(--txt); text-decoration:none }
.logo{ height:80px; width:auto }
.nav{ display:flex; gap:1rem; align-items:center }
.nav a{ color:var(--txt); text-decoration:none; opacity:.9; padding:.6rem .9rem; border-radius:10px; transition:.25s }
.nav a:hover{ background: rgba(255,122,24,.12); opacity:1; }

/* ---------- Glass elements ---------- */
.glass{
  background: var(--panel);
  border: 1px solid var(--glass-stroke);
  border-radius: 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color:var(--txt); font-weight:700; transition:.2s }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,122,24,.25) }
.btn.outline{ background:transparent; border-color: rgba(255,255,255,.22) }

/* ---------- Hero ---------- */
.hero{
  display:grid; grid-template-columns: 1.2fr .8fr; align-items:center; gap:1rem;
  padding:1rem; margin-top:.2rem;
}
.accent{ color:var(--orange-strong); text-shadow: 0 0 16px rgba(255,122,24,.35) }
.muted{ color:var(--muted) }
.tabs{ display:flex; gap:.5rem; margin-top:.6rem }
.tab{
  appearance:none; border:none; cursor:pointer; padding:.45rem .9rem; border-radius:999px; font-weight:800;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--txt); transition:.2s;
}
.tab:hover{ transform: translateY(-1px); border-color: rgba(255,122,24,.45); box-shadow: 0 10px 26px rgba(255,122,24,.22) }
.tab.active{ background: linear-gradient(135deg, rgba(255,122,24,.32), rgba(255,122,24,.12)); border-color: rgba(255,122,24,.55); color:#fff }

/* flare */
.flare {
  position: relative;
  width: 220px;
  height: 220px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer animated rings */
.flare .ring,
.flare .r2 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 10px solid transparent;
  background: conic-gradient(
    from 0deg,
    rgba(255,122,24,0) 0 55%,
    rgba(255,122,24,.8) 55% 72%,
    rgba(255,122,24,0) 72% 100%
  ) border-box;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 0);
  filter: blur(.3px) saturate(1.1);
  animation: sweep 6s ease-in-out infinite;
}
.flare .r2 {
  transform: scale(.86) rotate(20deg);
  animation-duration: 7.5s;
  opacity: .7;
}

/* Inner glowing aura */
.flare::before {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(255,122,24,.3) 0%,
    rgba(255,122,24,.05) 70%,
    transparent 100%
  );
  filter: blur(20px);
  animation: pulse 4s ease-in-out infinite;
}

/* Spark behind trophy */
.flare .spark {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,122,24,.25), transparent 70%);
  filter: blur(12px);
  animation: pulse 3.5s ease-in-out infinite;
}

/* Center card */
.flare .center {
  position: relative;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 30px rgba(255,122,24,.25), inset 0 0 20px rgba(255,255,255,.05);
  animation: float 6s ease-in-out infinite;
}

/* Trophy styling */
.flare .center img {
  width: 70px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255,122,24,.7));
  animation: emberPulse 3s ease-in-out infinite;
}

/* Animations */
@keyframes sweep { 0%,100% { rotate:0deg } 50% { rotate:180deg } }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes emberPulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255,122,24,.5)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(255,122,24,.9)); }
}

/* ---------- Panels ---------- */
.panels{ display:grid; gap:1rem; margin-top:1rem }
.panel{ padding:1rem }
.hidden{ display:none !important }

.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem }
.filters{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }
.search{ display:flex; align-items:center; gap:.4rem; padding:.45rem .6rem; border-radius:12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06) }
.search svg{ width:18px; height:18px; stroke:currentColor; fill:none; opacity:.8 }
.search input{ background:transparent; border:none; outline:none; color:var(--txt); font-weight:600; min-width:220px }
.select{ display:flex; align-items:center; gap:.4rem; padding:.45rem .6rem; border-radius:12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06) }
.select select{ background:transparent; border:none; color:var(--txt); font-weight:700 }

/* table */
/* Hide scrollbar but keep scroll functionality */
.table-wrap {
  max-height: 540px;
  overflow: auto;
  border-radius: 16px;

  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.table-wrap::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.table{ width:100%; border-collapse:separate; border-spacing:0 }
.table thead th{
  position:sticky; top:0; background: rgba(20,20,20,.85);
  backdrop-filter: blur(8px); text-align:left; font-weight:800; padding:.6rem .7rem; z-index:1;
}
.table tbody tr{ transition: transform .12s ease, background .12s ease }
.table td{ padding:.55rem .7rem; border-bottom:1px solid rgba(255,255,255,.1) }
.table tr:hover{ transform: translateY(-2px); background: rgba(255,255,255,.03) }
.you{ color: var(--orange-strong); font-weight:800 }

/* Subjects layout */
.sub-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:.8rem }
.card{ padding:1rem }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem }

.chips {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

.chips .chip {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--txt);

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);

  transition: transform .15s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}

.chips .chip:hover {
  transform: translateY(-2px);
  border-color: rgba(255,122,24,.45);
  box-shadow: 0 10px 26px rgba(255,122,24,.25);
}

.chips .chip.active {
  background: linear-gradient(135deg, rgba(255,122,24,.35), rgba(255,122,24,.15));
  border-color: rgba(255,122,24,.55);
  color: #fff;
  text-shadow: 0 0 12px rgba(255,122,24,.35);
}

.your-block{ display:grid; gap:.6rem }
.kpi .big{ font-size:2rem; font-weight:800 }
.kpi .sub{ color:var(--muted) }
.meter{ height:12px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); overflow:hidden }
.meter span{ display:block; height:100%; width:var(--p,0%); background: linear-gradient(90deg, rgba(255,122,24,.35), rgba(255,122,24,.85)); transition: width .35s ease }
.row-detail{ display:flex; align-items:center; justify-content:space-between }

.mini-table{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem }
.mini-table li{
  display:grid; grid-template-columns: 32px 1fr 70px; align-items:center; gap:.6rem;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  padding:.55rem .7rem; border-radius:12px;
}
.mini-table .rank{ text-align:center; font-weight:800 }
.mini-table .elo{ justify-self:end; color: var(--orange-strong); font-weight:800 }

/* Footer */
.footer{
  display:flex; align-items:center; justify-content:space-between; padding:24px 0 40px; color:var(--muted)
}
.foot-nav{ display:flex; gap:1rem }
.foot-nav a{ color:var(--muted); text-decoration:none }
.foot-nav a:hover{ color:var(--txt) }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
  opacity:0; padding:.7rem 1rem; border-radius:14px; border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color:var(--txt); transition:.35s ease; z-index:20
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* Motion */
.fade-in{ opacity:0; transform: translateY(16px); animation: fadeUp .9s ease-out forwards }
@keyframes fadeUp{ to{ opacity:1; transform: translateY(0) } }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr }
  .sub-grid{ grid-template-columns: 1fr }
}
@media (max-width: 640px){
  .nav a:not(.btn){ display:none }
  .search input{ min-width: 140px }
}