/* Skill Point Calculator layout refinement.
   Keeps all text at the site's 16px minimum while giving more room to the
   actual skill tree and reducing unused vertical space in the controls. */

/* Keep the three top section headings visually balanced. */
.skill-control-label {
  text-align: center !important;
}

@media (min-width: 861px) {
  .skill-calc-modal {
    width: min(1040px, calc(100vw - 24px)) !important;
  }

  .skill-calc-frame {
    padding: 10px 12px 12px !important;
  }

  .skill-calc-title {
    margin: 0 44px 6px !important;
  }

  .skill-calc-controls {
    grid-template-columns: minmax(190px, .85fr) minmax(430px, 1.75fr) minmax(200px, .85fr) !important;
    gap: 8px !important;
    margin-bottom: 7px !important;
  }

  .skill-control-box {
    padding: 7px 10px !important;
  }

  .skill-control-label {
    margin-bottom: 5px !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  .skill-character-select {
    height: 38px !important;
    font-size: 16px !important;
  }

  .skill-quest-row {
    gap: 5px !important;
  }

  .skill-quest-btn {
    min-height: 36px !important;
    padding: 5px 7px !important;
    font-size: 16px !important;
  }

  .skill-reset-row {
    margin-top: 5px !important;
  }

  .skill-reset-btn {
    min-height: 34px !important;
    padding: 5px 12px !important;
    font-size: 16px !important;
  }

  .skill-info-row {
    min-height: 29px !important;
    padding: 3px 9px !important;
    font-size: 16px !important;
  }

  .skill-info-row strong {
    font-size: 16px !important;
  }

  .skill-calc-status {
    min-height: 0 !important;
    margin: 3px 0 0 !important;
    font-size: 16px !important;
  }

  .skill-tree-shell {
    padding: 7px !important;
  }

  /* 1.2x the native Portal artwork. Hotspots are percentage-positioned, so
     the background and click targets scale together without losing alignment. */
  .skill-tree-labels {
    width: 810px !important;
    min-width: 810px !important;
    margin-bottom: 5px !important;
  }

  .skill-tree-labels span {
    font-size: 18px !important;
  }

  .skill-tree-native {
    width: 810px !important;
    min-width: 810px !important;
    height: 510px !important;
  }

  .skill-tree-bg {
    width: 810px !important;
    height: 510px !important;
  }

  .skill-count {
    min-width: 26px !important;
    height: 22px !important;
    line-height: 20px !important;
    font-size: 16px !important;
  }

  .skill-source-note {
    margin-top: 6px !important;
    font-size: 16px !important;
  }
}