* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: system-ui, sans-serif;
   text-decoration: none;
}

body {
   background: #0f1115;
   color: #eaeaf0;
}

a {
   color: #eaeaf0;
   text-decoration: none;
}

header {
   background: linear-gradient(135deg, #151924, #1c2140);
   padding: 20px;
   text-align: center;
   font-size: 1.6rem;
   font-weight: 600;
   border-bottom: 1px solid #22263a;
}

.container {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   /* grid-template-columns: repeat(2, 1fr); */
   /* width: 78%; */
   gap: 20px;
   padding: 20px;
}

section {
   background: #181c28;
   border-radius: 14px;
   padding: 20px;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
   grid-column-start: none;
}

h2 {
   margin-bottom: 0.9em;
   font-size: 1.2rem;
   color: #8ab4ff;
}

section h2 {
   padding-block-start: 0.556em;
}

h2.toggle {
  cursor: auto;
  /* user-select: none; */
}

.options.collapsed {
  display: none;
}

.options {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.chara {
   /* display: grid; */
   /* display: flex; */
   /* display: inline-flex; */
   flex-flow: column;
   justify-content: left; 
   margin-right: 12px;
   margin-bottom: 16px;
}

/* limit Battlesuits size  */
#valkyrie {
   max-height: 32em;
   overflow-y: auto;
   border: 1px solid #444;
   padding: 8px;
   justify-content: space-between;
}

.chara-name {
   /* min-width: 333px; */
   /* min-width: min-content; */
   min-width: -webkit-fill-available;
   padding-bottom: .6em;
   display: flex;
   flex-flow: column;
}

.chara-battlesuit {
   padding: 0.1em 0.0556em;
   display: grid;
   grid-row-start: none;
   min-width: 9em;
}

.label {
   display: grid;
}

.options > .chara > .chara-name > label > input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
}

.options > .chara > .chara-name > label {
   background: transparent;
   min-width: max-content;
   /* min-width: 160px; */
   /* max-width: 200px; */
   width: auto ;
   margin: 5px 17px ;
}

label {
   background: #22263a;
   padding: 8px 12px;
   border-radius: 10px;
   cursor: pointer;
   transition: background 0.15s ease;
   user-select: none;
}

label:hover {
   background: #2b3055;
}

label:has(input:checked) {
  background: #404871;
  border-radius: 6px;
}

.td.rank,
.td.score,
.td.date {
   text-align: center;
}

.td.author {
   display: none;
}

/*
.badge.elf {
}
*/

.badge {
   display: inline-block;
   padding: 2px 8px;
   margin: 2px 4px 2px 0;
   border-radius: 999px;
   font-size: 0.7rem;
   font-weight: 600;
   background: #2b3055;
   color: #eaeaf0;
}

.badge.valkyrie1 {
   background: #3a4090;
}

.badge.valkyrie2 {
   background: #305f8a;
}

.badge.valkyrie3 {
   background: #5f3a8a;
}

.badge.beta {
  display: inline-flex;
  max-width: max-content;
  margin-top: 3px;
  padding: 2px 6px;
  font-size: .8em;
  background: #d33;
  color: white;
  border-radius: 6px;
  font-weight: bold;
}

input {
   margin-right: 6px;
   display: none;
}

#minScore {
   margin-left: 0.3em;
   display: unset;
}

.controls {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 12px;
}

.controls input {
   background: #20253a;
   border: 1px solid #2b3055;
   color: #fff;
   padding: 6px;
   border-radius: 6px;
}

table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.85rem;
}

tr:hover {
  background: #2a2a2a2a;
}

th,
td {
   padding: 8px;
   border-bottom: 1px solid #2b3055;
   align-content: space-evenly;

}

th {
   color: #8ab4ff;
   cursor: pointer;
   user-select: none;
   position: relative;
}

th.asc::after {
   content: "  ▲";
   /* font-size: 0.7em; */
}

th.desc::after {
   content: "  ▼";
   /* font-size: 0.7em; */
}

th:hover {
   text-decoration: underline;
}

.toolbar {
   margin-top: 10px;
   text-align: right;
}

body > div.lang {
   position: absolute;
}

button {
   background: #2b3055;
   border: none;
   color: #fff;
   padding: 7px 12px;
   border-radius: 8px;
   cursor: pointer;
   margin: 10px 0;
   align-self: flex-start;
}

button:hover {
   background: #3a4090;
}

@media (max-width: 900px) {
   .container {
      grid-template-columns: 1fr;
   }
}

/* ------------------------------- */
/* -------------Popup------------- */
/* ------------------------------- */
.popup.hidden {
   display: none;
}

.popup {
   position: fixed;
   inset: 0;
   z-index: 9999;
}

.popup-bg {
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,0.7);
}

.popup-content {
   position: relative;
   width: 80%;
   height: 80%;
   margin: 5% auto;
   background: #000;
   padding: 10px;
}
   
.popup-content iframe {
   width: 100%;
   height: 100%;
}

.popup-content button {
   position: absolute;
   right: 5px;
   top: 5px;
   z-index: 2;
}

/* ------------------------------- */
/* ------------BBPopup------------ */
/* ------------------------------- */
.hd-btn {
   display: block;
   text-align: center;
   padding: 8px;
   background: #00a1d6;
   color: white;
   text-decoration: none;
   margin-top: 6px;
   border-radius: 6px;
}

.hd-btn:hover {
   background: #0092c3;
}