/* Guide tools + Project Diablo 2 skill calculator */

.guide-tools{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:10px 0 16px;
}

.guide-tool-button{
  min-height:62px;
  text-align:left;
  border:1px solid #4a3b2a;
  background:linear-gradient(180deg,#17191d,#0d0f12);
  color:#f0e3cf;
  border-radius:10px;
  padding:11px 13px;
  cursor:pointer;
  transition:border-color .18s ease,transform .18s ease,background .18s ease;
}

.guide-tool-button:hover,
.guide-tool-button:focus-visible{
  border-color:#a4773d;
  transform:translateY(-1px);
  outline:none;
}

.guide-tool-button strong{
  display:block;
  font-family:"Cinzel",Georgia,serif;
  font-size:16px;
  letter-spacing:.02em;
  color:#e7c995;
}

.guide-tool-button span{
  display:block;
  margin-top:3px;
  color:#938b7e;
  font-size:11px;
}

.guide-tool-button.skill-tool{
  border-color:#536735;
  background:linear-gradient(180deg,#182016,#0d110c);
}

.guide-tool-button.skill-tool strong{
  color:#c9df8e;
}


/* =========================================================
   MODAL
   ========================================================= */

body.skill-calc-open{
  overflow:hidden;
}

.skill-calc-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:24px 12px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(2px);
  overflow:auto;
}

.skill-calc-backdrop.is-open{
  display:flex;
}

.skill-calc-modal{
  position:relative;
  width:min(920px,100%);
  margin:auto;
  border:1px solid #5d472e;
  border-radius:10px;
  background:linear-gradient(180deg,#111315,#090a0b);
  box-shadow:
    0 24px 70px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.025);
  overflow:visible;
}

.skill-calc-frame{
  padding:16px;
}

.skill-calc-title{
  margin:0 44px 14px;
  text-align:center;
  font-family:"Cinzel Decorative","Cinzel",Georgia,serif;
  font-size:clamp(22px,3vw,31px);
  color:#d99752;
  letter-spacing:.035em;
  text-shadow:0 2px 0 #120c07;
}

.skill-calc-close{
  position:absolute;
  right:11px;
  top:9px;
  width:34px;
  height:34px;
  border:1px solid #56432f;
  border-radius:7px;
  background:#0b0c0e;
  color:#c9b99f;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.skill-calc-close:hover,
.skill-calc-close:focus-visible{
  border-color:#9f7545;
  color:#fff1d7;
  outline:none;
}


/* =========================================================
   TOP CONTROLS
   ========================================================= */

.skill-calc-controls{
  display:grid;
  grid-template-columns:minmax(175px,.9fr) minmax(330px,1.7fr) minmax(190px,.9fr);
  gap:12px;
  align-items:stretch;
  margin-bottom:12px;
}

.skill-control-box{
  border:1px solid #3a332a;
  border-radius:7px;
  background:linear-gradient(180deg,#101113,#0b0c0d);
  padding:11px;
}

.skill-control-label{
  display:block;
  margin-bottom:8px;
  color:#d68445;
  font-family:"Cinzel",Georgia,serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.skill-character-select{
  width:100%;
  height:39px;
  border:1px solid #594126;
  border-radius:6px;
  background:#0b0c0d;
  color:#eee3d2;
  padding:0 10px;
  font-family:Georgia,serif;
  font-size:15px;
}

.skill-character-select:focus{
  outline:1px solid #9c6f3b;
}


/* =========================================================
   SKILL QUEST BUTTONS
   ========================================================= */

.skill-quest-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}

.skill-quest-btn{
  min-height:37px;
  border:1px solid #56422c;
  border-radius:5px;
  background:linear-gradient(#17191c,#0d0f11);
  color:#ddd2c0;
  font-family:"Cinzel",Georgia,serif;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.skill-quest-btn:hover,
.skill-quest-btn:focus-visible{
  border-color:#8e683b;
  outline:none;
}

.skill-quest-btn.is-active{
  border-color:#718e42;
  background:linear-gradient(#263019,#11150d);
  color:#dff0aa;
  box-shadow:inset 0 0 0 1px rgba(172,210,91,.08);
}

.skill-reset-row{
  text-align:center;
  margin-top:9px;
}

.skill-reset-btn{
  min-width:150px;
  min-height:36px;
  border:1px solid #6c4928;
  border-radius:5px;
  background:linear-gradient(#2a1c12,#140f0b);
  color:#e2a869;
  font-family:"Cinzel",Georgia,serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
}

.skill-reset-btn:hover,
.skill-reset-btn:focus-visible{
  border-color:#a66b32;
  color:#ffd09a;
  outline:none;
}


/* =========================================================
   LEVEL / REMAINING / SPENT
   ========================================================= */

.skill-info-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border:1px solid #3b3328;
  border-radius:5px;
  overflow:hidden;
}

.skill-info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:31px;
  padding:6px 9px;
  border-top:1px solid #302a23;
  color:#cfc4b4;
  font-size:12px;
}

.skill-info-row:first-child{
  border-top:0;
}

.skill-info-row strong{
  font-family:"Cinzel",Georgia,serif;
  color:#f0dfc4;
  font-size:15px;
}

.skill-info-row.remaining strong{
  color:#b9d982;
}

.skill-info-row.spent strong{
  color:#dcad76;
}

.skill-calc-status{
  min-height:17px;
  margin:7px 0 0;
  text-align:center;
  color:#b0906c;
  font-size:11px;
}


/* =========================================================
   SKILL TREE
   ========================================================= */

.skill-tree-shell{
  position:relative;
  border:1px solid #4d3b29;
  border-radius:7px;
  background:#050606;
  padding:9px;
  overflow:visible;
}

/*
  IMPORTANT:
  Portal's original PD2 skill-tree artwork is 675 × 425.

  We keep both the background and our clickable skill positions at
  exactly that size. This keeps the active skill icon directly over
  the inactive icon underneath instead of allowing the browser to
  independently interpolate/scale them.
*/

.skill-tree-labels{
  width:675px;
  min-width:675px;
  margin:0 auto 7px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}

.skill-tree-labels span{
  text-align:center;
  font-family:"Cinzel",Georgia,serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.035em;
  color:#c8b99f;
}

.skill-tree-labels span:nth-child(1){
  color:#a8c9e9;
}

.skill-tree-labels span:nth-child(2){
  color:#b6a9dc;
}

.skill-tree-labels span:nth-child(3){
  color:#df9260;
}

.skill-tree-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  padding-bottom:3px;
}

.skill-tree-native{
  position:relative;

  /* Native Portal dimensions */
  width:675px;
  min-width:675px;
  max-width:none;
  height:425px;

  margin:0 auto;
  background:#0a0b0c;
  flex:none;
}

.skill-tree-bg{
  position:absolute;
  left:0;
  top:0;
  width:675px;
  height:425px;
  display:block;
  user-select:none;
  pointer-events:none;

  /*
    Do not resize this separately from .skill-tree-native.
    Both must stay at 675 × 425.
  */
  image-rendering:auto;
}

.skill-tree-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
  background:linear-gradient(180deg,#111315,#090a0b);
  color:#9f9688;
  font-size:13px;
  z-index:4;
}

.skill-tree-loading[hidden]{
  display:none;
}


/* =========================================================
   CLICKABLE SKILLS
   ========================================================= */

/*
  skill-calculator.js positions these buttons using the original
  Portal coordinates.

  At 675 × 425 each skill button becomes exactly 48 × 48 pixels,
  matching Portal's original skill slots.
*/

.skill-hit{
  position:absolute;
  z-index:8;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:not-allowed;
  overflow:visible;
}

.skill-hit img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  pointer-events:none;
  object-fit:contain;
  transition:opacity .12s ease,filter .12s ease;
}

.skill-hit.is-available{
  cursor:pointer;
}

.skill-hit.is-available img,
.skill-hit.is-invested img{
  opacity:1;
}

.skill-hit.is-invested img{
  filter:
    brightness(1.08)
    drop-shadow(0 0 3px rgba(221,181,100,.45));
}

.skill-hit:hover img,
.skill-hit:focus-visible img{
  filter:
    brightness(1.2)
    drop-shadow(0 0 4px rgba(224,180,97,.55));
}

.skill-hit:focus-visible{
  outline:1px solid rgba(216,173,99,.8);
  outline-offset:1px;
}


/* =========================================================
   SKILL POINT COUNTER
   ========================================================= */

.skill-count{
  position:absolute;
  left:50%;
  top:100%;
  transform:translate(-50%,2px);
  min-width:22px;
  height:17px;
  padding:0 4px;
  border:1px solid #6b512e;
  border-radius:2px;
  background:#090a0b;
  color:#e7cf9d;
  font-family:Georgia,serif;
  font-size:11px;
  line-height:15px;
  text-align:center;
  pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.65);
}

.skill-hit.is-invested .skill-count{
  border-color:#829b4d;
  color:#d9e9a9;
}

.skill-hit.is-maxed .skill-count{
  border-color:#557ba5;
  color:#a8d2ff;
}


/* =========================================================
   SKILL HOVER TOOLTIP
   ========================================================= */

.skill-hover-card{
  position:fixed;
  z-index:1300;
  width:min(330px,calc(100vw - 28px));
  padding:12px 13px;
  border:1px solid #765932;
  border-radius:7px;
  background:linear-gradient(180deg,#0f1113,#060708);
  box-shadow:0 12px 32px rgba(0,0,0,.72);
  color:#ddd3c3;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:
    opacity .1s ease,
    transform .1s ease,
    visibility .1s ease;
}

.skill-hover-card.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.skill-hover-title{
  margin:0 0 6px;
  font-family:"Cinzel",Georgia,serif;
  color:#a9d273;
  font-size:15px;
  font-weight:700;
  letter-spacing:.025em;
}

.skill-hover-meta{
  margin:0 0 7px;
  color:#9c9284;
  font-size:10px;
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.skill-hover-description{
  margin:0;
  color:#ddd4c6;
  font-size:12px;
  line-height:1.45;
  white-space:pre-line;
}

.skill-hover-section{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}

.skill-hover-section strong{
  display:block;
  margin-bottom:4px;
  color:#d49a60;
  font-family:"Cinzel",Georgia,serif;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.skill-hover-synergy,
.skill-hover-preview{
  color:#bdb3a4;
  font-size:11px;
  line-height:1.45;
  white-space:pre-line;
}

.skill-hover-preview div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px dotted rgba(255,255,255,.06);
  padding:3px 0;
}

.skill-hover-preview div:first-child{
  border-top:0;
}

.skill-hover-preview span:last-child{
  color:#e2c28d;
  text-align:right;
}


/* =========================================================
   SOURCE NOTE
   ========================================================= */

.skill-source-note{
  margin:8px 0 0;
  text-align:center;
  color:#6f695f;
  font-size:9px;
}

.skill-source-note a{
  color:#8d866f;
  text-decoration:none;
}

.skill-source-note a:hover{
  text-decoration:underline;
}


/* =========================================================
   MAPPING INDEX PLACEHOLDER
   ========================================================= */

.mapping-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:1200;
  transform:translate(-50%,10px);
  padding:9px 13px;
  border:1px solid #5b4934;
  border-radius:7px;
  background:#0b0c0e;
  color:#d7c7b0;
  font-size:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transition:.16s;
}

.mapping-toast.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:860px){

  .guide-tools{
    grid-template-columns:1fr;
  }

  .skill-calc-backdrop{
    padding:10px 6px;
  }

  .skill-calc-frame{
    padding:12px 8px;
  }

  .skill-calc-controls{
    grid-template-columns:1fr;
  }

  .skill-control-box{
    padding:9px;
  }

  /*
    Keep the tree at its real size.
    Smaller screens scroll horizontally instead of shrinking it.
  */

  .skill-tree-labels{
    width:675px;
    min-width:675px;
  }

  .skill-tree-native{
    width:675px;
    min-width:675px;
    height:425px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:520px){

  .skill-quest-row{
    grid-template-columns:repeat(2,1fr);
  }

  .skill-calc-title{
    font-size:21px;
    margin-bottom:11px;
  }

  .skill-info-row{
    min-height:28px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .guide-tool-button,
  .skill-hit img,
  .skill-hover-card,
  .mapping-toast{
    transition:none!important;
  }
}