/* Project Diablo 2 Map Index */
body.map-index-open{overflow:hidden}

.map-index-backdrop{
  position:fixed;
  inset:0;
  z-index:1400;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:18px 10px;
  overflow:auto;
  background:rgba(0,0,0,.84);
  backdrop-filter:blur(3px);
}
.map-index-backdrop.is-open{display:flex}

.map-index-modal{
  position:relative;
  width:min(1220px,98vw);
  max-height:95vh;
  margin:auto;
  overflow:auto;
  border:1px solid #5c462a;
  border-radius:12px;
  background:linear-gradient(180deg,#101214,#08090a);
  box-shadow:0 28px 80px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.025);
  color:#e8ddcc;
}
.map-index-frame{padding:18px}
.map-index-close{
  position:absolute;
  right:12px;
  top:12px;
  z-index:3;
  width:36px;
  height:36px;
  border:1px solid #5b482f;
  border-radius:7px;
  background:#0b0c0d;
  color:#d8c6a8;
  font-size:22px;
  cursor:pointer;
}
.map-index-close:hover,.map-index-close:focus-visible{border-color:#a9783e;color:#fff0d1;outline:none}

.map-index-title{
  padding-right:48px;
  text-align:center;
}
.map-index-title h2{
  margin:0;
  font-family:"Cinzel Decorative","Cinzel",Georgia,serif;
  font-size:clamp(28px,3.4vw,41px);
  color:#ead8b7;
  letter-spacing:.035em;
  text-shadow:0 2px 0 #130d07;
}

.map-element-panel{
  max-width:1020px;
  margin:14px auto 13px;
  padding:11px 12px 12px;
  border:1px solid #4c3b28;
  border-radius:9px;
  background:linear-gradient(180deg,#111315,#0c0e10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.map-element-label{
  display:block;
  margin:0 0 9px;
  text-align:center;
  color:#dfa35d;
  font-family:"Cinzel",Georgia,serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.map-element-buttons{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;
}
.map-element-button{
  min-height:40px;
  border:1px solid #3b3731;
  border-radius:7px;
  background:linear-gradient(#15171a,#0c0e10);
  color:#d6cec1;
  font-family:"Cinzel",Georgia,serif;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease;
}
.map-element-button:hover,.map-element-button:focus-visible{border-color:#79603d;transform:translateY(-1px);outline:none}
.map-element-button.is-active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.map-element-button[data-element="physical"].is-active{border-color:#b69b77;color:#ead9bc;background:linear-gradient(#29231b,#15120e)}
.map-element-button[data-element="magic"].is-active{border-color:#9f72c9;color:#d2aaf2;background:linear-gradient(#25172e,#120c16)}
.map-element-button[data-element="fire"].is-active{border-color:#c96c3c;color:#ff9a68;background:linear-gradient(#321a13,#170d0a)}
.map-element-button[data-element="light"].is-active{border-color:#d1a032;color:#f1c65a;background:linear-gradient(#2d2412,#151008)}
.map-element-button[data-element="cold"].is-active{border-color:#5d9fc8;color:#8ed1f4;background:linear-gradient(#132432,#0a1117)}
.map-element-button[data-element="poison"].is-active{border-color:#679b48;color:#9bd276;background:linear-gradient(#182514,#0c120a)}
.map-element-reset{border-color:#5d4d3c;color:#bfb2a1;background:linear-gradient(#171717,#0c0d0e)}
.map-element-reset:hover,.map-element-reset:focus-visible{border-color:#a9783e;color:#f2d9b6}

.map-count-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 7px;
}
.map-count{color:#d6b77f;font-family:"Cinzel",Georgia,serif;font-size:11px;font-weight:700;letter-spacing:.055em}
.map-source-link{color:#8d8579;font-size:10px;text-decoration:none}
.map-source-link:hover{color:#cdbb9d;text-decoration:underline}

.map-list-shell{
  border:1px solid #3e362b;
  border-radius:7px;
  overflow:hidden;
  background:#090a0b;
}
.map-list-scroll{max-height:46vh;overflow:auto}
.map-list-header,.map-list-row{
  display:grid;
  grid-template-columns:minmax(220px,1.7fr) 58px repeat(6,minmax(72px,.72fr));
  align-items:stretch;
  min-width:850px;
}
.map-list-header{
  min-height:34px;
  padding:0;
  border-bottom:1px solid #514127;
  color:#aa946e;
  font-family:"Cinzel",Georgia,serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.045em;
}
.map-list-header>span{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  border-right:1px solid #292b2e;
  text-align:center;
}
.map-list-header>span:first-child{justify-content:flex-start}
.map-list-header>span:last-child{border-right:0}
.map-column-head.el-physical{color:#d7c4a4;background:rgba(190,168,130,.055)}
.map-column-head.el-magic{color:#c99ae8;background:rgba(164,104,204,.06)}
.map-column-head.el-fire{color:#f18563;background:rgba(214,85,55,.065)}
.map-column-head.el-light{color:#edc655;background:rgba(223,176,49,.06)}
.map-column-head.el-cold{color:#86c9eb;background:rgba(78,158,207,.065)}
.map-column-head.el-poison{color:#9bcd79;background:rgba(103,161,71,.065)}

.map-list-row{
  width:100%;
  min-height:33px;
  padding:0;
  border:0;
  border-bottom:1px solid #252729;
  background:linear-gradient(90deg,#101214,#0c0e10);
  color:#ddd4c5;
  text-align:left;
  cursor:pointer;
  font-size:11.5px;
}
.map-list-row:last-child{border-bottom:0}
.map-list-row:hover,.map-list-row:focus-visible{background:linear-gradient(90deg,#191713,#111214);outline:none}
.map-list-row.is-selected{box-shadow:inset 0 0 0 1px #a36f2f;background:linear-gradient(90deg,#20180e,#111214)}
.map-list-row>span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:0 8px;
  border-right:1px solid #24272a;
}
.map-list-row>span:last-child{border-right:0}
.map-list-name{
  justify-content:flex-start!important;
  font-family:"Cinzel",Georgia,serif;
  font-size:12px;
  font-weight:700;
  color:#eadbc2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.map-list-tier{color:#c5b9a6;font-weight:700}
.map-res-cell{position:relative;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.map-res-cell.el-physical{color:#d3c1a3;background:rgba(185,163,126,.045)}
.map-res-cell.el-magic{color:#c692e2;background:rgba(159,102,196,.05)}
.map-res-cell.el-fire{color:#ed7659;background:rgba(215,78,48,.052)}
.map-res-cell.el-light{color:#e8b93f;background:rgba(215,164,35,.05)}
.map-res-cell.el-cold{color:#77bee3;background:rgba(68,147,197,.052)}
.map-res-cell.el-poison{color:#8fbe6d;background:rgba(92,145,61,.052)}
.map-res-cell.has-immunity{font-size:12.5px;font-weight:900;text-shadow:0 0 8px currentColor}
.map-res-cell.special-only{font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
.map-list-empty{padding:28px 16px;text-align:center;color:#8d8579;font-size:12px}

/* Hover card for the wiki's * notation. */
.has-map-tooltip::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 7px);
  z-index:30;
  transform:translate(-50%,4px);
  width:290px;
  max-width:70vw;
  padding:8px 10px;
  border:1px solid #765a35;
  border-radius:6px;
  background:#08090a;
  color:#e1d3bb;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1.35;
  white-space:normal;
  box-shadow:0 8px 24px rgba(0,0,0,.62);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.12s ease;
}
.has-map-tooltip:hover::after,.has-map-tooltip:focus::after{opacity:1;visibility:visible;transform:translate(-50%,0)}

.map-detail{
  margin-top:12px;
  border:1px solid #594326;
  border-radius:8px;
  background:linear-gradient(135deg,#12110e,#090a0b 58%,#0d0f10);
  overflow:hidden;
}
.map-detail[hidden]{display:none!important}
.map-detail-head{display:flex;align-items:center;gap:10px;padding:12px 14px 4px}
.map-detail-head h3{
  margin:0;
  font-family:"Cinzel Decorative","Cinzel",Georgia,serif;
  font-size:clamp(22px,2.6vw,31px);
  color:#e7d4b2;
}
.map-tier-badge{display:inline-flex;align-items:center;min-height:24px;padding:2px 7px;border:1px solid #665036;border-radius:5px;background:#11100d;color:#d3b279;font-family:"Cinzel",Georgia,serif;font-size:9px;font-weight:700}
.map-detail-grid{display:grid;grid-template-columns:minmax(500px,.95fr) minmax(430px,1.05fr);gap:0}
.map-monsters,.map-layouts{padding:11px 14px 15px;min-width:0}
.map-layouts{border-left:1px solid #332b21}
.map-detail-label{margin:0 0 8px;color:#d9964b;font-family:"Cinzel",Georgia,serif;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.map-table-wrap{overflow:auto;border-radius:6px}

.map-monster-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:10px;min-width:620px}
.map-monster-table th,.map-monster-table td{border:1px solid #302d28;padding:6px 5px;text-align:center}
.map-monster-table th{background:#111214;color:#bba681;font-size:9px}
.map-monster-table th:first-child,.map-monster-table td:first-child{text-align:left;width:34%}
.map-monster-table td:first-child{color:#ddd1bf;background:#0d0e0f}
.map-monster-table .physical,.map-monster-table .el-physical{color:#d3c1a3;background:rgba(185,163,126,.055)}
.map-monster-table .magic,.map-monster-table .el-magic{color:#c692e2;background:rgba(159,102,196,.06)}
.map-monster-table .fire,.map-monster-table .el-fire{color:#ed7659;background:rgba(215,78,48,.06)}
.map-monster-table .light,.map-monster-table .el-light{color:#e8b93f;background:rgba(215,164,35,.06)}
.map-monster-table .cold,.map-monster-table .el-cold{color:#77bee3;background:rgba(68,147,197,.06)}
.map-monster-table .poison,.map-monster-table .el-poison{color:#8fbe6d;background:rgba(92,145,61,.06)}
.map-monster-table td.is-immune{font-weight:900;text-shadow:0 0 7px currentColor}
.map-detail-placeholder{padding:20px 14px;border:1px dashed #40372d;border-radius:6px;color:#8d8579;font-size:11px;line-height:1.5;background:#0b0c0d}
.map-immunity-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:9px}
.map-immunity-box{padding:7px 5px;border:1px solid #302d28;border-radius:5px;background:#0c0d0e;text-align:center;font-size:10px}
.map-immunity-box span{display:block;margin-bottom:3px;color:#81796f;font-size:8px;text-transform:uppercase;letter-spacing:.07em}
.map-immunity-box strong{font-size:12px}
.map-immunity-box.el-physical{border-color:#4a4133}.map-immunity-box.el-magic{border-color:#493451}.map-immunity-box.el-fire{border-color:#553126}.map-immunity-box.el-light{border-color:#55451f}.map-immunity-box.el-cold{border-color:#29485b}.map-immunity-box.el-poison{border-color:#33482a}

.map-layout-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.map-layout-thumb{
  flex:0 0 145px;
  height:80px;
  padding:3px;
  border:1px solid #453a2c;
  border-radius:6px;
  background:#070809;
  cursor:pointer;
}
.map-layout-thumb.is-active{border-color:#c58035;box-shadow:0 0 0 1px rgba(197,128,53,.18) inset}
.map-layout-thumb img{width:100%;height:100%;display:block;object-fit:contain;background:#050505}
.map-layout-preview{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:330px;
  margin-top:5px;
  border:1px solid #4a4032;
  border-radius:6px;
  overflow:hidden;
  background:#030404;
}
.map-layout-preview img{display:block;max-width:100%;max-height:55vh;object-fit:contain}
.map-layout-nav{
  position:absolute;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border:1px solid #5c4932;
  border-radius:50%;
  background:rgba(20,17,12,.88);
  color:#ead3ad;
  font-size:25px;
  cursor:pointer;
}
.map-layout-nav.prev{left:10px}.map-layout-nav.next{right:10px}
.map-layout-nav:hover,.map-layout-nav:focus-visible{border-color:#a9773c;outline:none}
.map-layout-counter{position:absolute;right:10px;bottom:8px;padding:3px 6px;border:1px solid #443726;border-radius:4px;background:rgba(7,8,9,.82);color:#c9b38d;font-size:9px}
.map-layout-help{margin:7px 0 0;color:#8e867a;font-size:9px;text-align:center}

@media(max-width:980px){
  .map-element-buttons{grid-template-columns:repeat(4,1fr)}
  .map-detail-grid{grid-template-columns:1fr}
  .map-layouts{border-left:0;border-top:1px solid #332b21}
}
@media(max-width:650px){
  .map-index-backdrop{padding:5px}
  .map-index-frame{padding:12px 8px}
  .map-element-buttons{grid-template-columns:repeat(2,1fr)}
  .map-list-header,.map-list-row{grid-template-columns:180px 54px repeat(6,68px)}
  .map-detail-head{padding-left:10px}
  .map-monsters,.map-layouts{padding:10px}
  .map-layout-preview{min-height:240px}
}