/*
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  src: local("Ubuntu"), url(fonts/Ubuntu-R.ttf) format("ttf");
}
*/

.centered {
  text-align: center;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.masteryOverview {
  text-align: center;
  align-self: center;
  align-content: center;
  flex-wrap: wrap;
}

.masteryButton {
  border: none;
  background-color: transparent;
  cursor: pointer;
  min-width: 9%;
 /* min-width: min-content;*/
}

.submitButton {
  border: none;
  background-color: transparent;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  display: block;
  max-width: 100px;
  min-width: 60px;
}

.submitButton img {
    width: 84px;
    height: auto; /* keep ratio */
    /*display: block;*/
}

/* Tablets & small laptops */
@media (max-width: 992px) {
    .submitButton img {
        width: 70px;
    }
}

/* Large smartphones */
@media (max-width: 768px) {
    .submitButton img {
        width: 60px;
    }
}

/* Small smartphones */
@media (max-width: 480px) {
    .submitButton img {
        width: 50px;
    }
}

@media (max-width: 360px) {
    .submitButton img {
        width: 45px;
    }
}


.masteryPanel {
  max-width: 100%;
  min-width: 700px;
}

.masteryImage {
  filter: grayscale();
  max-width: 100%;
  /*min-width: 90px;*/
}

.disabled {
  display: none;
  text-align: center;
  max-width: inherit;
  float: left;
  position: relative;
}

/*.panels {
  width: 65%;
}*/

.masteryTable {
  width: 90%!important;
}

td.panels {
    vertical-align: top!important;
}


.panelsFlex {
    display: flex!important;
    flex-direction: column!important;   /* stack */
    align-items: center!important;      /* horizontal centering */
    width: 100%!important;
}


.infos {
  vertical-align: top;
  font-size: max(18px, 1vw);
}

.plusButton {
  bottom: 6.2%;
  left: 7%;
  position: absolute;
  width: 6.5%;
  min-width: 37px;
  max-width: 125px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  line-height: min(max(8px, 0.7vw), 25px);
}

 @media (max-width: 1300px) {
  .plusButton {
    bottom:7.5%;
  }
}

    @media (max-width: 1600px) {
  .plusButton {
    bottom:7.5%;
  }
}

.allPlusButton {
  bottom: 6.5%;
  left: 13%;
  position: absolute;
  width: 6%;
  min-width: 40px;
  max-width: 100px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  line-height: min(max(9px, 0.8vw), 28px);
  font-size: min(max(10px, 1vw), 40px);
  color: white;
}

@media (max-width: 1600px) {
  .allPlusButton {
    bottom:7.5%;
  }
}


.resetButton {
  bottom: 10.85%;
  left: 33%;
  position: absolute;
  min-width: max-content;
  width: 34.3%;
  height: 3.6%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: min(max(10px, 1vw), 40px);
  color: white;
}

.skillPlusButton {
  position: absolute;
  width: 3.3%;
  min-width: 30px;
  max-width: 55px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  line-height: min(max(9px, 0.8vw), 25px);
  font-size: min(max(10px, 1vw), 40px);
  color: white;
  transform: translateX(75px);
}

@media (max-width: 1600px) {
  .skillPlusButton {
    transform: translateX(70px);
  }
}

@media (max-width: 1300px) {
  .skillPlusButton {
    transform: translateX(65px);
  }
}

@media (max-width: 1150px) {
  .skillPlusButton {
    transform: translateX(55px);
  }
}

.skillButton {
  position: absolute;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 6%;
  min-width: 30px;
  max-width: 99px;
  line-height: min(max(8px, 0.8vw), 25px);
}

.buttonText {
  font-size: min(max(10px, 1vw), 40px);
  color: white;
}

.skillButtonImage {
  width: 80%;
  filter: grayscale();
}

.plusButtonImage {
  width: 100%;
}

.allPlusButtonImage {
  filter: brightness(0.5);
  width: 100%;
}

.skillPlusButtonImage {
  filter: brightness(0.5);
  width: 100%;
}

.masteryImagePanel {
  top: 6%;
  right: 3.35%;
  position: absolute;
  width: 18.7%;
  display:none;
}

.masteryTier {
  color: white;
  font-size: min(max(9px, 1vw), 40px)!important;
  text-align: center;
  width: auto;
}

#masteryTier1 {
  position: absolute;
  bottom: 26.6%;
  left: 7.4%;
}

#masteryTier2 {
  position: absolute;
  bottom: 36.3%;
  left: 7.4%;
}

#masteryTier3 {
  position: absolute;
  bottom: 45.6%;
  left: 7%;
}

#masteryTier4 {
  position: absolute;
  bottom: 55.4%;
  left: 7%;
}

#masteryTier5 {
  position: absolute;
  bottom: 65%;
  left: 7%;
}

#masteryTier6 {
  position: absolute;
  bottom: 74.6%;
  left: 7%;
}

#masteryTier7 {
  position: absolute;
  bottom: 84.3%;
  left: 7%;
}

#pop {
  position: absolute;
  border: 1px solid #cccc00;
  background-color: #000000;
  padding: 5px;
  filter: alpha(opacity=90); /* IE's opacity*/
  opacity: 0.9;
  z-index: 200;
  font-size: max(14px, 0.75vw);
  height: min-content;
  width: max-content;
  max-width: 80%;
  pointer-events: none;
}

.title {
  font-weight: bold;
  color: white;
}

.desc {
  color: white;
}

.nextLevel {
  color: white;
}

.skillAttribute {
  color: white;
}

.indentedAttribute {
  padding-left: 3%;
}

.bar {
  background-image: url("MasteryPage/images/masteries/panel/bar.jpg");
  background-size: 100%;
  position: absolute;
  bottom: 18.5%;
  left: 9%;
  width:2.4%;
  height: 0%;
}

.tableWithSpacing {
  border-spacing: 10px;
}

.skillConnectionCorner {
  position: absolute;
  min-width: 8px;
  max-width: 30px;
  width: 1.5%;
  height: auto;
}

.skillConnectionStraight {
  position: absolute;
  min-width: 8px;
  max-width: 30px;
  width: 1.5%;
}



/* --- PANEL CONTAINER (your existing TD wrapper) --- */
.infos {
    background: rgba(22, 22, 22, 0.88);
    border: 1px solid #705832;
    border-radius: 8px;
    padding: 20px 28px;
    color: #e5d7b3;
    font-family: "Segoe UI", Tahoma, sans-serif;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    width: 360px;
}

/* --- Stats table --- */
.infos table.tableWithSpacing {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.infos table.tableWithSpacing td {
    padding: 4px 0;
    font-size: 14px;
}

/* --- Select box --- */
#questPoints {
    width: 100%;
    background: #2e2a21;
    border: 1px solid #7f6a43;
    color: #e5d7b3;
    padding: 6px;
    font-size: 14px;
    border-radius: 4px;
    margin-top: 6px;
}

#questPoints:hover {
    border-color: #c3a56b;
}

.infos > label {
    display: block;
    margin: 14px 0 18px;
    font-size: 15px;
}

/* --- Controls section --- */
.infos table tr:first-child span {
    font-weight: bold;
    color: #9dd476 !important;
    font-size: 16px;
}

.infos table {
    width: 100%;
    font-size: 14px;
}

.infos table td {
    padding: 3px 0;
}

/* --- Save button --- */
#saveButton {
    width: 100%;
    background: linear-gradient(#6e5b39, #4c3e26);
    color: #f3e4c4;
    border: 1px solid #b59763;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 4px #000;
    transition: 0.15s ease;
    margin-top: 10px;
}

#saveButton:hover {
    background: linear-gradient(#816c44, #5a4b2e);
    border-color: #e2c78d;
}

/* --- Save link input --- */
#saveLink {
    width: 100%;
    font-size: 12px;
    padding: 6px;
    margin-top: 6px;
    background: #2e2a21;
    border: 1px solid #7f6a43;
    color: #e5d7b3;
    border-radius: 4px;
}

#className {
    font-family: "Cinzel", "Trajan Pro", serif;
    font-size: 40px;
    text-align: center;
    margin: 25px 0 30px;

    /* TQ Gold Color */
    color: #e8d3a3;

    /* Soft highlight + outer glow */
    text-shadow:
        0 0 2px #000,
        0 0 4px #000,
        0 0 6px rgba(0,0,0,0.6),
        0 0 12px rgba(255,230,180,0.25);

    letter-spacing: 1.5px;
    font-weight: 600;
}