@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cinzel+Decorative:wght@700;900&display=swap');

/* Authentic Diablo II: Lord of Destruction seven-class selector */
.lod-character-section{padding-bottom:20px}
.lod-section-heading{text-align:center;margin:0 auto 16px}
.lod-section-heading h2{margin:0;font-family:"Cinzel Decorative","Cinzel",Georgia,serif;color:#d9bc84;font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:.025em;text-shadow:0 2px 0 #21160b,0 0 10px rgba(216,181,117,.16)}
.lod-section-heading p{margin:7px 0 0;color:#bcb2a2;font-size:15px;font-weight:600;letter-spacing:.02em}
.lod-stage-shell{max-width:1000px;margin:0 auto}
.lod-scene{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid #4b4034;border-radius:10px;background:#000;box-shadow:0 0 0 1px rgba(214,168,96,.07),inset 0 0 36px rgba(0,0,0,.45)}
.lod-background{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;image-rendering:pixelated;user-select:none;pointer-events:none;z-index:1}
.lod-scene:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 38px rgba(0,0,0,.3)}
.lod-scene-title{position:absolute;top:2.4%;left:50%;z-index:70;transform:translateX(-50%);font-family:"Cinzel Decorative","Cinzel",Georgia,serif;font-size:clamp(14px,2.1vw,25px);font-weight:700;letter-spacing:.09em;color:#c9aa6a;text-shadow:0 2px 1px #120c06,0 0 7px #000,0 0 12px rgba(190,145,66,.22);white-space:nowrap;pointer-events:none}
.lod-hover-label{position:absolute;top:9.1%;left:50%;z-index:70;transform:translateX(-50%);min-height:20px;font-family:"Cinzel",Georgia,serif;font-size:clamp(10px,1.35vw,15px);font-weight:600;letter-spacing:.12em;color:#d9bc84;text-shadow:0 2px 5px #000;opacity:0;transition:opacity .14s ease;pointer-events:none}
.lod-hover-label.is-visible{opacity:1}

/* Fire keeps its original 800x600 placement. */
.lod-fire{position:absolute;z-index:20;left:43.125%;top:54.5%;width:13.75%;height:auto;display:block;image-rendering:pixelated;pointer-events:none;user-select:none;mix-blend-mode:normal;filter:drop-shadow(0 0 6px rgba(255,132,37,.5))}

/* Character images are full native DC6 canvases. Their left/top values below are canvas top-left coordinates, not visible-body centers. */
.lod-character{position:absolute;pointer-events:none;filter:none;transition:filter .15s ease,opacity .15s ease}
.lod-character img{position:absolute;inset:0;width:100%;height:auto;display:block;image-rendering:pixelated;pointer-events:none;user-select:none}
.lod-character .lod-main{z-index:2}
.lod-character .lod-fx{z-index:1}
.lod-character.is-hovered{filter:brightness(1.12) drop-shadow(0 0 5px rgba(236,188,105,.28))}
.lod-character.is-selected{filter:brightness(1.16) drop-shadow(0 0 7px rgba(237,174,71,.38))}
.lod-character.is-dimmed{filter:brightness(.72);opacity:.82}

/* Amazon's detached FWs layer is intentionally hidden; the main FW frames already contain the visible weapon. */
.lod-character-amazon .lod-fx{display:none!important}
.lod-character-necromancer .lod-fx{mix-blend-mode:screen;filter:brightness(1.15) saturate(1.1)}

/* Stable Necromancer selected body. JS only shows this after his forward animation finishes. */
.lod-character-necromancer .lod-necro-fixed-body{position:absolute;inset:0;width:100%;height:auto;display:block;z-index:2;image-rendering:pixelated;pointer-events:none;user-select:none}
.lod-character-necromancer .lod-necro-fixed-body[hidden]{display:none!important}

/*
  Symmetric U-shape around the bonfire.
  Barbarian is centered over the fire. The three classes on each side are evenly spaced,
  and each step outward sits farther forward/lower on the scene.

  Approximate visible foot targets at the native 800x600 scene:
  Amazon 85,455 | Assassin 190,435 | Necromancer 295,410 |
  Barbarian 400,385 | Paladin 505,410 | Sorceress 610,435 | Druid 715,455
*/
.lod-character-amazon{left:-10.75%;top:34%;width:35.875%}
.lod-character-assassin{left:14.1875%;top:39.5%;width:29.5%}
.lod-character-necromancer{left:25.25%;top:17.667%;width:24.375%}
.lod-character-barbarian{left:38.625%;top:24.5%;width:23.125%}
.lod-character-paladin{left:47.75%;top:29%;width:23.875%}
.lod-character-sorceress{left:69.1875%;top:33.667%;width:16.75%}
.lod-character-druid{left:77.5625%;top:40.167%;width:18.125%}

/* Hit areas follow the visible characters, not their large transparent animation canvases. */
.lod-hitbox{position:absolute;z-index:60;border:0;margin:0;padding:0;background:transparent;cursor:pointer;border-radius:8px;transform:translate(-50%,-50%)}
.lod-hitbox:focus-visible{outline:2px solid rgba(216,181,117,.9);outline-offset:2px;background:rgba(216,181,117,.035)}
.lod-hitbox-amazon{left:10.625%;top:59.333%;width:12%;height:36%}
.lod-hitbox-assassin{left:23.75%;top:56.75%;width:9%;height:35%}
.lod-hitbox-necromancer{left:36.875%;top:53.083%;width:10%;height:36%}
.lod-hitbox-barbarian{left:50%;top:48.917%;width:12%;height:37%}
.lod-hitbox-paladin{left:63.125%;top:53.417%;width:11%;height:36%}
.lod-hitbox-sorceress{left:76.25%;top:58.667%;width:10%;height:35%}
.lod-hitbox-druid{left:89.375%;top:59.25%;width:12%;height:37%}

/* Old selected-class bar is retained for selector state, but no longer shown. */
.lod-selection-bar,.lod-status{display:none!important}

/* Automatic class build display */
.class-builds-panel{margin-top:18px;padding-top:26px;overflow:visible}
.class-builds-panel[hidden]{display:none!important}
.class-builds-heading{text-align:center;margin:0 auto 24px;max-width:820px}
.class-builds-heading h2{margin:0;font-family:"Cinzel Decorative","Cinzel",Georgia,serif;color:#d9bc84;font-size:clamp(27px,3.5vw,40px);font-weight:700;letter-spacing:.03em;text-shadow:0 2px 0 #21160b,0 0 12px rgba(216,181,117,.16)}
.class-builds-heading p{margin:8px 0 0;color:#a9a092;font-size:14px}
.build-category{margin-top:26px}
.build-category:first-child{margin-top:0}
.build-category-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid #40382e}
.build-category-heading h3{margin:0;font-family:"Cinzel",Georgia,serif;color:#d6b879;font-size:22px;letter-spacing:.035em}
.build-category-heading p{margin:0;color:#8f887d;font-size:12px;text-align:right}
.build-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.build-card{min-width:0;padding:15px;border:1px solid #3c352d;border-radius:9px;background:linear-gradient(180deg,#111214,#0b0c0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.build-card-head{margin-bottom:9px}
.build-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px 11px;min-width:0}
.build-card h4{margin:0;font-family:"Cinzel",Georgia,serif;color:#ead8b5;font-size:20px;font-weight:600;letter-spacing:.025em}
.build-head-links{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.build-head-links-label{color:#7f786d;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.build-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}
.build-details.one-detail{grid-template-columns:1fr}
.build-detail{min-width:0;padding:8px 9px;border:1px solid #302b25;border-radius:6px;background:#0a0b0c}
.build-detail span,.build-block-label,.build-rating>span,.build-notes span{display:block;margin-bottom:3px;color:#7f786d;font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.build-detail strong{display:block;color:#c9c0b2;font-size:12px;font-weight:650;line-height:1.35}
.build-details.one-detail .build-detail strong{white-space:nowrap}
.build-area-token{display:inline!important;margin:0!important;color:#cfc5b4!important;font-size:12px!important;font-weight:650!important;letter-spacing:0!important;text-transform:none!important}
.build-area-separator{display:inline!important;margin:0 6px!important;color:#665f55!important;font-size:11px!important;letter-spacing:0!important;text-transform:none!important}
.build-ratings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}
.build-rating{padding:7px 8px;border:1px solid #302b25;border-radius:6px;background:#0a0b0c;text-align:center}
.build-rating-value{display:inline-flex;align-items:center;justify-content:center;font-family:"Cinzel",Georgia,serif;font-size:19px;font-weight:700;color:#d8c9aa}
.build-rating-value.rank-S{color:#efcb67}
.build-rating-value.rank-A{color:#b8d28d}
.build-rating-value.rank-B{color:#d6c59e}
.build-rating-value.rank-C{color:#c99577}
.build-rating-value.rank-D,.build-rating-value.rank-F{color:#ad7777}
.build-block{margin-top:11px}
.build-chip-row{display:flex;flex-wrap:wrap;gap:6px}
.build-chip-row>span,.build-gear{display:inline-flex;align-items:center;min-height:27px;padding:4px 8px;border:1px solid #373129;border-radius:999px;background:#0d0e0f;color:#bdb4a6;font-size:11px;line-height:1.2;text-decoration:none}
a.build-gear:hover{border-color:#735c39;color:#e6d3aa}
.build-link{display:inline-flex;align-items:center;min-height:25px;padding:3px 8px;border:1px solid #654c2d;border-radius:6px;background:linear-gradient(#2a2016,#17110d);color:#e5d4b3;font-size:10px;font-weight:750;text-decoration:none;white-space:nowrap}
.build-link:hover{border-color:#96713d;background:linear-gradient(#362719,#20150e)}
.build-notes{margin:11px 0 0;padding:9px 10px;border-left:2px solid #705631;background:#0c0d0e;color:#aaa196;font-size:12px;line-height:1.45}
.build-empty{margin:10px 0 0;color:#777168;font-size:12px;font-style:italic}
.builds-empty-state{padding:30px 18px;border:1px dashed #3c352d;border-radius:9px;text-align:center;color:#8f887d;background:#0b0c0d}

/* Hover/focus definitions for abbreviations and rating letters. */
.has-tooltip{position:relative;display:inline-flex!important;cursor:help;outline:none}
.has-tooltip::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);z-index:200;transform:translate(-50%,4px);width:max-content;max-width:270px;padding:7px 9px;border:1px solid #705631;border-radius:6px;background:#08090a;color:#e0d4bf;font-family:Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:0;line-height:1.35;text-align:center;text-transform:none;white-space:normal;box-shadow:0 6px 18px rgba(0,0,0,.55);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,transform .12s ease,visibility .12s ease}
.has-tooltip::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);z-index:201;transform:translateX(-50%);border:5px solid transparent;border-top-color:#705631;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease}
.has-tooltip:hover::after,.has-tooltip:focus::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.has-tooltip:hover::before,.has-tooltip:focus::before{opacity:1;visibility:visible}
.build-area-token.has-tooltip{border-bottom:1px dotted #8d734d;color:#d7c59f!important}
.build-detail-rating.has-tooltip{display:inline-flex!important;border-bottom:1px dotted #8d734d;color:#d7c59f!important;font-size:12px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important}

/* Expanded informational hover card used for CZ. */
.has-rich-tooltip{position:relative;display:inline!important;cursor:help;outline:none;border-bottom:1px dotted #8d734d}
.rich-tooltip-card{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:260;transform:translate(-50%,6px);width:420px;max-width:78vw;padding:14px 15px;border:1px solid var(--accent-border,#705631);border-radius:8px;background:linear-gradient(180deg,#111417,#08090a);box-shadow:0 10px 30px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.035);opacity:0;visibility:hidden;pointer-events:auto;transition:opacity .14s ease,transform .14s ease,visibility .14s ease;text-align:left;white-space:normal}
.rich-tooltip-card,.rich-tooltip-card span{display:block!important;margin:0!important;color:#d7d0c5!important;font-family:Arial,sans-serif!important;font-size:12px!important;font-weight:400!important;letter-spacing:0!important;line-height:1.5!important;text-transform:none!important}
.rich-tooltip-card::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--accent-border,#705631)}
.rich-tooltip-card .rich-tooltip-title{margin-bottom:8px!important;color:var(--accent,#d9bc84)!important;font-family:"Cinzel",Georgia,serif!important;font-size:15px!important;font-weight:700!important;letter-spacing:.025em!important}
.rich-tooltip-card .rich-tooltip-copy{margin-top:7px!important}
.rich-tooltip-card .rich-tooltip-list{margin-top:7px!important}
.rich-tooltip-card .rich-tooltip-item{position:relative;padding-left:14px!important;margin-top:5px!important}
.rich-tooltip-card .rich-tooltip-item::before{content:"•";position:absolute;left:0;color:var(--accent,#d9bc84)}
.rich-tooltip-card .rich-tooltip-footer{padding-top:8px!important;margin-top:9px!important;border-top:1px solid rgba(255,255,255,.08)}
.rich-tooltip-card a{color:#8ec7ea;text-decoration:underline;text-underline-offset:2px}
.rich-tooltip-card a:hover{color:#c3e8ff}
.has-rich-tooltip:hover .rich-tooltip-card,.has-rich-tooltip:focus .rich-tooltip-card,.has-rich-tooltip:focus-within .rich-tooltip-card{opacity:1;visibility:visible;transform:translate(-50%,0)}

@media(max-width:760px){
  .lod-character-section{padding-left:10px;padding-right:10px}
  .lod-section-heading{margin-bottom:12px}
  .lod-section-heading h2{font-size:22px}
  .lod-section-heading p{font-size:13px}
  .lod-scene{border-radius:7px}
  .lod-scene-title{top:2%;font-size:13px}
  .lod-hover-label{top:8.5%;font-size:10px}
  .class-builds-panel{margin-top:12px;padding:18px 12px}
  .class-builds-heading{margin-bottom:18px}
  .class-builds-heading h2{font-size:24px}
  .build-category-heading{display:block}
  .build-category-heading h3{font-size:19px}
  .build-category-heading p{margin-top:4px;text-align:left}
  .build-grid{grid-template-columns:1fr}
  .build-card h4{font-size:18px}
  .build-details.one-detail .build-detail strong{white-space:normal}
  .build-head-links{width:100%}
  .has-tooltip::after{max-width:210px}
  .rich-tooltip-card{left:-8px;transform:translateY(6px);width:min(360px,calc(100vw - 52px));max-width:none}
  .rich-tooltip-card::after{left:22px;transform:none}
  .has-rich-tooltip:hover .rich-tooltip-card,.has-rich-tooltip:focus .rich-tooltip-card,.has-rich-tooltip:focus-within .rich-tooltip-card{transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  .lod-character,.lod-hover-label,.has-tooltip::after,.has-tooltip::before,.rich-tooltip-card{transition:none}
}