@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');
:root{--gold:#c9a84c;--gold-light:#f0d080;--gold-dark:#7a5e20;--bg:#0d0b08;--surface2:#1e1a13;--text:#e8dcc8;--text-muted:#9a8a70;--red:#e05c5c;--green:#5dc97a;--blue:#6a9de0;--border:#3a3020;}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Crimson Pro',Georgia,serif;font-size:17px;line-height:1.65}
header{position:relative;z-index:10;text-align:center;padding:52px 24px 40px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(201,168,76,.06) 0%,transparent 100%)}
.eyebrow{font-family:'Cinzel',serif;font-size:10px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:14px;opacity:.7}
header h1{font-family:'Cinzel',serif;font-size:clamp(26px,5vw,50px);font-weight:900;color:var(--gold-light);text-shadow:0 0 60px rgba(201,168,76,.25),0 2px 4px rgba(0,0,0,.8);letter-spacing:3px}
header h1 .d{color:var(--text-muted);font-weight:300}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.orn span{height:1px;width:80px}.orn span:first-child{background:linear-gradient(90deg,transparent,var(--gold-dark))}.orn span:last-child{background:linear-gradient(90deg,var(--gold-dark),transparent)}
.orn .dia{width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
main{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:44px 28px 100px}
.patch-title{font-family:'Cinzel',serif;font-size:clamp(15px,2.5vw,21px);font-weight:900;color:var(--gold-light);padding:18px 0 14px;margin-bottom:24px;display:flex;align-items:center;gap:14px}
.patch-title::before{content:'';width:4px;height:22px;background:linear-gradient(180deg,var(--gold-light),var(--gold-dark));border-radius:2px}
.patch-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.sec-title{font-family:'Cinzel',serif;font-size:11px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:3px;margin:0 0 10px;padding:0 0 8px;border-bottom:1px solid var(--border);opacity:.8}
.general-notes{margin-bottom:40px;color:var(--text);line-height:1.7}
.general-notes h3{font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:2px;margin:24px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.general-notes ul{padding-left:20px;margin:4px 0 8px}
.general-notes li{margin:4px 0;font-size:15px}
.general-notes strong{color:var(--gold-light)}
.general-notes em.from{color:var(--text-muted);font-style:italic;font-size:13px}
.item-row{display:flex;gap:18px;align-items:center;padding:14px 16px;margin:5px 0;border-radius:4px;border:1px solid transparent;transition:all .2s}
.item-row:hover{border-color:var(--gold);background:rgba(30,26,19,.9);box-shadow:0 0 20px rgba(201,168,76,.15)}
.iw-col{flex-shrink:0;width:226px;display:flex;justify-content:center;align-items:center}
.iw{width:140px;height:140px;border-radius:8px;border:2px solid var(--border);overflow:hidden;background:#1a1510;box-shadow:0 4px 12px rgba(0,0,0,0.5)}
.iw img{display:block;width:100%;height:100%;object-fit:fill}
.img-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text-muted);font-family:'Cinzel',serif;font-size:11px;text-align:center;padding:6px;box-sizing:border-box;line-height:1.3}
.iw[data-size="Small"]{width:70px}
.iw[data-size="Large"]{width:210px}
.item-content{flex:1;min-width:0;padding-top:1px}
.item-name{font-family:'Cinzel',serif;font-size:16px;font-weight:600;color:var(--gold-light);margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.changes{list-style:none}
.changes li{position:relative;padding-left:16px;color:var(--text);margin-bottom:3px;font-size:17px;white-space:pre-line}
.changes li::before{content:'·';position:absolute;left:3px;color:var(--text-muted)}
.changes li.buff{color:var(--green)}.changes li.nerf{color:var(--red)}.changes li.new,.changes li.redesign,.changes li.info{color:#ede5d0}
.tier{font-size:9px;font-family:'Cinzel',serif;letter-spacing:1px;padding:1px 7px;text-transform:uppercase;border-radius:2px}
.tier-new{background:rgba(76,173,106,.15);color:var(--green);border:1px solid rgba(76,173,106,.3)}
.tier-redesign{background:rgba(201,168,76,.15);color:var(--gold-light);border:1px solid rgba(201,168,76,.3)}
h3{font-family:'Cinzel',serif;font-size:18px;font-weight:600;color:var(--gold-light);margin:30px 0 15px;padding-bottom:8px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:2px}
nav.site-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;padding:10px 24px;background:rgba(13,11,8,.96);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(8px)}
nav.site-nav a{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);text-decoration:none;padding:6px 12px;border-radius:3px;border:1px solid transparent;transition:all .15s}
nav.site-nav a:hover{color:var(--gold-light);border-color:rgba(201,168,76,.3)}
nav.site-nav a.active{color:var(--gold);border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.07)}
nav.site-nav .nav-sep{width:1px;height:20px;background:var(--border);margin:0 4px;align-self:center}
.items-grid{display:flex;flex-wrap:wrap;gap:14px;padding:24px 0;align-items:flex-start}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px;padding:24px 0}
.item-card{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:14px;text-align:center;transition:all .2s;cursor:default;flex-shrink:0;width:180px}
.item-card[data-size="Small"]{width:110px}
.item-card[data-size="Large"]{width:250px}
.skill-card{width:auto;flex-shrink:unset}
.item-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 6px 24px rgba(201,168,76,.15)}
.item-card .iw{margin:0 auto 10px}
.ic-name{font-family:'Cinzel',serif;font-size:12px;font-weight:600;color:var(--gold-light);margin-bottom:6px;cursor:help;border-bottom:1px dashed rgba(201,168,76,.3);display:inline-block}
.ic-badges{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.ic-badge{font-size:10px;padding:2px 7px;border-radius:2px;font-family:'Cinzel',serif;letter-spacing:.5px}
.ic-buff{background:rgba(93,201,122,.12);color:var(--green);border:1px solid rgba(93,201,122,.3)}
.ic-nerf{background:rgba(224,92,92,.12);color:var(--red);border:1px solid rgba(224,92,92,.3)}
.ic-info{background:rgba(255,255,255,.04);color:var(--text-muted);border:1px solid var(--border)}
/* ── Item Tooltip ── */
#tooltip{position:fixed;display:none;z-index:9999;background:var(--surface2);border:1px solid rgba(201,168,76,.6);border-radius:8px;padding:14px 16px;min-width:280px;max-width:340px;box-shadow:0 8px 32px rgba(0,0,0,.8),0 0 0 1px rgba(201,168,76,.1),inset 0 1px 0 rgba(255,255,255,.04);pointer-events:none;font-size:13px}
.tt-title{font-family:'Cinzel',serif;font-size:15px;color:var(--gold-light);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58,48,32,.8)}
.tt-row{display:flex;gap:6px;margin:4px 0}
.tt-label{color:#9a8a70;font-size:11px;text-transform:uppercase;letter-spacing:.5px;min-width:60px}
.tt-value{color:#ddd0b8}
.tt-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tt-tag{font-size:10px;padding:2px 7px;border-radius:3px;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);color:#c9a84c}
.tt-desc{margin-top:10px;padding-top:10px;border-top:1px solid rgba(58,48,32,.8);line-height:1.6;white-space:pre-line;color:#e8dcc8}
.skill-card{display:flex;flex-direction:column;align-items:center}
.skill-card .ic-name{display:block;text-align:center;width:100%}
.skill-changes{list-style:none;margin-top:10px;padding:0;width:100%;text-align:left}
.skill-changes li{position:relative;padding-left:14px;font-size:13px;margin-bottom:4px;line-height:1.4;color:var(--text)}
.skill-changes li::before{content:'·';position:absolute;left:2px;color:var(--text-muted)}
.skill-changes li.buff{color:var(--green)}.skill-changes li.nerf{color:var(--red)}.skill-changes li.new,.skill-changes li.redesign,.skill-changes li.info{color:#ede5d0}
.tt-section{margin-top:10px;padding-top:8px;border-top:1px solid rgba(58,48,32,.8);font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-light);margin-bottom:4px}
.tt-changes{list-style:none;padding:0;margin:0}
.tt-changes li{position:relative;padding-left:14px;font-size:13px;margin-bottom:3px;line-height:1.4}
.tt-changes li::before{content:'·';position:absolute;left:2px;color:var(--text-muted)}
.tt-change-buff{color:#1de87a}.tt-change-nerf{color:#ff5f4a}.tt-change-info{color:#ede5d0}
.kw-shield{color:#f7d820}.kw-damage{color:#ff5f4a}.kw-regen{color:#1de87a}.kw-heal{color:#96f03a}.kw-burn{color:#ffaa55}.kw-poison{color:#14d45a}.kw-freeze{color:#50d4ff}.kw-slow{color:#d4a870}.kw-haste{color:#00ffda}.kw-ammo{color:#ff9910}.kw-crit{color:#ff70ff}.kw-cooldown{color:#a8a8a8}.kw-golden{color:#ffd91e}.kw-lifesteal{color:#c05585}.kw-destroy{color:#ff3d82}.kw-heated{color:#ffb060}.kw-charge{color:#00ffda}
.item-name{cursor:help}
.vote-bar{display:flex;gap:8px;margin-top:10px;align-items:center}
.vote-btn{background:transparent;border:1px solid var(--border);border-radius:4px;padding:4px 12px;font-size:11px;font-family:'Cinzel',serif;letter-spacing:.5px;cursor:pointer;color:var(--text-muted);transition:all .15s}
.vote-btn[data-tipo="buff"]{border-color:rgba(93,201,122,.4);color:var(--green)}
.vote-btn[data-tipo="nerf"]{border-color:rgba(224,92,92,.4);color:var(--red)}
.vote-btn:hover:not(:disabled){opacity:.75;transform:scale(1.05)}
.vote-btn.voted{font-weight:700}
.vote-btn[data-tipo="buff"].voted{background:rgba(93,201,122,.12)}
.vote-btn[data-tipo="nerf"].voted{background:rgba(224,92,92,.12)}
.vote-btn:disabled{cursor:default}
.vote-count{font-family:monospace;margin-left:5px}
.vote-label{font-size:11px;color:var(--text-muted);margin-left:4px;font-style:italic}
.item-row.vote-majority-buff .changes li{color:var(--green) !important}
.item-row.vote-majority-nerf .changes li{color:var(--red) !important}
.patch-block{margin:0 0 56px;padding-bottom:24px;border-bottom:1px solid var(--border)}.patch-block:last-child{border-bottom:none}
.patch-block-title{font-family:'Cinzel',serif;font-size:clamp(13px,2vw,17px);font-weight:900;color:var(--gold-light);padding:12px 18px;margin-bottom:18px;background:linear-gradient(90deg,rgba(201,168,76,.1),transparent);border-left:3px solid var(--gold);border-radius:0 4px 4px 0;letter-spacing:1px}
.char-header{font-family:'Cinzel',serif;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:3px;margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(58,48,32,.6)}
.noimg-list{list-style:none;padding:0;margin:4px 0 12px}.noimg-list>li{margin:8px 0;color:var(--text)}.noimg-list>li>strong{color:var(--gold-light)}.noimg-list ul{list-style:none;padding-left:16px;margin:2px 0}.noimg-list ul li{position:relative;padding-left:14px;font-size:15px;color:var(--text-muted)}.noimg-list ul li::before{content:'·';position:absolute;left:2px;color:var(--text-muted)}
.site-footer{margin-top:60px;padding:24px 32px;border-top:1px solid var(--border);text-align:center;color:var(--text-muted);font-size:12px;line-height:1.7}
.site-footer p{max-width:720px;margin:0 auto 6px}
#discord-popup{position:fixed;bottom:24px;right:24px;background:var(--surface2);border:1px solid var(--gold-dark);border-radius:10px;padding:14px 18px;font-size:14px;color:var(--text-muted);box-shadow:0 6px 24px rgba(0,0,0,.7);display:flex;align-items:center;gap:12px;z-index:9999;transition:opacity .4s,transform .4s;opacity:0;transform:translateY(10px);pointer-events:none}
#discord-popup.show{opacity:1;transform:translateY(0);pointer-events:auto}
#discord-popup .dp-icon{font-size:20px;flex-shrink:0}
#discord-popup .dp-name{color:var(--gold-light);font-weight:600;font-family:'Cinzel',serif;letter-spacing:.5px;font-size:15px}

/* ── Responsive: Tablet (≤ 768px) ─────────────────────── */
@media (max-width: 768px) {
  main { padding: 32px 16px 80px }
  .iw-col { width: 170px }
  .iw { width: 120px; height: 120px }
  .iw[data-size="Small"] { width: 72px; height: 120px }
  .iw[data-size="Large"] { width: 165px; height: 110px }
  .item-card[data-size="Large"] { width: 210px }
  nav.site-nav a { font-size: 9px; padding: 5px 9px; letter-spacing: 1px }
}

/* ── Responsive: Mobile (≤ 520px) ─────────────────────── */
@media (max-width: 520px) {
  body { font-size: 15px }
  header { padding: 24px 14px 20px }
  main { padding: 16px 10px 56px }
  nav.site-nav { padding: 6px 8px; gap: 2px }
  nav.site-nav a { font-size: 9px; padding: 4px 6px; letter-spacing: .5px }
  nav.site-nav .nav-sep { display: none }
  .item-row { gap: 10px; padding: 10px 8px }
  .iw-col { width: 112px }
  .iw { width: 88px; height: 88px }
  .iw[data-size="Small"] { width: 54px; height: 88px }
  .iw[data-size="Large"] { width: 112px; height: 84px }
  .item-name { font-size: 14px }
  .changes li { font-size: 14px }
  .changes em.from { font-size: 12px; color: var(--text-muted); font-style: italic }
  .items-grid { gap: 8px; padding: 14px 0 }
  .item-card { width: 140px; padding: 10px }
  .item-card[data-size="Small"] { width: 88px }
  .item-card[data-size="Large"] { width: 185px }
  .skills-grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 8px }
  .patch-block { margin-bottom: 36px }
  .patch-block-title { padding: 9px 12px; font-size: 13px }
  .char-header { margin: 12px 0 6px; letter-spacing: 2px }
  .vote-bar { flex-wrap: wrap; gap: 5px }
  .vote-btn { padding: 3px 9px; font-size: 10px }
  #tooltip { min-width: 0; max-width: calc(100vw - 20px); font-size: 12px }
  #discord-popup { bottom: 10px; right: 10px; padding: 10px 13px; font-size: 12px }
  .general-notes li { font-size: 14px }
  .site-footer { padding: 16px 14px; font-size: 11px }
}