/* ==========================================================================
   style.css — the League of Legends HUD, in CSS.
   Riot's real palette: the four gold stops, the black-blue panel fill,
   health green, the hextech blues.
   ========================================================================== */

:root{
  --font-display:'Cinzel','Trajan Pro','Palatino Linotype',Georgia,serif;
  --font-body:'Barlow Semi Condensed','Roboto Condensed','Arial Narrow',sans-serif;

  --lol-black:#010A13;
  --lol-black-2:#07121C;
  --lol-slate:#1E2328;
  --lol-slate-2:#2B2F35;
  --lol-grey:#3C3C41;

  --gold-1:#F0E6D2;
  --gold-2:#C8AA6E;
  --gold-3:#C89B3C;
  --gold-4:#785A28;
  --gold-5:#463714;
  --text-dim:#A09B8C;
  --text-dimmer:#5B5A56;

  --hp-hi:#5CE86B; --hp:#1FBF4A; --hp-lo:#0E7A2E;
  --hp-e-hi:#FF6B6B; --hp-e:#E84057; --hp-e-lo:#8C1F2C;
  --hp-neutral:#D6C15A;

  --mana-hi:#66E0FF; --mana:#1CA6E0; --mana-lo:#0C5E8C;

  --dmg-phys:#F0E6D2;
  --dmg-magic:#C77DFF;
  --dmg-true:#FFFFFF;
  --dmg-heal:#35D07F;
  --dmg-taken:#E84057;
  --gold-coin:#F0B232;

  --team-blue:#3C9BE8;
  --team-red:#E84057;

  --hud-scale:1;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:#05090d; overflow:hidden;
  font-family:var(--font-body);
  color:var(--gold-1);
  -webkit-font-smoothing:antialiased;
}

#gl{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path d='M3 2 L3 21 L8 16.5 L11.5 24 L14.8 22.4 L11.4 15.2 L18 15 Z' fill='%23F0E6D2' stroke='%23010A13' stroke-width='1.6' stroke-linejoin='round'/></svg>") 3 2, auto; }

body.cursor-attack #gl{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34'><circle cx='17' cy='17' r='12' fill='none' stroke='%23E84057' stroke-width='2.4'/><circle cx='17' cy='17' r='3' fill='%23E84057'/><path d='M17 1 L17 7 M17 27 L17 33 M1 17 L7 17 M27 17 L33 17' stroke='%23E84057' stroke-width='2.4'/></svg>") 17 17, crosshair;
}

#hud-root{ position:fixed; inset:0; z-index:10; pointer-events:none; user-select:none; }
#layer-world{ position:absolute; inset:0; z-index:11; }
#layer-hud  { position:absolute; inset:0; z-index:20; }
#layer-fx   { position:absolute; inset:0; z-index:30; }
#layer-overlay{ position:absolute; inset:0; z-index:40; }

/* ==========================================================================
   TOP SCORE BAR
   ========================================================================== */
.hud-top{
  position:absolute; left:50%; top:0;
  transform:translateX(-50%) scale(var(--hud-scale));
  transform-origin:top center;
  display:flex; align-items:stretch; gap:0;
  height:46px;
  background:linear-gradient(180deg,rgba(1,10,19,.95),rgba(1,10,19,.72));
  border:1px solid var(--gold-4); border-top:none;
  border-radius:0 0 6px 6px;
  box-shadow:0 2px 12px rgba(0,0,0,.8), inset 0 -1px 0 rgba(200,170,110,.18);
  padding:0 4px;
}
.team-side{ display:flex; align-items:center; gap:8px; padding:0 14px; }
.team-icon{ width:14px; height:14px; transform:rotate(45deg); }
.team-side.blue .team-icon{ background:var(--team-blue); box-shadow:0 0 8px var(--team-blue); }
.team-side.red  .team-icon{ background:var(--team-red);  box-shadow:0 0 8px var(--team-red); }
.team-kills{ font:700 26px/1 var(--font-display); color:var(--gold-1); text-shadow:0 2px 3px #000; min-width:30px; text-align:center; }
.team-gold{ font:600 13px/1 var(--font-body); color:var(--gold-coin); min-width:40px; }
.team-side.blue .team-gold{ text-align:left; }
.team-side.red  .team-gold{ text-align:right; }

.clock-block{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 20px; min-width:106px;
  border-left:1px solid rgba(200,170,110,.25);
  border-right:1px solid rgba(200,170,110,.25);
}
.clock{ font:600 22px/1 var(--font-display); color:var(--gold-1); letter-spacing:1px; text-shadow:0 2px 3px #000; }
.clock.urgent{ color:#FF6B6B; animation:clockPulse .9s ease-in-out infinite; }
@keyframes clockPulse{ 50%{ text-shadow:0 0 12px #E84057,0 2px 3px #000; } }
.phase{ font:700 9px/1 var(--font-body); color:var(--gold-3); letter-spacing:2px; margin-top:3px; height:9px; }

.objective{
  position:absolute; left:50%; top:52px; transform:translateX(-50%) scale(var(--hud-scale));
  transform-origin:top center;
  background:rgba(1,10,19,.85); border:1px solid var(--gold-4); border-radius:4px;
  padding:5px 14px; min-width:180px; text-align:center;
}
.obj-name{ font:700 11px/1 var(--font-body); letter-spacing:2.5px; color:var(--hp-neutral); }
.obj-name.dim{ color:var(--text-dimmer); }
.obj-timer{ font:600 15px/1 var(--font-display); color:var(--text-dim); margin-top:3px; }
.obj-bar{ height:5px; margin-top:5px; background:#0b1116; border:1px solid var(--lol-black); overflow:hidden; }
.obj-bar>div{ height:100%; background:linear-gradient(180deg,#F2E08A,#B99A2E); transform-origin:left center; }

/* ==========================================================================
   BOTTOM HUD
   ========================================================================== */
.hud-bottom{
  position:absolute; left:50%; bottom:0;
  transform:translateX(-50%) scale(var(--hud-scale));
  transform-origin:bottom center;
  display:flex; align-items:flex-end; gap:12px;
  padding:0 14px 6px;
  height:172px;
  background:linear-gradient(180deg,rgba(1,10,19,0) 0%,rgba(1,10,19,.62) 34%,rgba(1,10,19,.93) 100%);
}

/* --- portrait --- */
.portrait-cluster{ position:relative; width:116px; height:116px; flex:0 0 116px; }
.xp-ring{ position:absolute; inset:0; filter:drop-shadow(0 0 4px rgba(0,0,0,.9)); }
.portrait{
  position:absolute; left:14px; top:14px; width:88px; height:88px;
  border-radius:50%; overflow:hidden; border:2px solid var(--gold-4);
  box-shadow:inset 0 0 12px #000,0 0 0 1px var(--lol-black),0 0 10px rgba(0,0,0,.8);
}
.portrait svg{ width:100%; height:100%; display:block; }
.portrait.dead{ filter:grayscale(1) brightness(.42); }
.level-badge{
  position:absolute; left:-2px; bottom:8px; width:30px; height:30px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#14212C,#010A13);
  border:2px solid var(--gold-4); border-radius:4px;
  font:700 17px/1 var(--font-body); color:var(--gold-1);
  text-shadow:0 1px 2px #000;
  box-shadow:0 0 0 1px var(--lol-black),0 2px 4px rgba(0,0,0,.7);
}
.level-badge.can-level{ border-color:var(--gold-2); animation:badgePulse 1.1s ease-in-out infinite; }
@keyframes badgePulse{
  0%,100%{ box-shadow:0 0 0 1px var(--lol-black),0 0 4px rgba(200,170,110,.4); }
  50%    { box-shadow:0 0 0 1px var(--lol-black),0 0 15px rgba(200,170,110,.95); }
}

/* --- bars --- */
.hud-mid{ display:flex; flex-direction:column; justify-content:flex-end; width:452px; }
.bar{
  position:relative; width:452px; overflow:hidden;
  background:linear-gradient(180deg,#0B1116,#05090D);
  border:1px solid var(--lol-black);
  box-shadow:inset 0 0 0 1px rgba(200,170,110,.14),inset 0 2px 4px rgba(0,0,0,.9);
}
.bar.hp{ height:21px; }
.bar.res{ height:14px; margin-top:3px; }
.bar .fill,.bar .lag{
  position:absolute; left:0; top:0; bottom:0; width:100%;
  transform-origin:left center; will-change:transform;
}
.bar .lag{ background:rgba(240,230,210,.32); }
.bar.hp .fill{
  background:linear-gradient(180deg,var(--hp-hi) 0%,var(--hp) 42%,var(--hp-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.35);
}
.bar.res .fill{
  background:linear-gradient(180deg,var(--mana-hi) 0%,var(--mana) 46%,var(--mana-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.35);
}
.bar.res.overfilled .fill{
  background:linear-gradient(180deg,#CFF6FF 0%,#66E0FF 46%,#1CA6E0 100%);
  box-shadow:inset 0 0 8px rgba(160,240,255,.9);
}
.bar.res.overpressure{ box-shadow:inset 0 0 0 1px rgba(255,210,63,.85),inset 0 2px 4px rgba(0,0,0,.9); }
/* Unlimited tank: a steady bright bar with a slow shimmer, never draining. */
.bar.res.unlimited .fill{
  background:linear-gradient(90deg,#1CA6E0,#8FEFFF,#1CA6E0);
  background-size:200% 100%;
  animation:resShimmer 3.2s linear infinite;
}
.bar.res.unlimited .bartext{ letter-spacing:2px; color:#CFF6FF; }
@keyframes resShimmer{ to{ background-position:200% 0; } }
.bar.res.overpressure .fill{
  background:linear-gradient(90deg,#66E0FF,#FFD23F,#66E0FF);
  background-size:220% 100%;
  animation:opShimmer 1.2s linear infinite;
}
@keyframes opShimmer{ to{ background-position:220% 0; } }
.bar .shieldfill{
  position:absolute; top:0; bottom:0;
  background:repeating-linear-gradient(135deg,#E8E8E8 0 5px,#B9B9B9 5px 10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.bar .ticks{ position:absolute; inset:0; pointer-events:none; }
.bar .ticks i{ position:absolute; top:2px; bottom:2px; width:1px; background:rgba(1,10,19,.75); }
.bar .bartext{
  position:absolute; inset:0; display:grid; place-items:center;
  font:600 12px/1 var(--font-body); color:var(--gold-1);
  text-shadow:0 1px 2px #000,0 0 4px #000; letter-spacing:.3px;
}
.bar.res .bartext{ font-size:10.5px; }

/* --- ability row --- */
.ability-row{ display:flex; align-items:flex-end; gap:6px; margin-top:12px; }
.ab-sep{ width:8px; }

.passive{
  position:relative; width:48px; height:48px; margin-right:2px; margin-bottom:8px;
  border-radius:50%; overflow:visible;
  border:2px solid var(--gold-4);
  box-shadow:0 0 0 1px var(--lol-black),0 2px 6px rgba(0,0,0,.7);
}
.passive canvas{ border-radius:50%; }
.passive.armed{ border-color:#D8F26A; box-shadow:0 0 0 1px var(--lol-black),0 0 14px rgba(216,242,106,.85); }
.charge-pips{ position:absolute; left:50%; bottom:-9px; transform:translateX(-50%); display:flex; gap:3px; }
.charge-pips i{
  width:8px; height:8px; border-radius:2px;
  background:#0A1A24; border:1px solid var(--gold-5);
}
.charge-pips i.on{
  background:linear-gradient(180deg,#EAFF9A,#A8CC3A);
  border-color:#D8F26A; box-shadow:0 0 6px rgba(216,242,106,.9);
}
.charge-pips i.pop{ animation:pipPop .18s ease-out; }
@keyframes pipPop{ 50%{ transform:scale(1.5); } }

.ability{
  position:relative; width:58px; height:58px; padding:0;
  background:linear-gradient(180deg,#141C24,#05090D);
  border:2px solid var(--gold-4); border-radius:3px;
  overflow:visible; isolation:isolate;
  box-shadow:inset 0 0 0 1px var(--lol-black),inset 0 1px 0 rgba(200,170,110,.22),
             0 0 0 1px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.65);
}
.ability .icon{ position:absolute; inset:0; overflow:hidden; border-radius:1px; }
.ability .icon canvas{ width:100%; height:100%; display:block; }

#ab-R{
  border-color:var(--gold-3);
  box-shadow:inset 0 0 0 1px var(--lol-black),inset 0 1px 0 rgba(240,230,210,.35),
             0 0 0 1px rgba(0,0,0,.85),0 0 10px rgba(200,155,60,.35),0 2px 6px rgba(0,0,0,.65);
}
#ab-R.active,
#ab-Q.active{ border-color:#7FE3FF; box-shadow:0 0 0 2px #7FE3FF,0 0 22px rgba(127,227,255,.9); }

.ability .cd-sweep{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:conic-gradient(from 0turn,
    rgba(2,8,14,.80) 0turn calc(var(--cd,0) * 1turn),
    rgba(0,0,0,0) calc(var(--cd,0) * 1turn) 1turn);
}
.ability .cd-edge{
  position:absolute; left:50%; top:50%; width:2px; height:86px;
  margin:-43px 0 0 -1px; transform-origin:50% 43px;
  transform:rotate(calc(var(--cd,0) * 360deg));
  background:linear-gradient(to top,rgba(240,230,210,0) 40%,rgba(240,230,210,.85) 100%);
  opacity:0; pointer-events:none; z-index:3;
}
.ability.cooling .cd-edge{ opacity:1; }
.ability.cooling .icon{ filter:grayscale(.55) brightness(.6); }
.ability .cd-text{
  position:absolute; inset:0; display:grid; place-items:center; z-index:4;
  font:700 22px/1 var(--font-body); color:var(--gold-1);
  text-shadow:0 0 3px #000,0 2px 4px #000,0 0 8px rgba(0,0,0,.9);
  opacity:0; pointer-events:none;
}
.ability.cooling .cd-text{ opacity:1; }

.ability .ready-glow{
  position:absolute; inset:-3px; border-radius:5px; pointer-events:none; z-index:1;
}
.ability.ready .ready-glow{ animation:readyPulse 1.7s ease-in-out infinite; }
@keyframes readyPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(200,170,110,.32),0 0 6px rgba(200,170,110,.22); }
  50%    { box-shadow:0 0 0 1px rgba(240,230,210,.8),0 0 15px rgba(200,170,110,.6); }
}
.ability.treated{ border-color:#D8F26A; }
.ability.treated .ready-glow{ box-shadow:0 0 0 2px rgba(216,242,106,.9),0 0 18px rgba(216,242,106,.6); animation:none; }

.ability .nomana{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,rgba(20,80,160,.55),rgba(10,40,110,.75));
  mix-blend-mode:hard-light; transition:opacity .12s;
}
.ability.nomana-on .nomana{ opacity:1; }
.ability.nomana-on .cost{ color:#FF6B6B; }
.ability.unlearned{ border-color:var(--lol-grey); }
.ability.unlearned .icon{ filter:grayscale(1) brightness(.3); }
.ability.pop{ animation:abPop .18s ease-out; }
@keyframes abPop{ 50%{ transform:scale(1.14); } }

.ability .keyc{
  position:absolute; right:-1px; bottom:-1px; z-index:5;
  min-width:15px; height:15px; padding:0 3px; display:grid; place-items:center;
  background:rgba(1,10,19,.93); border:1px solid var(--gold-5); border-radius:2px;
  font:700 11px/1 var(--font-body); color:var(--gold-1); letter-spacing:.5px;
}
.ability .cost{
  position:absolute; left:1px; bottom:-15px; z-index:5;
  font:600 11px/1 var(--font-body); color:var(--mana-hi); text-shadow:0 1px 2px #000;
}
.ability .rank{ position:absolute; left:0; right:0; top:-7px; height:4px; z-index:5; display:flex; gap:2px; }
.ability .rank .pip{ flex:1; height:4px; background:var(--lol-slate); box-shadow:inset 0 0 0 1px var(--lol-black); }
.ability .rank .pip.on{
  background:linear-gradient(180deg,var(--gold-1),var(--gold-3));
  box-shadow:inset 0 0 0 1px var(--lol-black),0 0 4px rgba(200,155,60,.6);
}
.ability .levelup{
  position:absolute; left:50%; top:-28px; transform:translateX(-50%);
  width:20px; height:20px; display:none; place-items:center;
  cursor:pointer; z-index:6;
  background:radial-gradient(circle,#2A4258,#0B1620);
  border:1px solid var(--gold-2); border-radius:50%;
  color:var(--gold-1); font:700 15px/1 var(--font-body);
  box-shadow:0 0 8px rgba(200,170,110,.8);
  animation:badgePulse 1s infinite;
}
.ability.can-level .levelup{ display:grid; }

.ability .ammo-count{
  position:absolute; right:3px; top:1px; z-index:5;
  font:700 16px/1 var(--font-body); color:var(--gold-1);
  text-shadow:0 0 3px #000,0 1px 3px #000;
}
.ability .ammo-count.empty{ color:var(--team-red); }
.ability .ammo-pips{ position:absolute; left:3px; right:3px; bottom:3px; height:3px; z-index:5; display:flex; gap:2px; }
.ability .ammo-pips i{ flex:1; height:3px; border-radius:1px; background:#0A1A24; box-shadow:inset 0 0 0 1px #000; }
.ability .ammo-pips i.full{
  background:linear-gradient(180deg,#8FEFFF,#1CA6E0);
  box-shadow:inset 0 0 0 1px #000,0 0 5px rgba(102,224,255,.85);
}
.ability .ammo-pips i.filling{
  background:linear-gradient(90deg,#1CA6E0 var(--fillpct,0%),#0A1A24 var(--fillpct,0%));
}

.ability.summoner{ width:46px; height:46px; margin-bottom:6px; border-color:var(--gold-5); }
.ability.summoner .cd-text{ font-size:15px; }

/* --- inventory --- */
.hud-right{ display:flex; flex-direction:column; justify-content:flex-end; gap:5px; margin-bottom:6px; }
.inventory{ display:grid; grid-template-columns:repeat(3,38px); grid-auto-rows:38px; gap:3px; }
.slot{
  background:linear-gradient(180deg,#0D141B,#05090D);
  border:1px solid var(--gold-5); border-radius:2px;
  display:grid; place-items:center;
  font:700 11px/1 var(--font-body); color:var(--text-dimmer);
  box-shadow:inset 0 0 6px rgba(0,0,0,.8);
}
.slot.filled{
  border-color:var(--gold-3); color:var(--gold-1);
  background:radial-gradient(circle at 50% 30%,#2A3F52,#0A141C);
  box-shadow:inset 0 0 6px rgba(0,0,0,.7),0 0 6px rgba(200,155,60,.3);
}
.gold-row{ display:flex; align-items:center; gap:5px; }
.coin{ width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE9A8,var(--gold-coin) 60%,#8A6212);
  box-shadow:0 0 5px rgba(240,178,50,.6); }
.gold{ font:600 14px/1 var(--font-body); color:var(--gold-coin); }
.shop-hint{ font:700 9px/1 var(--font-body); letter-spacing:1.5px; color:var(--text-dimmer); }
.shop-hint.active{ color:var(--gold-2); text-shadow:0 0 8px rgba(200,170,110,.7); }

/* --- chips --- */
.chips{ display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.chip{
  background:rgba(1,10,19,.78); border:1px solid var(--gold-5); border-radius:3px;
  padding:4px 9px; font:600 13px/1 var(--font-body); color:var(--text-dim); min-width:72px;
}
.chip.kda b{ color:var(--gold-1); }
.chip.kda .d{ color:var(--team-red); }
.chip.kda .a{ color:var(--text-dim); }
.chip.cs .ic{ color:var(--gold-3); }

/* ==========================================================================
   MINIMAP
   ========================================================================== */
.minimap{
  position:absolute; right:6px; bottom:6px;
  width:260px; height:260px;
  transform:scale(var(--hud-scale)); transform-origin:bottom right;
  border:2px solid var(--gold-4); border-radius:3px;
  background:var(--lol-black);
  box-shadow:0 0 0 1px var(--lol-black),0 2px 14px rgba(0,0,0,.85),inset 0 0 20px rgba(0,0,0,.8);
}
.minimap canvas{ display:block; width:100%; height:100%; }

/* ==========================================================================
   WORLD-SPACE UI
   ========================================================================== */
.wbar{
  position:absolute; left:0; top:0; will-change:transform;
  width:78px; pointer-events:none;
}
.wbar.minion{ width:38px; }
.wbar.structure{ width:96px; }
.wbar.neutral{ width:86px; }

.wlvl{
  position:absolute; left:-15px; bottom:0; width:14px; height:14px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#14212C,#010A13);
  border:1px solid var(--gold-5); border-radius:2px;
  font:700 9px/1 var(--font-body); color:var(--gold-1);
}
.wname{
  position:absolute; left:0; right:0; bottom:20px; text-align:center;
  font:600 11px/1 var(--font-body); color:var(--gold-1);
  text-shadow:0 1px 2px #000,0 0 4px #000; white-space:nowrap;
}
.wbar.enemy .wname{ color:#FFC9C9; }

.whp{
  position:relative; height:7px; overflow:hidden;
  background:#0A0F14; border:1px solid var(--lol-black);
  box-shadow:0 0 0 1px rgba(0,0,0,.6);
}
.wbar.minion .whp{ height:4px; }
.wbar.structure .whp{ height:9px; }
.wfill{ position:absolute; inset:0; transform-origin:left center; }
.wbar.ally .whp .wfill{ background:linear-gradient(180deg,var(--hp-hi),var(--hp) 55%,var(--hp-lo)); }
.wbar.enemy .whp .wfill{ background:linear-gradient(180deg,var(--hp-e-hi),var(--hp-e) 55%,var(--hp-e-lo)); }
.wbar.neutral .whp .wfill{ background:linear-gradient(180deg,#F2E08A,var(--hp-neutral) 55%,#8A7A1E); }
.wbar.me .whp{ height:8px; box-shadow:0 0 0 1px var(--gold-4); }
.wshield{ position:absolute; top:0; bottom:0;
  background:repeating-linear-gradient(135deg,#E8E8E8 0 4px,#AFAFAF 4px 8px); }
.wsegs{ position:absolute; inset:0; }
.wsegs i{ position:absolute; top:0; bottom:0; width:1px; background:rgba(1,10,19,.85); }

.wres{ position:relative; height:3px; margin-top:1px; overflow:hidden;
  background:#0A0F14; border:1px solid var(--lol-black); }
.wres .wfill{ background:linear-gradient(180deg,var(--mana-hi),var(--mana)); }
.wbar.treated .whp{ box-shadow:0 0 0 1px #D8F26A,0 0 7px rgba(216,242,106,.8); }

.dmg{
  position:absolute; left:0; top:0; will-change:transform,opacity;
  font:700 21px/1 var(--font-display); white-space:nowrap; pointer-events:none;
  text-shadow:0 0 3px #000,0 2px 4px #000,-1px 0 2px #000,1px 0 2px #000;
}
.dmg.phys{ color:var(--dmg-phys); }
.dmg.magic{ color:var(--dmg-magic); }
.dmg.true{ color:var(--dmg-true); }
.dmg.heal{ color:var(--dmg-heal); }
.dmg.gold{ color:var(--gold-coin); font-size:17px; }
.dmg.taken{ color:var(--dmg-taken); font-size:24px; }
.dmg.dim{ opacity:.55; font-size:16px; }

/* ==========================================================================
   BANNERS / TOASTS / DEATH
   ========================================================================== */
.announce{ position:absolute; left:50%; top:20%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.banner{ text-align:center; animation:bannerIn .45s cubic-bezier(.2,1.3,.4,1); }
.banner.out{ animation:bannerOut .6s ease-in forwards; }
.b-title{
  font:700 40px/1 var(--font-display); letter-spacing:5px;
  background:linear-gradient(180deg,#FFF6DC 0%,#F0E6D2 30%,#C8AA6E 62%,#785A28 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 4px #000) drop-shadow(0 0 16px rgba(200,170,110,.55));
}
.b-sub{ font:500 14px/1 var(--font-body); color:var(--text-dim); letter-spacing:2.5px; text-shadow:0 2px 3px #000; }
@keyframes bannerIn{ from{ opacity:0; transform:translateY(-16px) scale(.9); } }
@keyframes bannerOut{ to{ opacity:0; transform:translateY(-10px) scale(1.04); } }

.toast-stack{ position:absolute; left:50%; top:36%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:5px; }
.toast{
  background:rgba(1,10,19,.86); border:1px solid var(--gold-5); border-radius:3px;
  padding:5px 14px; font:500 13px/1 var(--font-body); color:var(--gold-1);
  text-shadow:0 1px 2px #000; animation:toastIn .25s ease-out;
}
.toast.out{ animation:toastOut .5s ease-in forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-8px); } }

.death-overlay{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%,rgba(90,0,0,.25),rgba(2,0,0,.72) 75%);
  backdrop-filter:grayscale(.7) brightness(.62);
  -webkit-backdrop-filter:grayscale(.7) brightness(.62);
}
.death-overlay.on{ display:flex; }
.death-inner{ text-align:center; }
.death-title{ font:700 42px/1 var(--font-display); letter-spacing:6px; color:#E84057;
  text-shadow:0 0 22px rgba(232,64,87,.65),0 3px 5px #000; }
.death-timer{ font:700 76px/1 var(--font-display); color:var(--gold-1); margin-top:12px; text-shadow:0 3px 6px #000; }
.death-sub{ font:500 13px/1 var(--font-body); color:var(--text-dim); letter-spacing:2.5px; margin-top:8px; }

/* ==========================================================================
   SHOP / SCOREBOARD / END
   ========================================================================== */
.shop{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  flex-direction:column; gap:10px; padding:22px 26px;
  background:linear-gradient(180deg,rgba(7,18,28,.97),rgba(1,10,19,.98));
  border:2px solid var(--gold-4); border-radius:6px;
  box-shadow:0 0 0 1px var(--lol-black),0 10px 50px rgba(0,0,0,.9);
  min-width:560px;
}
.shop-title{ font:600 24px/1 var(--font-display); letter-spacing:4px; color:var(--gold-2); text-align:center; }
.shop-sub{ font:500 11px/1 var(--font-body); color:var(--text-dimmer); letter-spacing:1.5px; text-align:center; }
.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:8px; }
.shop-item{
  padding:11px 12px; border:1px solid var(--gold-5); border-radius:3px;
  background:linear-gradient(180deg,#0D141B,#05090D); cursor:default;
}
.shop-item.afford{ border-color:var(--gold-2); cursor:pointer; box-shadow:0 0 10px rgba(200,170,110,.28); }
.shop-item.afford:hover{ background:linear-gradient(180deg,#16222E,#0A121A); }
.shop-item.owned{ opacity:.42; }
.si-name{ font:700 13px/1.2 var(--font-body); color:var(--gold-1); }
.si-desc{ font:500 11px/1.4 var(--font-body); color:var(--text-dim); margin-top:5px; min-height:30px; }
.si-cost{ font:600 13px/1 var(--font-body); color:var(--gold-coin); margin-top:7px; display:flex; align-items:center; gap:5px; }
.si-cost .coin{ width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE9A8,var(--gold-coin) 60%,#8A6212); }
.shop-close{ margin-top:6px; text-align:center; font:700 12px/1 var(--font-body);
  letter-spacing:2px; color:var(--text-dim); cursor:pointer; padding:8px; }
.shop-close:hover{ color:var(--gold-1); }

.scoreboard{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(1,6,12,.7); }
.sb-inner,.end-inner{
  background:linear-gradient(180deg,rgba(7,18,28,.98),rgba(1,10,19,.99));
  border:2px solid var(--gold-4); border-radius:6px; padding:24px 30px;
  box-shadow:0 10px 60px rgba(0,0,0,.9);
}
.sb-title{ font:600 20px/1 var(--font-display); letter-spacing:4px; color:var(--gold-2); text-align:center; margin-bottom:14px; }
table{ border-collapse:collapse; font:500 13px/1 var(--font-body); }
th{ font:700 10px/1 var(--font-body); letter-spacing:1.6px; color:var(--text-dimmer);
  text-align:left; padding:0 16px 8px 0; border-bottom:1px solid var(--gold-5); }
td{ padding:8px 16px 8px 0; color:var(--text-dim); border-bottom:1px solid rgba(120,90,40,.18); }
td.nm{ color:var(--gold-1); font-weight:600; }
td.nm small{ display:block; font-weight:400; font-size:10px; color:var(--text-dimmer); letter-spacing:.6px; }
tr.blue td.nm{ border-left:3px solid var(--team-blue); padding-left:9px; }
tr.red  td.nm{ border-left:3px solid var(--team-red);  padding-left:9px; }
tr.me td{ background:rgba(200,170,110,.08); }

.endscreen{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(0,0,0,.55),rgba(0,0,0,.92));
  animation:fadeIn .7s ease-out; }
@keyframes fadeIn{ from{ opacity:0; } }
.end-inner{ text-align:center; min-width:620px; }
.end-title{ font:700 76px/1 var(--font-display); letter-spacing:10px;
  background:linear-gradient(180deg,#FFFDF2,#F0E6D2 28%,#C89B3C 66%,#6B4A16 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 6px #000) drop-shadow(0 0 26px rgba(200,170,110,.5)); }
.endscreen.lose .end-title{
  background:linear-gradient(180deg,#FFE3E3,#E84057 45%,#6B1220 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 3px 6px #000) drop-shadow(0 0 26px rgba(232,64,87,.45)); }
.end-reason{ font:500 13px/1 var(--font-body); letter-spacing:3.5px; color:var(--text-dim); margin-top:8px; }
.end-score{ font:600 16px/1 var(--font-display); color:var(--gold-2); margin-top:10px; }
.end-table{ margin:22px auto 0; }
.end-btn{ display:inline-block; margin-top:22px; padding:12px 34px; cursor:pointer;
  font:700 14px/1 var(--font-body); letter-spacing:3px; color:var(--gold-1);
  background:linear-gradient(180deg,#1E3448,#0A141C);
  border:2px solid var(--gold-3); border-radius:3px; }
.end-btn:hover{ background:linear-gradient(180deg,#2A4863,#101E29); box-shadow:0 0 18px rgba(200,155,60,.55); }

/* ==========================================================================
   SPLASH
   ========================================================================== */
#splash{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:#03080e; transition:opacity .7s ease;
}
#splash.gone{ opacity:0; pointer-events:none; }
.splash-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 22% 45%,rgba(28,166,224,.20),transparent 52%),
    radial-gradient(ellipse at 78% 62%,rgba(200,155,60,.14),transparent 55%),
    linear-gradient(160deg,#071624,#03080e 62%);
}
.splash-inner{
  position:relative; display:grid; gap:22px; max-width:1020px; padding:30px;
  grid-template-columns:260px 1fr; align-items:start;
}
.splash-champ{ grid-row:1 / span 2; text-align:center; }
.splash-portrait{
  width:220px; height:220px; margin:0 auto 16px; border-radius:6px;
  border:2px solid var(--gold-4);
  background:
    radial-gradient(circle at 50% 30%,#2C4A63,#071019 72%);
  box-shadow:0 0 0 1px var(--lol-black),0 10px 40px rgba(0,0,0,.8);
  position:relative; overflow:hidden;
}
/* A quick painted bust: cap, face, hi-vis, tank strap. */
.splash-portrait::before{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:190px; height:150px;
  background:
    radial-gradient(ellipse 52px 30px at 50% 100%,#C8D94A 0 98%,transparent 100%),
    radial-gradient(ellipse 40px 46px at 50% 46%,#D2A679 0 96%,transparent 100%);
}
.splash-portrait::after{
  content:''; position:absolute; left:50%; top:74px; transform:translateX(-50%);
  width:96px; height:52px;
  background:
    linear-gradient(180deg,#1B3A5C 0 62%,#142C46 62% 100%);
  border-radius:48px 48px 6px 6px;
  box-shadow:0 20px 0 -14px #4A3B2A;
}
.splash-name{ font:700 34px/1 var(--font-display); letter-spacing:6px;
  background:linear-gradient(180deg,#FFF6DC,#F0E6D2 32%,#C8AA6E 70%,#785A28);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 4px #000); }
.splash-title{ font:500 12px/1 var(--font-body); letter-spacing:4px; color:var(--text-dim); margin-top:7px; }

.splash-kit{ display:flex; flex-direction:column; gap:7px; }
.kit-row{ display:grid; grid-template-columns:200px 1fr; gap:12px; align-items:baseline;
  padding:7px 11px; background:rgba(1,10,19,.55);
  border-left:2px solid var(--gold-4); border-radius:2px; }
.kit-row b{ font:700 12px/1.3 var(--font-body); color:var(--gold-2); letter-spacing:.7px; }
.kit-row span{ font:400 12px/1.45 var(--font-body); color:var(--text-dim); }
.kit-row i{ color:#D8F26A; font-style:normal; }

.splash-controls{ background:rgba(1,10,19,.55); border:1px solid var(--gold-5);
  border-radius:3px; padding:13px 15px; }
.ctl-title{ font:700 11px/1 var(--font-body); letter-spacing:3px; color:var(--gold-3); margin-bottom:10px; }
.ctl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px;
  font:400 12px/1.5 var(--font-body); color:var(--text-dim); }
kbd{ display:inline-block; min-width:18px; padding:1px 6px; margin-right:5px;
  background:linear-gradient(180deg,#1A2731,#0A131B);
  border:1px solid var(--gold-5); border-radius:2px;
  font:700 11px/1.5 var(--font-body); color:var(--gold-1); }
.ctl-note{ margin-top:11px; font:400 12px/1.5 var(--font-body); color:var(--text-dimmer); }
.ctl-note b{ color:var(--gold-2); }

.splash-load{ grid-column:2; }
.load-bar{ height:5px; background:#0b1116; border:1px solid var(--gold-5); overflow:hidden; }
.load-bar>div{ height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-4),var(--gold-2));
  transition:width .18s ease; box-shadow:0 0 10px rgba(200,170,110,.6); }
#loadtext{ margin-top:7px; font:500 11px/1 var(--font-body); letter-spacing:2px; color:var(--text-dimmer); }

#playbtn{
  grid-column:2; justify-self:start; margin-top:2px;
  padding:14px 46px; cursor:not-allowed; opacity:.4;
  font:700 15px/1 var(--font-body); letter-spacing:4px; color:var(--gold-1);
  background:linear-gradient(180deg,#1E3448,#0A141C);
  border:2px solid var(--gold-4); border-radius:3px;
  transition:opacity .3s, box-shadow .3s;
}
#playbtn.ready{ cursor:pointer; opacity:1; border-color:var(--gold-2);
  box-shadow:0 0 22px rgba(200,170,110,.4); animation:btnPulse 2s ease-in-out infinite; }
#playbtn.ready:hover{ background:linear-gradient(180deg,#2A4863,#101E29); box-shadow:0 0 30px rgba(200,170,110,.75); }
@keyframes btnPulse{ 50%{ box-shadow:0 0 30px rgba(200,170,110,.7); } }
#mpbtn{
  grid-column:2; justify-self:start; margin-top:-8px;
  padding:12px 30px; cursor:pointer;
  font:700 12px/1 var(--font-body); letter-spacing:3px; color:var(--gold-2);
  background:#0a1219; border:1px solid var(--gold-4); border-radius:3px;
  transition:color .2s, border-color .2s, box-shadow .2s;
}
#mpbtn:hover{ color:var(--gold-1); border-color:var(--gold-2); box-shadow:0 0 20px rgba(200,170,110,.3); }
.splash-tip{ grid-column:2; font:400 12px/1.5 var(--font-body); color:var(--text-dimmer); font-style:italic; }
.splash-tip::before{ content:'TIP — '; font-style:normal; letter-spacing:2px; color:var(--gold-4); }

@media (max-width:1100px){
  .splash-inner{ grid-template-columns:1fr; }
  .splash-champ{ grid-row:auto; }
  .splash-load,#playbtn,#mpbtn,.splash-tip{ grid-column:1; }
}

/* ==========================================================================
   PERF READOUT (F3)
   ========================================================================== */
.fps{
  position:absolute; left:8px; top:8px;
  padding:4px 9px;
  background:rgba(1,10,19,.72); border:1px solid var(--gold-5); border-radius:3px;
  font:600 11px/1 var(--font-body); letter-spacing:1.2px; color:var(--text-dim);
  text-shadow:0 1px 2px #000;
}
.fps.bad{ color:#FF9A6B; border-color:#7A3A1E; }

/* Game title above the champion name on the splash. */
.splash-game{
  font:700 11px/1 var(--font-body); letter-spacing:5px;
  color:var(--gold-3); margin-bottom:10px;
}
.m-home{ margin-left:14px; }

/* ==========================================================================
   SHORT VIEWPORTS
   A phone held sideways leaves roughly 375px of height. The splash was taller
   than that, and with the body scroll-locked and the panel centred, the only
   button on the page sat below the fold where nothing could reach it. Centre
   with `margin:auto` instead — it still centres when the content fits and
   still scrolls when it does not — and give up the copy before the button.
   ========================================================================== */
#splash{
  display:flex; align-items:flex-start; justify-content:center;
  height:var(--vvh, 100%);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
#splash > .sp-inner,
#splash > .splash-inner{ margin:auto; }
/* Fixed, so the backdrop does not scroll out from under the content. */
#splash > .sp-bg,
#splash > .splash-bg{ position:fixed; }

@media (max-height: 560px){
  .sp-inner, .splash-inner{ padding:14px 16px; }
  .sp-inner h1{ font-size:clamp(26px,5.4vw,34px); }
  .sp-lede{ display:none; }
  .sp-cols{ gap:12px; }
  .sp-row{ font-size:10.5px; margin-bottom:3px; }
  .sp-list li{ font-size:10.5px; line-height:1.4; margin-bottom:4px; }
  /* The first few lines carry the job; the rest is colour. */
  .sp-list li:nth-child(n+4){ display:none; }
  .sp-load{ margin-top:12px; }
  #playbtn{ margin-top:12px; padding:11px 26px; font-size:11.5px; }
  #mpbtn{ margin-top:-4px; padding:9px 22px; font-size:10.5px; }
}
@media (max-height: 430px){
  .sp-cols{ display:none; }
  .sp-inner h1{ font-size:26px; margin-top:6px; }
  .sp-kicker{ font-size:9px; }
  .sp-load{ margin-top:10px; }
}