/* soulmask.css — complete page-specific CSS from soulmask.html */

/* Soulmask character images */
.tribesman-left {
  position:absolute;
  bottom:0px;
  left:20px;
  max-height:450px;
  pointer-events:none;
}
.tribesman-right {
  position:absolute;
  bottom:0px;
  right:20px;
  max-height:450px;
  pointer-events:none;
}

@media (max-width: 768px) {
  .tribesman-left,
  .tribesman-right,
  .headdress-left,
  .headdress-right {
    display: none;
  }
}

/* Top-left Headdress */
.headdress-left {
  position: absolute;
  left: 45px;
  top: 15px;
  max-height: 300px;
  pointer-events: none;
}
/* Top-right Headdress */
.headdress-right {
  position: absolute;
  right: 45px;
  top: 15px;
  max-height: 300px;
  pointer-events: none;
}

/* Page-specific text & table styling */
.section-title {
  margin:10px 0 15px;
  font-size:1.6em;
  color:#00cccc;
  text-shadow:0 0 5px #00cccc;
}
.status-text {
  font-weight:bold;
  font-size:1.1em;
  margin-bottom:20px;
}
.rules-list,
.settings-table {
  margin:0 auto 30px;
  padding:0;
  text-align:center;
}
.rules-list {
  list-style-position:inside;
}
.rules-list li {
  margin:0.3em 0;
}
.settings-table {
  border-collapse:collapse;
  width:100%;
  max-width:600px;
}
.settings-table th,
.settings-table td {
  border:1px solid #00cccc;
  padding:8px 12px;
  vertical-align:top;
}
.settings-table th {
  background-color:#00cccc;
  color:#000;
  text-align:center;
  width:40%;
}

/* Scroll wrapper */
.settings-scroll {
  max-height:500px;
  overflow-y:auto;
  margin:0 auto 30px;
  width:90%;
  max-width:600px;
  padding-right:3px;
  box-sizing:content-box;
  position:relative;
  z-index:5;
}

@media(max-width:768px) {
  .settings-scroll {
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
}

/* Optional WebKit scrollbar styling */
.settings-scroll::-webkit-scrollbar {
  width:8px;
}
.settings-scroll::-webkit-scrollbar-thumb {
  background:#00cccc;
  border-radius:4px;
}

/* ---- Mods List ---- */
.mods-list {
  margin: 0 auto 30px;
  list-style-position: inside;
  text-align: center;
  padding: 0;
}
.mods-list li {
  margin: 0.5em 0;
}
.mods-list a {
  color: #00cccc;
  text-decoration: none;
  font-weight: bold;
}
.mods-list a:hover {
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff;
}