/* ---------- BODY ---------- */
body {
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

/* ---------- HEADINGS ---------- */
h1 {
  font-size: 1.5em;
  color: #c6643a;
  text-align: center;
  padding: 7px 0 7px 0;
}

.subtitle {
  margin-bottom: 2px;
  font-size: 0.8em;
  color: #3a9cc6;
  text-align: center;
}

/* ---------- BUTTONS ---------- */
button {
  margin-top: 10px;
  background-color: #d5dde5;
  border-radius: 3px;
  color: black;
  border: none;
  cursor: pointer;
}

button i { margin-right: 6px; }
button i:last-child { margin-right: 0; }

/* ---------- LEGEND ---------- */
legend {
  font-size: 1.2em;
  font-weight: 600;
  color: #5c936f;
  text-align: center;
}

/* ---------- STARS ---------- */
.card-stars {
  padding: 2px 0 5px 0;
  font-size: 16px;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
}
.royal-star {
  font-size: 16px !important;
  margin: 0 1px;
  color: #ffd700 !important;
  text-shadow:
    0 0 3px rgba(255, 215, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.3);
  --fa-primary-color: #ffd700;
  --fa-secondary-color: #ffb000;
  --fa-primary-opacity: 1.0;
  --fa-secondary-opacity: 0.7;
}
.card-stars .royal-star { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.card:hover .royal-star {
  color: #ffed4e !important;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

/* ---------- COLORS ---------- */
.gray-color { color: #6e7a8a; }
.orange-color { color: #c6643a; }
.orange-color button { color: white; }
.blue-color { color: #3a9cc6; }
.green-color { color: #5c936f; }

/* ---------- FIELDSET ---------- */
fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  max-width: 480px;
  margin: 0 auto;
  border: none;
  text-align: center;
}

/* ---------- REDDIT & IN-GAME BOXES ---------- */
#reddit-format-container,
#in-game-format-container {
  margin: 10px auto;
  padding: 20px;
  border: 1px dotted #4a5768;
  border-radius: 3px;
  text-align: left;
  position: relative;
}
#reddit-format,
#in-game-format {
  font-size: 15px;
  font-family: 'Courier New', Courier, monospace;
}

/* ---------- COPY BUTTON ---------- */
.copy-button {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: #4a5768 !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}
.copy-button:hover { background: #3a4652 !important; transform: scale(1.05) !important; }
.copy-button i { margin: 0 !important; }

/* ---------- CONTENT ---------- */
pre { white-space: pre-wrap; }

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 480px;
  height: 50px;
  margin: 0px auto;
  border-radius: 3px;
}
.smaller { max-width: 350px; }

/* Language selector */
.language-selector {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 1000;
}
.language-selector select {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
}

/* Format buttons */
#formatButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  min-height: 50px;
  margin: 0px auto;
  border-radius: 3px;
  transition: all 0.3s ease;
}
#formatButtons:has(#show-reddit-format[style*="display: none"]) { justify-content: center; }
#formatButtons:has(#show-reddit-format:not([style*="display: none"])) { justify-content: space-evenly; }
#formatButtons button {
  flex: 0 1 auto;
  min-width: 120px;
  margin: 0;
  padding: 10px 15px;
  border: none;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.content button {
  flex-grow: 0.3;
  flex-basis: 20%;
  margin: 0 10px 0 10px;
  padding: 10px;
  border: none;
  font-size: 15px;
}
#show-reddit-format.reddit {
  background-color: #c6643a;
  border-bottom: 2px solid #fe834d;
  color: white;
}
#show-reddit-format.reddit:hover { background-color: #b5572e; transform: translateY(-1px); }
#show-in-game-format {
  background-color: #3a9cc6;
  border-bottom: 2px solid #cfd9db;
  color: white;
}
#show-in-game-format:hover { background-color: #2e8bb0; transform: translateY(-1px); }

/* ---------- TABS ---------- */
.tabs {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: auto;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px 30px 10px;
}
.tabcontent { display: none; margin: 10px auto 10px auto; padding: 5px; }

.tablink {
  overflow: hidden;
  box-sizing: border-box;
  margin: 2px;
  padding: 10px 10px;
  cursor: pointer;
  border: 1px solid #dfdfdf;
  font-size: 15px;
  color: black;
  text-align: center;
  white-space: nowrap;
  background-color: #f5f5f5;
  transition: all 0.3s ease;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  position: relative;
  border-radius: 4px;
}
.tablink:hover:not(.active) {
  background-color: #e8e8e8;
  border-color: #ccc;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.tablink.active {
  background-color: #4a5768;
  color: white;
  border: 2px solid #3a4652;
  font-weight: bold;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 10;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tablink.active:hover {
  background-color: #4a5768;
  color: white;
  border: 2px solid #3a4652;
  font-weight: bold;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.tablink:not(.active) {
  background-color: #f5f5f5;
  color: black;
  font-weight: normal;
  border: 1px solid #dfdfdf;
  transform: none;
  box-shadow: none;
  text-shadow: none;
}
.tablink:not(.active):hover {
  background-color: #e8e8e8;
  border-color: #ccc;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ---------- CARDS ---------- */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
}
.card {
  flex-grow: 1;
  flex-basis: 20%;
  min-width: 20%;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  text-align: center;
}
.gold { background-color: #fffef7; border: 1px solid #fec324; }
.cardName {
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #6e7a8a;
}
.option {
  padding-top: 5px;
  border-top: 1px solid #4a5768;
  font-size: 13px;
  text-align: left;
}

/* --- KEY PART: style only the SELECTED option text in light gray --- */
.option .opt-label {
  margin-left: 2px;
  cursor: pointer;
  color: #000;                 /* default color for unselected options */
}
.option input[type='radio']:checked + .opt-label {
  color: rgb(179, 179, 179);   /* light gray for selected option ONLY */
}

/* ---------- RADIOS ---------- */
input[type='radio'] {
  vertical-align: bottom;
  margin: 6px 3px 0px 3px;
}

/* ---------- MESSAGES ---------- */
#in-game-user-message,
#user-message { padding-top: 20px; }

/* ---------- INPUTS ---------- */
.input-container {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
#fileNameInput {
  margin: 0 10px 10px 10px;
  padding: 5px;
  font-size: 15px;
  flex-grow: 0.5;
}

/* ---------- SAVE & LOAD ---------- */
.content button#saveOptionsBtn,
.content button#confirmSaveBtn {
  flex-grow: 0.3;
  flex-basis: 20%;
  margin: 0 10px 0 10px;
  padding: 10px;
  border: none;
  background-color: #2a7949d0;
  border-bottom: 2px solid #437f58;
  color: white;
  font-size: 15px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content button#loadOptionsBtn {
  flex-grow: 0.3;
  flex-basis: 20%;
  margin: 0 10px 0 10px;
  padding: 10px;
  border: none;
  background-color: #fec324;
  border-bottom: 2px solid #d4b35a;
  color: black;
  font-size: 15px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content button i { margin-right: 6px; }
.content button i:last-child { margin-right: 0; }

/* ---------- DIVIDERS ---------- */
.divider { border-top: 1px dotted #4a5768; }
.add-space { margin-top: 10px; }
.in-game-divider { border: 0; border-top: 1px solid #aaa; margin: 1em 0; }

/* ---------- POPUPS ---------- */
.popup {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
  position: relative;
  width: 300px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
}
.close { display: none; }
.popup-buttons { margin-top: 20px; }
.popup-buttons button { margin: 0 10px; }
.language-note {
  font-size: 12px;
  color: #666;
  font-style: italic;
  text-align: center;
  margin-top: 10px;
  padding: 5px;
}

/* ---------- CREDITS ---------- */
.credits {
  margin-top: 20px;
  padding-top: 15px;
  padding-bottom: 10px;
  border-top: 1px solid #4a5768;
  font-size: 0.9em;
  color: #91989e;
  text-align: center;
}
a.credit-link { transition: color 0.3s ease; color: #399cc6; text-decoration: none; }
a.credit-link:visited { color: #399cc6; }
a.credit-link:hover { color: #333; text-decoration: underline; }
a.credit-link:active { color: #399cc6; text-decoration: underline; }
a.credit-link:focus { color: #4a5768; }

/* Under construction */
.container {
  width: 100%;
  max-width: 1200px;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 20px; padding: 20px; box-sizing: border-box; margin: 0 auto;
}
.button {
  display: inline-block; padding: 10px 20px; font-size: 16px;
  text-decoration: none; color: rgb(0, 0, 0); background-color: #ffc324;
  border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease;
}
.button-yellow { background-color: #ffc324; color: black; }
.button:hover { background-color: #ffb700; }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  #formatButtons { flex-direction: column; gap: 10px; }
  #formatButtons button { width: 100%; max-width: 200px; }
  .language-selector { position: relative; top: auto; right: auto; text-align: center; margin-bottom: 20px; }
  .container { flex-direction: column; align-items: center; }

  .tablink.active {
    background-color: #4a5768; color: white; border: 2px solid #3a4652;
    font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.3); transform: translateY(-2px);
  }
  .tablink.active:hover {
    background-color: #4a5768; color: white; border: 2px solid #3a4652; font-weight: bold;
  }
  .tablink:not(.active) { background-color: #f5f5f5; color: black; font-weight: normal; border: 1px solid #dfdfdf; }
}

/* Smooth hide/show for Reddit button */
#show-reddit-format { transition: opacity 0.3s ease, transform 0.3s ease; }
#show-reddit-format[style*="display: none"] { opacity: 0; transform: scale(0.9); }

/* In-game text */
#in-game-format { font-size: 15px; font-family: 'Courier New', Courier, monospace; white-space: pre-wrap; }
.in-game-divider { border: 0; border-top: 1px solid #aaa; margin: 1em 0; }