:root{
  --bg:#08101c;
  --panel:#0e1a2b;
  --panel2:#0b1626;
  --line:rgba(255,255,255,.10);
  --text:#eaf1ff;
  --muted:rgba(234,241,255,.65);
  --accent:#7aa2ff;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; background:linear-gradient(180deg,#06101d,#050a12); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }

.pn-wrap{ width:min(980px, 92vw); margin:0 auto; }

.pn-top{
  position:sticky; top:0; z-index:5;
  background:rgba(6,12,20,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.pn-topbar{
  display:flex; gap:16px; align-items:center;
  padding:14px 0;
}
.pn-brand{ font-size:18px; font-weight:800; letter-spacing:.2px; }
.pn-sub{ font-size:13px; color:var(--muted); margin-top:2px; }
.pn-back{ color:var(--text); text-decoration:none; opacity:.85; }
.pn-back:hover{ opacity:1; text-decoration:underline; }

.pn-main{ padding:20px 0 60px; display:flex; flex-direction:column; gap:16px; }

.pn-panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

.pn-h2{ margin:0 0 12px; font-size:18px; letter-spacing:.2px; }
.pn-p{ margin:0 0 10px; color:var(--muted); line-height:1.45; }
.pn-muted{ color:var(--muted); }

.pn-diffList{ display:flex; flex-direction:column; gap:10px; padding:4px 2px; }
.pn-diffRow{ display:flex; gap:10px; align-items:flex-start; }
.pn-diffDot{
  width:7px; height:7px; border-radius:999px;
  background:var(--accent);
  margin-top:8px;
  flex:0 0 auto;
}
.pn-diffText{ color:var(--text); line-height:1.35; }
.pn-diffLabel{ font-weight:700; }
.pn-diffFrom{ color:rgba(234,241,255,.75); margin-left:6px; }
.pn-diffArrow{ color:rgba(234,241,255,.55); margin:0 6px; }
.pn-diffTo{ color:#ffffff; font-weight:800; }

.pn-champ{ padding:0; overflow:hidden; }
.pn-champHead{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px;
  border-bottom:1px solid var(--line);
}
.pn-champImg{
  width:58px; height:58px; border-radius:14px;
  border:1px solid var(--line);
  object-fit:cover;
  background:#000;
  flex:0 0 auto;
}
.pn-champName{ font-size:18px; font-weight:900; margin-top:2px; }
.pn-champQuote{
  margin-top:10px;
  color:var(--muted);
  line-height:1.45;
}

.pn-spellBlock{ padding:14px 16px 16px; }
.pn-spellHead{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pn-spellIcon{
  width:34px; height:34px; border-radius:10px;
  border:1px solid var(--line);
  background:rgba(122,162,255,.10);
}
.pn-spellTitle{ font-weight:900; letter-spacing:.2px; }

.pn-patchList{ display:flex; flex-direction:column; gap:10px; }
.pn-patchLink{
  display:block;
  text-decoration:none;
  color:var(--text);
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.pn-patchLink:hover{ background:rgba(255,255,255,.05); }
.pn-patchVer{ font-weight:900; }
.pn-patchMeta{ color:var(--muted); font-size:12px; margin-top:4px; }
.pn-patchTitle{ color:rgba(234,241,255,.85); margin-top:6px; }

.pn-spellIcon{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  object-fit:cover;
  background:#0a1220;
  flex:0 0 auto;
}

.pn-spellIcon--empty{
  background:rgba(122,162,255,.12);
}
.pn-spellBlock{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  margin: 10px 16px;
  padding: 14px;
}

.pn-spellBlock + .pn-spellBlock{
  margin-top: 12px;
  border-top: none;
  padding-top: 14px;
}

.pn-panel.pn-champ{
  margin-bottom: 22px;
}

.pn-num{
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 7px;
  white-space: nowrap;
}

.pn-kw{
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 7px;
  white-space: nowrap;
}

.pn-num--up, .pn-kw--up{
  color: #4ade80;
  background: rgba(74,222,128,.12);
}

.pn-num--down, .pn-kw--down{
  color: #ff6b6b;
  background: rgba(255,107,107,.12);
}

.pn-num--new, .pn-kw--new{
  color: #facc15;
  background: rgba(250,204,21,.14);
}

.pn-num--neutral, .pn-kw--neutral{
  color: rgba(234,241,255,.80);
  background: rgba(255,255,255,.06);
}

.pn-badge{
  display:inline-block;
  margin-left:10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.12);
}

.pn-badge--new{
  color:#facc15;
  background: rgba(250,204,21,.12);
}

.pn-diffRow--up .pn-diffDot{ background:#4ade80; }
.pn-diffRow--down .pn-diffDot{ background:#ff6b6b; }
.pn-diffRow--new .pn-diffDot{ background:#facc15; }

.pn-diffFrom--empty{ display:none; }

.pn-num{
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 7px;
  white-space: nowrap;
}

.pn-num--up{
  color:#4ade80;
  background: rgba(74,222,128,.12);
}

.pn-num--down{
  color:#ff6b6b;
  background: rgba(255,107,107,.12);
}

.pn-num--new{
  color:#facc15;
  background: rgba(250,204,21,.14);
}

.pn-num--neutral{
  color: rgba(234,241,255,.85);
  background: rgba(255,255,255,.06);
}

/* Dot opcional */
.pn-diffRow--up .pn-diffDot{ background:#4ade80; }
.pn-diffRow--down .pn-diffDot{ background:#ff6b6b; }
.pn-diffRow--neutral .pn-diffDot{ background: var(--accent); }
.pn-diffRow--new .pn-diffDot{ background:#facc15; }


/* =========================================================
   PATCH NOTES — Mobile
========================================================= */
@media (max-width: 460px){

  .pn-wrap{
    width: calc(100vw - 24px);
  }

  .pn-topbar{
    padding: 12px 0;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }

  .pn-brand{
    font-size: 16px;
  }

  .pn-sub{
    font-size: 12px;
  }

  .pn-main{
    padding: 16px 0 50px;
    gap: 14px;
  }

  .pn-panel{
    padding: 14px;
    border-radius: 16px;
  }

  .pn-h2{
    font-size: 16px;
    margin-bottom: 10px;
  }

  .pn-champHead{
    gap: 12px;
    padding: 14px;
    flex-direction: row;
    align-items: flex-start;
  }

  .pn-champImg{
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .pn-champName{
    font-size: 16px;
  }

  .pn-champQuote{
    margin-top: 8px;
    font-size: 13px;
  }

  .pn-spellBlock{
    margin: 10px 12px;
    padding: 12px;
    border-radius: 14px;
  }

  .pn-spellHead{
    gap: 10px;
  }

  .pn-spellIcon{
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .pn-diffRow{
    gap: 10px;
    align-items: flex-start;
  }

  .pn-diffText{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .pn-num,
  .pn-kw,
  .pn-badge{
    white-space: normal;
  }

  .pn-patchLink{
    padding: 12px;
    border-radius: 14px;
  }

  .pn-patchMeta{
    font-size: 11px;
  }

  .pn-patchTitle{
    font-size: 13px;
  }
}

@media (max-width: 360px){
  .pn-champHead{
    flex-direction: column;
  }
}

.pn-introHead{
  margin-bottom: 10px;
}

.pn-patchVisual{
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

.pn-patchVisual img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.pn-patchAutoVisual{
  width: 100%;
  max-width: 1200px;
  display: block;
  margin: 16px auto 0;
  border-radius: 18px;
}