: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;
  --bad:#ff5d5d;
  --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(1100px,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,0.15), transparent 60%),
    radial-gradient(50vmax 50vmax at 85% 25%, rgba(255,122,24,0.08), transparent 60%),
    radial-gradient(55vmax 55vmax at 50% 90%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, #0b0b0b 0%, #0a0a0a 100%);
  animation:meshShift 20s ease-in-out infinite alternate; filter:saturate(1.1)
}
@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,0.04) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0/40px 40px;
  mask-image: radial-gradient(80% 60% at 50% 40%, rgba(0,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; font-weight:800 }
.logo{ height:80px }
.nav .btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:.55rem .85rem; color:var(--txt); text-decoration:none }

/* glass */
.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);
}
.glass-lite{ background: rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.15); border-radius:18px }

/* main results */
.results{ padding:1rem; margin-top:.3rem }
.head{ display:grid; gap:.3rem }
#metaLine{ display:none }
.pill {
  display:inline-block; padding:.25rem .55rem; border-radius:999px; font-size:.85rem;
  background: rgba(255,122,24,.18); border:1px solid rgba(255,122,24,.45);
  width:fit-content; white-space:nowrap;
}

/* title row with outcome chip */
.title-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
h1{ margin:.2rem 0 0 }
.accent{ color:var(--orange-strong); text-shadow:0 0 14px rgba(255,122,24,.35) }
.result-chip{
  padding:.3rem .7rem; border-radius:999px; font-weight:900; letter-spacing:.2px; font-size:.95rem;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.20);
}
.result-chip.win  { background: linear-gradient(135deg, rgba(57,217,138,.20), rgba(255,255,255,.05)); border-color: rgba(57,217,138,.45) }
.result-chip.loss { background: linear-gradient(135deg, rgba(255,93,93,.18), rgba(255,255,255,.05));  border-color: rgba(255,93,93,.45) }
.result-chip.draw { background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border-color: rgba(255,255,255,.25) }

.muted{ color:var(--muted) }

/* Enhanced ELO cards */
.elo-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:.8rem; margin:.5rem 0 .6rem }
.elo-card{
  padding:1.2rem 1.5rem; border-radius:18px;
  border:1px solid rgba(255,255,255,.25);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.3rem;
  box-shadow: 
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;
  overflow:hidden;
  min-height:90px;
}

.elo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, transparent 0%, rgba(255,255,255,.03) 50%, transparent 100%);
  pointer-events: none;
}

.elo-card .label{ 
  color:var(--muted); 
  font-weight:700; 
  font-size:.85rem;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin:0;
}

.elo-card .value{ 
  font-size:2.4rem; 
  font-weight:900; 
  line-height:1;
  margin:0;
}

.elo-card.current .value {
  background: linear-gradient(135deg, var(--txt), rgba(255,255,255,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

/* State-based styling for change card */
.elo-card.change.positive{
  background: linear-gradient(145deg, rgba(57,217,138,.25), rgba(57,217,138,.08));
  border-color: rgba(57,217,138,.6);
  box-shadow: 
    0 15px 35px rgba(57,217,138,.15),
    inset 0 1px 0 rgba(57,217,138,.3);
}

.elo-card.change.positive .value {
  color: var(--good);
  text-shadow: 0 0 20px rgba(57,217,138,.4);
}

.elo-card.change.negative{
  background: linear-gradient(145deg, rgba(255,93,93,.25), rgba(255,93,93,.08));
  border-color: rgba(255,93,93,.6);
  box-shadow: 
    0 15px 35px rgba(255,93,93,.15),
    inset 0 1px 0 rgba(255,93,93,.3);
}

.elo-card.change.negative .value {
  color: var(--bad);
  text-shadow: 0 0 20px rgba(255,93,93,.4);
}

.elo-card.change.neutral{
  background: linear-gradient(145deg, rgba(255,122,24,.25), rgba(255,122,24,.08));
  border-color: rgba(255,122,24,.6);
  box-shadow: 
    0 15px 35px rgba(255,122,24,.15),
    inset 0 1px 0 rgba(255,122,24,.3);
}

.elo-card.change.neutral .value {
  color: var(--orange);
  text-shadow: 0 0 20px rgba(255,122,24,.4);
}

/* Current ELO card styling */
.elo-card.current{
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.35);
}

@keyframes countUpReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* summary cards */
.summary{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.8rem;
  margin:.6rem 0 1rem;
}
.card.stat{
  padding:.9rem 1rem; border-radius:16px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  display:grid; gap:.35rem; text-align:center;
}
.label{ color:var(--muted) }
.big{ font-size:1.8rem; font-weight:800 }

/* outcome banner (kept for background mood only) */
.outcome{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; margin:.9rem 0;
  min-height:64px;
  border-radius:18px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  animation: fadeUp .6s ease-out both;
}
.outcome.win   { background: linear-gradient(135deg, rgba(57,217,138,.20), rgba(255,255,255,.05)); border-color: rgba(57,217,138,.45) }
.outcome.loss  { background: linear-gradient(135deg, rgba(255,93,93,.18), rgba(255,255,255,.05));  border-color: rgba(255,93,93,.45) }
.outcome.draw  { background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border-color: rgba(255,255,255,.25) }

/* versus mini */
.versus{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:.8rem; padding:.8rem }
.mini{ display:flex; gap:.6rem; align-items:center }
.mini .avatar{ width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06) }
.mini .name{ font-weight:800 }
.mini .score-box{ margin-left:auto; padding:.35rem .6rem; border-radius:10px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); font-weight:800 }
.vs-pill{ padding:.3rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,.2); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); font-weight:800 }
.dot{ width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.35); display:inline-block }

.actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin: 1rem 0 1.1rem }
.btn{
  display:inline-block; text-decoration:none; color:var(--txt);
  padding:.85rem 1.2rem; border-radius:14px; border:1px solid rgba(255,255,255,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(10px); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,122,24,.25), var(--shadow) }
.btn.primary{
  background: linear-gradient(135deg, rgba(255,122,24,.35), rgba(255,122,24,.10)), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-color: rgba(255,122,24,.45);
}
.btn.outline{ background: transparent; border-color: rgba(255,255,255,.2) }
.btn.lg{ padding:1rem 1.4rem; font-weight:800 }

/* review list */
.review{ padding:1rem; margin-top:.4rem }
.review-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem }
.review-list{ display:grid; gap:.6rem; margin:0; padding-left:1.1rem }
.review-item{
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  padding:.8rem 1rem; border-radius:14px;
}
.qtext{ font-size:1rem; margin-bottom:.4rem }
.badge{
  display:inline-block; padding:.2rem .5rem; border-radius:999px; font-size:.8rem; margin-left:.4rem;
  border:1px solid rgba(255,255,255,.2);
}
.badge.good{ color:var(--good); border-color: rgba(57,217,138,.45); background: rgba(57,217,138,.12) }
.badge.bad{ color:var(--bad); border-color: rgba(255,93,93,.45); background: rgba(255,93,93,.10) }
.choice{ margin:.2rem 0; padding:.45rem .6rem; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04) }
.choice.correct{ border-color: rgba(57,217,138,.45); background: rgba(57,217,138,.10) }
.choice.picked-wrong{ border-color: rgba(255,93,93,.45); background: rgba(255,93,93,.08) }

.row{ display:flex; gap:.45rem; flex-wrap:wrap; align-items:center }
.btn.ai{
  padding:.45rem .7rem; font-weight:600; border-radius:10px;
  border:1px solid rgba(255,122,24,.45);
  background: linear-gradient(135deg, rgba(255,122,24,.22), rgba(255,122,24,.08));
}

/* overlay for placeholder AI modal */
.overlay{ position:fixed; inset:0; background: rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:5 }
.overlay.show{ display:flex }
.modal{ width:min(720px,94vw); padding:1rem; border-radius:20px }
.ai-modal h3{ margin-top:0 }

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

/* responsive */
@media(max-width:820px){
  .summary{ grid-template-columns: 1fr }
  .brand-name{ display:none }
  .elo-grid{ grid-template-columns: 1fr } /* stack ELO cards on mobile */
}

/* Rank & RR block */
.rank-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.8rem;
  margin:.2rem 0 .6rem;
}
.rank-card{
  padding:1.2rem 1.4rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.25);
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.15);
  position: relative;
  overflow: hidden;
}

.rank-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.04) 50%, transparent 100%);
  pointer-events: none;
}

.rank-card .label{ 
  color:var(--muted); 
  font-weight:700; 
  text-transform:uppercase; 
  letter-spacing:.4px; 
  font-size:.85rem;
  margin-bottom: .8rem;
}

.pill.slim{ padding:.15rem .55rem; font-size:.8rem; }
.row.spread{ display:flex; align-items:center; justify-content:space-between; }

.rank-kpis{ display:grid; grid-template-columns: 1fr auto 1fr; gap:.8rem; align-items:center; margin:.8rem 0 .2rem }
.kpi{ text-align:center }
.kpi .mini-label{ font-size:.95rem; color:var(--muted); font-weight:700; letter-spacing:.2px }
.kpi .kpi-val{ font-weight:900; font-size:2.25rem; line-height:1.1 }
.kpi.delta .kpi-val{ color:var(--orange); text-shadow:0 0 14px rgba(255,122,24,.35) }
/* State colors for RR delta number */
.kpi.delta.positive .kpi-val{ color: var(--good); text-shadow: 0 0 14px rgba(0,200,83,.35) }
.kpi.delta.negative .kpi-val{ color: var(--bad);  text-shadow: 0 0 14px rgba(244,67,54,.35) }
.kpi.delta.neutral  .kpi-val{ color: var(--orange); text-shadow:0 0 14px rgba(255,122,24,.35) }

/* Rank card divider */
.rank-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 25%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.2) 75%, transparent 100%);
  margin: 1.2rem 2rem;
  position: relative;
}

.rank-divider::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.1) 25%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.1) 75%, transparent 100%);
}

/* Top subject ELO header */
.subj-header {
  margin-top: .4rem;
  margin-bottom: .8rem;
}

.subj-header .label {
  color: var(--muted); 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: .4px; 
  font-size: .85rem;
  margin: 0;
}

/* Top subject ELO footer */
.subj-footer {
  margin-top: .8rem;
  display: flex;
  justify-content: center;
}

.subj-footer .pill {
  font-size: .75rem;
  padding: .2rem .6rem;
}

/* Top subject ELO numbers */
.subj-elos{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem; margin-top:.2rem }
.subj-elo{
  padding: .9rem 1rem; border-radius:14px; text-align:center;
  border:1px solid rgba(255,255,255,.3);
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.08));
  box-shadow: 
    0 6px 18px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.2);
  position: relative;
  overflow: hidden;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
}
.subj-elo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.05) 50%, transparent 100%);
  pointer-events: none;
}
.subj-elo-label{
  font-size:.85rem; color:var(--muted); font-weight:700; letter-spacing:.2px; 
  text-transform: uppercase; margin:0;
}
.subj-elo-val{
  font-weight:900; font-size:1.8rem; line-height:1; color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);
  margin:0;
}

@media (max-width:820px){
  .subj-elos{ grid-template-columns: 1fr; gap: .6rem; }
  .subj-elo{ 
    padding: .8rem .9rem; 
    min-height: 70px; 
  }
  .subj-elo-val{ font-size:1.6rem; }
  .subj-elo-label{ font-size:.8rem; }
  .subj-header .label{ font-size:.8rem; }
  .subj-footer .pill{ font-size:.7rem; }
  .rank-divider{ margin: 1rem 1.5rem; }
}

/* Enhanced rank display with emblems */
.rank-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin: .8rem 0 .4rem;
}

.rank-emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.4rem;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 2px solid rgba(255,255,255,.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

.rank-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 32px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Rank-specific emblem colors */
.rank-iron .rank-icon { 
  background: linear-gradient(135deg, #8B7355, #6B5B47);
  color: #D4C4A8;
}
.rank-bronze .rank-icon { 
  background: linear-gradient(135deg, #CD7F32, #B8732D);
  color: #F4E4BC;
}
.rank-silver .rank-icon { 
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
  color: #F8F8F8;
}
.rank-gold .rank-icon { 
  background: linear-gradient(135deg, #FFD700, #FFC107);
  color: #1A1008;
}
.rank-platinum .rank-icon { 
  background: linear-gradient(135deg, #E5E4E2, #C9C9C7);
  color: #2C2C2C;
}
.rank-diamond .rank-icon { 
  background: linear-gradient(135deg, #B9F2FF, #87CEEB);
  color: #1E3A8A;
}
.rank-onyx .rank-icon { 
  background: linear-gradient(135deg, #36454F, #2F4F4F);
  color: #E0E0E0;
}
.rank-eternal .rank-icon { 
  background: linear-gradient(135deg, #9B59B6, #8E44AD);
  color: #F8F8FF;
}
.rank-apex .rank-icon { 
  background: linear-gradient(135deg, #FF6B6B, #FF5722);
  color: #FFFFFF;
  box-shadow: 0 0 20px rgba(255,107,107,.4);
}

.rank-text {
  color: var(--txt);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .2px;
  text-align: center;
}

/* Enhanced progress section */
.rank-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rr-gain {
  padding: .3rem .6rem;
  border-radius: 8px;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .1px;
}

.rr-gain.positive {
  background: linear-gradient(135deg, rgba(57,217,138,.25), rgba(57,217,138,.1));
  border: 1px solid rgba(57,217,138,.4);
  color: var(--good);
}

.rr-gain.negative {
  background: linear-gradient(135deg, rgba(255,93,93,.25), rgba(255,93,93,.1));
  border: 1px solid rgba(255,93,93,.4);
  color: var(--bad);
}

.rr-gain.neutral {
  background: linear-gradient(135deg, rgba(255,122,24,.25), rgba(255,122,24,.1));
  border: 1px solid rgba(255,122,24,.4);
  color: var(--orange);
}

.progress { 
  height: 12px; 
  border-radius: 6px; 
  background: rgba(255,255,255,.08); 
  overflow: hidden; 
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.2);
}

.progress-bar{ 
  height: 100%; 
  width: 0%; 
  background: linear-gradient(90deg, var(--orange), var(--orange-strong)); 
  transition: width .7s ease;
  box-shadow: 0 0 8px rgba(255,122,24,.3);
}

.progress-info { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .4rem;
  color: var(--muted); 
  font-size: .85rem;
  font-weight: 600;
}

.progress-fraction {
  color: var(--txt);
  font-weight: 800;
}

.rank-badges{ display:flex; align-items:center; gap:.6rem; margin:.4rem 0 .6rem; justify-content:center; }
.badge{
  padding:.45rem .8rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  font-weight:800;
}
.badge.hi{
  border-color: rgba(255,122,24,.45);
  background: linear-gradient(135deg, rgba(255,122,24,.22), rgba(255,255,255,.06));
}
/* Remove arrow since we only show current rank */
.arrow{ display: none; }

@media (max-width:820px){
  .rank-grid{ grid-template-columns: 1fr; }
  /* Slightly reduce sizes on mobile to avoid overflow */
  .kpi .mini-label{ font-size:.85rem }
  .kpi .kpi-val{ font-size:1.9rem }
  /* Rank display mobile adjustments */
  .rank-icon{ 
    width: 56px; 
    height: 56px; 
    font-size: 28px; 
    border-radius: 14px;
  }
  .rank-emblem{ 
    padding: .9rem 1.2rem; 
    border-radius: 16px;
  }
  .rank-text{ font-size: .95rem; }
}