/* Patch notes use the same class artwork and skill frames as the planner. */
.pn{--pn-metal:#77664e;--pn-ink:#d4ccbf;--pn-title:#e2d3b7;margin:36px auto 48px;color:var(--pn-ink);scroll-margin-top:90px}
.pn-heading{position:relative;padding:32px 32px 28px;text-align:center;border:1px solid var(--pn-metal);background:linear-gradient(90deg,#0c0b0beb,#211a17cc,#0c0b0beb),url('/public/img/d4-s14-ui/background-barbarian-medium.jpg') center 42%/cover;box-shadow:inset 0 0 0 3px #090807,inset 0 0 0 4px #55473866,0 8px 24px #0005}
.pn-heading:before,.pn-heading:after{content:"";position:absolute;left:50%;width:7px;height:7px;transform:translateX(-50%) rotate(45deg);background:#b29870;border:2px solid #302820}
.pn-heading:before{top:-5px}.pn-heading:after{bottom:-5px}
.pn-heading h2{font-family:var(--sanctuary-heading,'Noto Serif SC','Songti SC',SimSun,serif);font-size:30px;letter-spacing:5px;color:var(--pn-title);margin:8px 0 14px;font-weight:600;text-shadow:0 2px 3px #000}
.pn-heading .season-eyebrow{color:#ac9471;margin:0;font-size:10px;letter-spacing:3px}
.pn-heading p:last-child{font-size:13px;line-height:1.9;color:#b1a699;margin:0}
.pn-filters{padding:22px 0 18px;border-bottom:1px solid #514537}
.pn-classes{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:18px}
.pn-classes button{position:relative;flex:1;white-space:nowrap;font-size:12px;padding:11px 12px;background:linear-gradient(#2a2520,#151311);border:1px solid #5f5342;color:#bbae97;box-shadow:inset 0 0 0 2px #090807;cursor:pointer;text-shadow:0 1px #000}
.pn-classes button:hover{color:#f0dfc1;border-color:#a58a63}
.pn-classes button[aria-pressed=true]{background:linear-gradient(#602923,#2e1412);color:#efdbb5;border-color:#a78b62;box-shadow:inset 0 0 0 2px #1d100e,inset 0 -3px #af8b58}
.pn-search-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pn-search-row label{display:flex;align-items:center;gap:9px;font-size:12px;color:#b3a58f}
.pn-search-row input,.pn-search-row select{background:#0c0b0a;border:1px solid #5e5140;color:#ded3bf;padding:9px 10px;font-size:12px;min-width:0;border-radius:0;box-shadow:inset 0 2px 6px #000; color-scheme:dark}
.pn-search-row input{width:210px}.pn-search-row input::placeholder{color:#8f8578}
.pn-search-row [role=status]{margin-left:auto;font-size:12px;color:#a79a85}
.pn-class{margin:30px 0 42px}
.pn-class-heading{position:relative;display:flex;align-items:center;gap:18px;min-height:100px;padding:24px 28px;margin-bottom:20px;border:1px solid #60533f;background:linear-gradient(90deg,#100d0be6,#15110d50,#0c0b0bba),var(--pn-class-art) center 28%/cover;box-shadow:inset 0 0 0 3px #080706,inset 0 0 0 4px #67523c55}
.pn-class-heading:after{content:"";position:absolute;bottom:0;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,#b69a6a,transparent)}
.pn-class-heading h3{font-family:var(--sanctuary-heading,'Noto Serif SC','Songti SC',SimSun,serif);font-size:27px;letter-spacing:4px;font-weight:600;color:#e7d6b8;margin:0;text-shadow:0 2px 4px #000}
.pn-class-heading>span{font-size:11px;color:#bcad94;padding-top:5px}
.pn-skill{position:relative;margin:0 0 24px;border:1px solid #574a3a;background:linear-gradient(110deg,#191612,#0f0e0c);box-shadow:0 5px 14px #0003,inset 0 0 0 3px #080706}
.pn-skill-heading{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid #65523c;background:linear-gradient(90deg,#27221bcc,#191613ee),var(--pn-class-art) center 50%/cover}
.pn-icon{position:relative;display:inline-flex;flex:0 0 64px;width:64px;height:64px;align-items:center;justify-content:center;filter:drop-shadow(0 2px 3px #000)}
.pn-icon:after{content:"";position:absolute;inset:0;background:url('/public/img/d4-s14-ui/skill-frames/active-ready.png') center/100% 100% no-repeat;pointer-events:none}
.pn-icon img{position:relative;z-index:1;width:32px;height:32px;object-fit:contain;background:#080706}
.pn-skill-heading h4{font-family:var(--sanctuary-heading,'Noto Serif SC','Songti SC',SimSun,serif);font-size:21px;font-weight:600;letter-spacing:2px;color:#e4d4b5;margin:0 0 4px;text-shadow:0 2px 2px #000}
.pn-skill-heading small{font-size:10px;color:#a39886;letter-spacing:.6px}
.pn-info{position:relative;margin-left:auto;flex-shrink:0}
.pn-info>button{color:#d7c09a;border:1px solid #7f6848;background:linear-gradient(#33291e,#191510);box-shadow:inset 0 0 0 2px #0c0907;padding:9px 12px;font-size:11px;cursor:pointer}
.pn-info>button:hover,.pn-info>button[aria-expanded=true]{color:#f0ddba;border-color:#c2a16c;background:linear-gradient(#4b3524,#251911)}
.pn-tooltip{display:none;position:absolute;right:0;top:calc(100% + 10px);width:330px;max-width:calc(100vw - 65px);padding:20px 25px 22px;background:linear-gradient(#171410f2,#080807fa),var(--pn-class-art) center/cover;border:1px solid #a08760;box-shadow:0 14px 40px #000e,inset 0 0 0 3px #080706,inset 0 0 0 4px #6f5c4066;z-index:30;line-height:1.9}
.pn-info:hover .pn-tooltip,.pn-info.is-open .pn-tooltip{display:block}.pn-info.is-dismissed .pn-tooltip{display:none}
.pn-tooltip .pn-detail-icon{display:flex;margin:0 auto 8px;width:76px;height:76px}.pn-detail-icon img{width:38px;height:38px}
.pn-tooltip>strong{display:block;text-align:center;font-family:var(--sanctuary-heading,'Noto Serif SC','Songti SC',SimSun,serif);font-size:23px;letter-spacing:3px;color:#ecd7ae;border-bottom:1px solid #6b5638;padding-bottom:12px}
.pn-tooltip .pn-tags{font-size:11px;text-align:center;color:#b7a88e;margin:12px 0}
.pn-tooltip .pn-description{font-size:13px;white-space:pre-line;color:#ddd4c6}
.pn-tooltip small{display:block;font-size:10px;line-height:1.8;color:#a49a88;border-top:1px solid #4a4031;margin-top:15px;padding-top:12px}
.pn-change{padding:18px 22px 20px}.pn-change+.pn-change{border-top:1px solid #40362a}
.pn-change-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px;color:#c7b99f;font-size:12px}.pn-change-heading>span:before{content:'◆';color:#8f7954;font-size:8px;margin-right:8px}
.pn-change-heading small{font-size:10px;color:#b5a182}.pn-change-heading .pn-buff{margin-left:auto;color:#aebd8d}.pn-change-heading .pn-nerf{margin-left:auto;color:#d59986}
.pn-comparison{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #4c4030;border-bottom:1px solid #332b22}
.pn-comparison>div{padding:14px 18px 16px}.pn-before{background:#0c0b0980}.pn-after{background:linear-gradient(100deg,#342b1d44,#231e1533);border-left:1px solid #5b4a33}
.pn-side-label{font-size:11px;letter-spacing:2px;color:#a99c85}.pn-after .pn-side-label{color:#d4bd94}
.pn-comparison p,.pn-mechanism p{font-size:14px;line-height:2;margin:8px 0 0}.pn-before p{color:#b8b0a3}
.pn-before strong{color:#b7ab99;font-weight:500;text-decoration:line-through;text-decoration-color:#89765b}.pn-after strong{color:#d4e2ab;font-weight:700}.pn-change:has(.pn-nerf) .pn-after strong{color:#e1a28e}
.pn-mechanism{border-left:2px solid #907344;background:#211c1566;padding:12px 18px}.pn-mechanism p{white-space:pre-line}
.pn-empty{padding:30px;color:#b5a78f}.pn button:focus-visible,.pn input:focus-visible,.pn select:focus-visible{outline:2px solid #d2b682;outline-offset:3px}
@media(max-width:650px){.pn-heading{padding:24px 16px}.pn-heading h2{font-size:24px;letter-spacing:3px}.pn-classes button{flex:1 0 27%;padding:10px}.pn-search-row{gap:12px}.pn-search-row label{width:100%;justify-content:space-between}.pn-search-row input,.pn-search-row select{width:70%}.pn-search-row [role=status]{margin-left:0}.pn-comparison{grid-template-columns:1fr}.pn-after{border-left:0;border-top:1px solid #4f402b}.pn-skill-heading{padding:12px 10px;gap:9px}.pn-icon{flex-basis:54px;width:54px;height:54px}.pn-icon img{width:27px;height:27px}.pn-skill-heading h4{font-size:18px;letter-spacing:1px}.pn-skill-heading small{overflow-wrap:anywhere}.pn-info>button{padding:9px 8px}.pn-change{padding:15px 12px}.pn-class-heading{padding:22px 20px;min-height:86px;gap:12px}.pn-class-heading h3{font-size:24px}.pn-tooltip{padding:18px}.pn-tooltip .pn-detail-icon img{width:38px;height:38px}.pn-change-heading{flex-wrap:wrap}}

/* Keep the full skill wording readable and color the actual change by direction. */
.pn-comparison p,.pn-source-description p{white-space:pre-line}
.pn-source-description{padding:14px 18px;margin-bottom:14px;background:#0b0a0880;border:1px solid #493b2b}
.pn-source-description p{font-size:14px;line-height:2;margin:8px 0;color:#d4ccbf}
.pn-source-description small{display:block;font-size:11px;line-height:1.8;color:#a99c85;margin-top:10px}
.pn .is-buff .pn-after strong,.pn .is-buff .pn-buff,.pn .is-buff .pn-after .pn-side-label{color:#70d68c}
.pn .is-nerf .pn-after strong,.pn .is-nerf .pn-nerf,.pn .is-nerf .pn-after .pn-side-label{color:#f07870}
.pn .is-buff .pn-after{border-left-color:#447454}.pn .is-nerf .pn-after{border-left-color:#984d46}