/* ===== Baron (fluid: sizes track the viewport, fixed pit height avoids CLS) ===== */
.pit{
  position:relative;margin:6px auto clamp(8px,2.4vw,16px);
  width:clamp(190px,56vw,250px);height:clamp(150px,44vw,210px);
  display:flex;align-items:center;justify-content:center;
}
.pit-glow{
  position:absolute;width:clamp(175px,50vw,230px);height:clamp(175px,50vw,230px);border-radius:50%;
  background:radial-gradient(circle,rgba(123,47,191,.45) 0%,transparent 65%);
  animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.1);opacity:1}}
.baron{width:clamp(128px,34vw,170px);height:clamp(128px,34vw,170px);filter:drop-shadow(0 0 18px rgba(176,107,255,.6));transition:transform .1s}
/* real Baron Nashor render (transparent PNG) — tall, so size by height */
img.baron{width:auto;height:clamp(150px,42vw,205px);object-fit:contain;
  filter:drop-shadow(0 0 20px rgba(176,107,255,.65))}
/* hit feedback: a brief glow flash — the Baron stays still (no shake) */
.baron.hit{animation:hitflash .16s}
@keyframes hitflash{
  0%{filter:brightness(1.5) drop-shadow(0 0 26px rgba(176,107,255,.95))}
  100%{filter:brightness(1) drop-shadow(0 0 18px rgba(176,107,255,.6))}
}
.baron.dead{animation:die 1s forwards}
@keyframes die{to{transform:scale(.2) rotate(120deg) translateY(60px);opacity:0;filter:grayscale(1)}}


/* ===== Health bar ===== */
.hpwrap{position:relative;margin:0 auto 6px;width:100%;max-width:560px}
.hpname{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);
  margin-bottom:5px;padding:0 2px;
}
.hpname b{color:var(--void-bright);font-size:14px}
.hpbar{
  position:relative;height:clamp(24px,5.5vw,30px);border:2px solid var(--gold);border-radius:4px;
  background:#04101c;overflow:hidden;
  box-shadow:0 0 0 1px #000, inset 0 0 12px rgba(0,0,0,.8);
}
.hpfill{
  position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(180deg,#d94a4a 0%,#a01f1f 55%,#7a1414 100%);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.25);
  transition:width .12s cubic-bezier(.2,.8,.3,1);
}
/* the slice Smite is about to remove — shown in yellow, then chunked off */
.hpsmite{
  position:absolute;top:0;bottom:0;left:0;width:0;
  background:linear-gradient(180deg,#ffe14d 0%,#eab200 58%,#c99200 100%);
  box-shadow:0 0 10px rgba(255,220,60,.8), inset 0 2px 4px rgba(255,255,255,.45);
  opacity:0;transition:opacity .14s;
}
.hpsmite.show{opacity:1;animation:smitePulse .2s ease-in-out}
@keyframes smitePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* segment ticks */
.hpticks{position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent,transparent 27px,rgba(0,0,0,.35) 27px,rgba(0,0,0,.35) 28px)}
.hpnum{
  margin-top:8px;font-size:clamp(18px,4.6vw,22px);font-weight:bold;letter-spacing:1px;
  font-variant-numeric:tabular-nums;color:var(--gold-bright);
}
.hpnum small{font-size:13px;color:var(--gold);opacity:.7}

/* ===== Team (Data Dragon champion icons) ===== */
.team{display:flex;justify-content:center;gap:clamp(6px,2vw,10px);min-height:clamp(34px,9vw,44px);margin:2px 0 clamp(10px,2.6vw,14px);flex-wrap:wrap}
.team .champ{
  width:clamp(30px,9vw,40px);height:clamp(30px,9vw,40px);border-radius:50%;overflow:hidden;
  border:2px solid var(--gold);background:#04101c;
  box-shadow:0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.6);
  transition:transform .09s, box-shadow .12s, border-color .12s;
}
.team .champ img{width:100%;height:100%;object-fit:cover;display:block}
.team .champ.attacking{
  transform:translateY(-5px) scale(1.12);
  border-color:var(--void-bright);
  box-shadow:0 0 12px 2px rgba(176,107,255,.8);
}

/* ===== Smite button (in-game spell look: icon + damage number, no border) ===== */
.smitebtn{
  margin:clamp(12px,3vw,16px) auto 0;position:relative;   /* auto = centred (flex box is block-level) */
  width:clamp(92px,26vw,112px);height:clamp(92px,26vw,112px);border-radius:12px;padding:0;cursor:pointer;
  border:none;background:#0a1a2a;overflow:hidden;
  display:flex;align-items:center;justify-content:center;   /* centres the emoji fallback fluidly */
  filter:drop-shadow(0 0 12px rgba(255,140,40,.45));
  transition:transform .08s, filter .2s;
}
.smitebtn:hover{filter:drop-shadow(0 0 20px rgba(255,140,40,.8))}
.smitebtn:active{transform:scale(.94)}
.smitebtn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
/* emoji fallback when the real icon hasn't loaded */
.smitebtn .icon{font-size:clamp(46px,13vw,64px);line-height:1;filter:drop-shadow(0 0 8px rgba(255,160,40,.8))}
/* real Smite icon fills the button */
.smitebtn .icon-img{width:100%;height:100%;object-fit:cover;border:none;filter:none}
/* display gated on :not([hidden]) so the `hidden` attribute still hides them */
.smitebtn .icon:not([hidden]),
.smitebtn .icon-img:not([hidden]){display:block}
/* damage number overlaid at the bottom, like the in-game spell */
.smite-dmg{
  position:absolute;left:0;right:0;bottom:0;
  padding:3px 0 4px;text-align:center;
  font-size:clamp(17px,4.6vw,22px);font-weight:bold;letter-spacing:1px;
  color:var(--gold-bright);font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82));
  text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9);
}

/* ===== Rules (collapsible info bubble) ===== */
.rules{margin-top:16px}
.rules>summary{
  cursor:pointer;list-style:none;display:inline-block;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);opacity:.85;
  border:1px solid rgba(200,170,110,.4);border-radius:20px;padding:6px 16px;transition:.2s;
}
.rules>summary::-webkit-details-marker{display:none}
.rules>summary:hover{opacity:1;border-color:var(--gold)}
.rules[open]>summary{color:var(--gold-bright);border-color:var(--gold)}
.rules-pop{
  max-width:420px;margin:10px auto 0;
  font-size:13px;line-height:1.65;color:var(--gold);opacity:.92;
  background:rgba(10,20,32,.7);border:1px solid rgba(200,170,110,.25);
  border-radius:8px;padding:12px 16px;
}
.rules-pop b{color:var(--blue)}

/* ===== Result overlay ===== */
.result{
  margin-top:18px;min-height:70px;display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;transform:translateY(8px);transition:.3s;pointer-events:none;
}
.result.show{opacity:1;transform:none}
.result .grade{font-size:clamp(22px,6vw,30px);font-weight:bold;letter-spacing:2px}
.result .desc{font-size:clamp(13px,3.4vw,14px);color:var(--gold-bright);line-height:1.5}
.result .pvbig{
  display:block;margin:6px 0 2px;
  font-size:clamp(30px,8vw,40px);font-weight:bold;letter-spacing:1px;
  font-variant-numeric:tabular-nums;color:var(--gold-bright);
  text-shadow:0 0 22px rgba(240,230,210,.25);
}
.result .pvbig small{font-size:clamp(14px,3.6vw,16px);color:var(--gold);opacity:.75;letter-spacing:2px}
.result .again{
  margin-top:8px;pointer-events:auto;cursor:pointer;
  background:transparent;border:2px solid var(--gold);color:var(--gold-bright);
  padding:8px 22px;border-radius:4px;font-family:inherit;font-size:14px;letter-spacing:2px;
  text-transform:uppercase;transition:.2s;
}
.result .again:hover{background:var(--gold);color:#04101c}

.win{color:#8be36b;text-shadow:0 0 20px rgba(139,227,107,.5)}
.early{color:#e0b84b;text-shadow:0 0 20px rgba(224,184,75,.4)}
.steal{color:var(--danger);text-shadow:0 0 20px rgba(224,75,75,.5)}

/* ===== Scores ===== */
.scores{margin-top:14px;font-size:12px;letter-spacing:2px;color:var(--gold);opacity:.75}
.scores b{color:var(--void-bright)}

/* ===== Ko-fi support button ===== */
.kofi{margin:clamp(18px,4vw,24px) auto 0;text-align:center;min-height:36px}
.kofi img{display:inline-block;vertical-align:middle}

/* ===== Legal (Riot Legal Jibber Jabber) ===== */
.legal{
  margin:clamp(24px,6vw,40px) auto 0;max-width:560px;
  font-size:10px;line-height:1.5;color:var(--gold);opacity:.4;text-align:center;
}

/* ===== Leaderboard ===== */
.leaderboard{margin:clamp(16px,4vw,20px) auto 0;max-width:min(340px,92vw);text-align:left}
.lb-title{text-align:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.lb-list{list-style:none;counter-reset:rank;display:flex;flex-direction:column;gap:3px}
.lb-list li{
  counter-increment:rank;display:flex;align-items:center;gap:8px;
  font-size:13px;padding:5px 10px;border-radius:4px;background:rgba(255,255,255,.03);
}
.lb-list li::before{
  content:counter(rank);width:20px;text-align:right;
  color:var(--gold);opacity:.7;font-variant-numeric:tabular-nums;
}
.lb-list li .lb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gold-bright)}
.lb-list li .lb-score{font-weight:bold;color:var(--void-bright);font-variant-numeric:tabular-nums}
.lb-list li .lb-score small{font-size:10px;font-weight:normal;color:var(--gold);opacity:.7;letter-spacing:1px}
.lb-list li.me{background:rgba(200,170,110,.14);box-shadow:inset 0 0 0 1px rgba(200,170,110,.4)}
.lb-empty{text-align:center;font-size:12px;color:var(--gold);opacity:.6;padding:6px}

/* Interactive controls keep a comfortable tap target (WCAG 2.2 Target Size) */
.smitebtn,.result .again,.rules>summary{min-height:24px}