@keyframes backgroundScroll {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

body {
  background: 
    linear-gradient(
      45deg,
      #1a1a1a 25%,
      #222 25%,
      #222 50%,
      #1a1a1a 50%,
      #1a1a1a 75%,
      #222 75%,
      #222 100%
    );
  background-size: 20px 20px;
  animation: backgroundScroll 20s linear infinite;
  color: #fff;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
}

.character-maker {
  display: flex;
  gap: 20px;
  max-width: none;
  margin: 20px;
  align-items: flex-start;
  justify-content: center;
}

.saved-skins-sidebar {
  width: 300px;
  flex-shrink: 0;
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  position: sticky;
  top: 20px;
}

.saved-skins-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.saved-skin-entry {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  border-left: 4px solid #4dff91;
}

.saved-skin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.saved-skin-title {
  color: #4dff91;
  font-weight: bold;
}

.saved-skin-character {
  color: #7c3aed;
  font-size: 0.9em;
}

.creator-main-content {
  flex: 1;
  max-width: 800px;
  background: rgba(26, 26, 26, 0.95);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #7c3aed;
  font-size: 2.5em;
  margin-bottom: 40px;
  text-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
}

.input-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.input-section input {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 5px;
  background: #333;
  color: #fff;
  font-size: 14px;
}

.input-section button {
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  background: #7c3aed;
  color: white;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  width: auto;
  margin: 0 auto;
  min-width: 200px;
}

.input-section button:hover:not(:disabled) {
  background: #845ef7;
  transform: translateY(-2px);
}

button:disabled {
  background: #666;
  cursor: not-allowed;
}

.type-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
}

.type-button {
  padding: 12px 24px;
  border: 2px solid #7c3aed;
  border-radius: 5px;
  background: transparent;
  color: #7c3aed;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.type-button.active {
  background: #7c3aed;
  color: white;
}

.type-button:hover:not(:disabled) {
  background: rgba(124, 58, 237, 0.2);
}

.character-card {
  background: #2a2a2a;
  border-radius: 10px;
  padding: 20px;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.character-card h2 {
  color: #7c3aed;
  margin-bottom: 20px;
  text-align: center;
}

.abilities-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

h3 {
  color: #7c3aed;
  margin-bottom: 10px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  background: #333;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 10px;
}

li strong {
  color: #7c3aed;
  display: block;
  margin-bottom: 5px;
}

li p {
  margin: 0;
  line-height: 1.4;
}

.number-controls {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}

.number-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.number-control input {
  width: 60px;
  text-align: center;
  padding: 8px;
  background: rgba(77, 255, 145, 0.1);
  border: 2px solid #4dff91;
  color: #4dff91;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.number-control input:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(77, 255, 145, 0.3);
  background: rgba(77, 255, 145, 0.2);
}

.number-control label {
  color: #4dff91;
  font-size: 14px;
}

@media (max-width: 600px) {
  .number-controls {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

.voice-line {
  color: #4dff91;
  font-style: italic;
  margin-top: 8px;
  display: block;
  font-size: 0.9em;
  padding: 8px;
  background: rgba(77, 255, 145, 0.1);
  border-radius: 4px;
  position: relative;
}

.voice-line::before {
  content: '"';
  font-size: 1.2em;
  margin-right: 2px;
}

.voice-line::after {
  content: '"';
  font-size: 1.2em;
  margin-left: 2px;
}

.difficulty-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.difficulty-control label {
  color: #7c3aed;
  font-size: 14px;
}

.difficulty-stars {
  display: flex;
  gap: 5px;
}

.difficulty-star {
  cursor: pointer;
  color: #666;
  font-size: 24px;
  transition: color 0.3s ease;
}

.difficulty-star.active {
  color: #ffdd59;
}

.difficulty-star:hover {
  color: #ffdd59;
}

.health-display {
  background: #7c3aed;
  color: white;
  padding: 8px 15px;
  border-radius: 5px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9em;
}

.health-display span:last-child {
  color: #fff;
  font-family: monospace;
}

.character-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: #333;
  padding: 15px;
  border-radius: 5px;
  flex-wrap: wrap;
  gap: 10px;
}

.price-tag {
  background: #4dff91;
  color: #1a1a1a;
  padding: 8px 15px;
  border-radius: 5px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9em;
}

.difficulty-display {
  color: #ffdd59;
  display: flex;
  align-items: center;
  gap: 5px;
}

.situational-voices {
  margin-top: 20px;
}

.situational-voices li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.situational-voices strong {
  color: #7c3aed;
  font-size: 0.9em;
}

.interaction-voices {
  margin-top: 20px;
  padding: 15px;
  background: rgba(77, 255, 145, 0.1);
  border-radius: 8px;
  border-left: 4px solid #4dff91;
}

.interaction-voices-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.interaction-voices-list li {
  background: #2a2a2a;
}

.interaction-voices h3 {
  color: #4dff91;
  margin-bottom: 15px;
}

.skins-section {
  margin-top: 30px;
}

.skin-card {
  background: #333;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.skin-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.skin-name {
  color: #7c3aed;
  font-size: 1.1em;
  font-weight: bold;
}

.skin-reference {
  font-size: 0.9em;
  color: #888;
  font-style: italic;
  margin-top: 8px;
}

.description-input {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 5px;
  background: #333;
  color: #fff;
  font-size: 16px;
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.description-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.intro-voice-section {
  margin-bottom: 25px;
  padding: 15px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 8px;
  border-left: 4px solid #7c3aed;
}

.intro-voice-section + .intro-voice-section {
  background: rgba(255, 221, 89, 0.1);
  border-left-color: #ffdd59;
}

.intro-voice {
  display: flex;
  justify-content: center;
}

.intro-voice .voice-line {
  font-size: 1.1em;
  text-align: center;
  max-width: 80%;
}

@media (min-width: 768px) {
  .input-section {
    flex-direction: row;
  }
  .input-section input {
    height: 35px;
  }
  .input-section button {
    height: 35px;
    line-height: 1;
  }
}

.save-character-section {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.save-button {
  background: #4dff91;
  color: #1a1a1a;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.save-button:hover {
  background: #3dff81;
  transform: translateY(-2px);
}

.saved-survivors-section {
  margin-top: 30px;
  padding: 20px;
  background: #333;
  border-radius: 8px;
}

.saved-survivors-list {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.saved-survivor-card {
  background: #2a2a2a;
  padding: 15px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saved-survivor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.saved-survivor-card.selected {
  border: 2px solid #7c3aed;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.saved-survivor-name {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  margin-bottom: 8px;
}

.saved-survivor-desc {
  color: #ccc;
  font-size: 0.9em;
  margin: 0;
}

.remove-survivor-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #7c3aed;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  opacity: 0.7;
}

.remove-survivor-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.saved-survivors-overview {
  margin-bottom: 40px;
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.saved-survivors-overview h2 {
  color: #4dff91;
  text-align: center;
  margin-bottom: 20px;
}

.no-survivors-message {
  text-align: center;
  color: #888;
  padding: 20px;
  font-style: italic;
}

.separator {
  height: 2px;
  background: linear-gradient(to right, transparent, #7c3aed, transparent);
  margin: 40px 0;
}

.saved-characters-overview {
  margin-bottom: 40px;
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.saved-characters-overview h2 {
  color: #4dff91;
  text-align: center;
  margin-bottom: 20px;
}

.saved-section {
  margin-bottom: 30px;
}

.saved-section h3 {
  color: #7c3aed;
  text-align: center;
  margin-bottom: 15px;
}

.saved-characters-list {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.saved-character-card {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saved-character-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.saved-character-card.selected {
  border: 2px solid #7c3aed;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.saved-character-name {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  margin-bottom: 8px;
}

.saved-character-desc {
  color: #ccc;
  font-size: 0.9em;
  margin: 0;
}

.no-characters-message {
  text-align: center;
  color: #888;
  padding: 20px;
  font-style: italic;
}

.remove-character-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #7c3aed;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  opacity: 0.7;
}

.remove-character-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.milestone-skins {
  margin-top: 30px;
}

.skin-card.milestone {
  border-left: 4px solid #4dff91;
  background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
  position: relative;
}

.created-date {
  font-size: 0.8em;
  color: #888;
  margin-top: 8px;
  font-style: italic;
}

.unlock-level {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(77, 255, 145, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  color: #4dff91;
}

.relationships-section {
  margin-top: 30px;
  padding: 20px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 8px;
  border-left: 4px solid #7c3aed;
}

.relationships-section h3 {
  color: #7c3aed;
  margin-bottom: 20px;
}

.relationship-card {
  background: #333;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.relationship-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.relationship-name {
  color: #4dff91;
  font-weight: bold;
  font-size: 1.1em;
}

.relationship-status {
  background: rgba(77, 255, 145, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  color: #4dff91;
}

.relationship-history {
  color: #ccc;
  margin-bottom: 10px;
  line-height: 1.4;
  font-style: italic;
}

.relationship-feelings {
  color: #7c3aed;
  font-size: 0.9em;
  padding: 8px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 4px;
}

.lore-section {
  margin-top: 30px;
  padding: 20px;
  background: rgba(124, 58, 237, 0.05);
  border-radius: 8px;
  border-left: 4px solid #7c3aed;
}

.lore-section h3 {
  color: #7c3aed;
  margin-bottom: 20px;
  text-align: center;
}

.lore-card {
  background: #333;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.lore-card h4 {
  color: #4dff91;
  margin: 0 0 10px 0;
  font-size: 1.1em;
}

.lore-card p {
  color: #ccc;
  line-height: 1.5;
  margin: 0;
}

.lore-card.backstory {
  border-left: 4px solid #4dff91;
}

.lore-card.personality {
  border-left: 4px solid #ffdd59;
}

.lore-card.motivation {
  border-left: 4px solid #7c3aed;
}

.lore-card.trauma {
  border-left: 4px solid #a78bfa;
}

.class-selector {
  margin-bottom: 30px;
  text-align: center;
}

.class-selector h3 {
  margin-bottom: 15px;
}

.class-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.class-button {
  display: flex;
  flex-direction: column;
  padding: 15px 25px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #333;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.class-button .class-name {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 5px;
}

.class-button .class-desc {
  font-size: 0.8em;
  opacity: 0.8;
}

.class-button.active {
  border-color: #4dff91;
  background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
  box-shadow: 0 0 15px rgba(77, 255, 145, 0.2);
}

.class-button:hover:not(.active) {
  transform: translateY(-2px);
  background: #3a3a3a;
}

.class-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: normal;
  margin-left: 10px;
}

.class-tag.sentinel {
  background: #7c3aed;
  color: white;
}

.class-tag.survivalist {
  background: #4dff91;
  color: #1a1a1a;
}

.class-tag.support {
  background: #ffdd59;
  color: #1a1a1a;
}

.map-creator {
  margin-top: 30px;
}

.map-card {
  background: #2a2a2a;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  animation: fadeIn 0.5s ease;
}

.map-info {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.map-theme {
  color: #4dff91;
  font-size: 1.1em;
  margin-top: 10px;
}

.map-section {
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(124, 58, 237, 0.05);
  border-radius: 8px;
  border-left: 4px solid #7c3aed;
}

.map-section h3 {
  color: #7c3aed;
  margin-bottom: 15px;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.feature-card {
  background: #333;
  padding: 15px;
  border-radius: 5px;
}

.feature-card strong {
  color: #4dff91;
  display: block;
  margin-bottom: 8px;
}

.atmosphere-details {
  background: #333;
  padding: 15px;
  border-radius: 5px;
}

.atmosphere-details ul {
  margin-top: 15px;
}

.saved-maps-overview {
  margin-top: 40px;
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
}

.saved-maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.saved-map-card {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.saved-map-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.saved-map-card.selected {
  border: 2px solid #7c3aed;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.saved-map-name {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  margin-bottom: 8px;
}

.saved-map-theme {
  color: #ccc;
  font-size: 0.9em;
  margin: 8px 0;
}

.remove-map-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #7c3aed;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  opacity: 0.7;
}

.remove-map-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.npc-card {
  background: #2a2a2a;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  animation: fadeIn 0.5s ease;
}

.npc-info {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.npc-role {
  color: #4dff91;
  font-size: 1.1em;
  margin-top: 10px;
}

.npc-personality {
  color: #ccc;
  margin-top: 10px;
  font-style: italic;
  line-height: 1.4;
}

.dialogue-section {
  margin-top: 30px;
}

.dialogue-scenario {
  background: #333;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
  border-left: 4px solid #4dff91;
}

.dialogue-trigger {
  color: #7c3aed;
  margin-bottom: 15px;
  font-size: 0.9em;
}

.dialogue-conversation {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dialogue-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #2a2a2a;
  padding: 10px;
  border-radius: 5px;
  position: relative;
}

.dialogue-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 4px;
}

.dialogue-line.speaker1::before {
  background: #7c3aed;
}

.dialogue-line.speaker2::before {
  background: #4dff91;
}

.dialogue-line.npc-speaker::before {
  background: #4dff91;
}

.dialogue-line.npc-speaker {
  border-left: 4px solid #4dff91;
}

.dialogue-line.npc-speaker .dialogue-speaker {
  color: #4dff91;
}

.dialogue-line .speaker {
  color: #7c3aed;
  font-weight: bold;
  min-width: 100px;
}

.dialogue-line .line {
  flex: 1;
  line-height: 1.4;
}

.saved-npcs-overview {
  margin-top: 40px;
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
}

.saved-npcs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.saved-npc-card {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.saved-npc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.saved-npc-card.selected {
  border: 2px solid #7c3aed;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.saved-npc-name {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  margin-bottom: 8px;
}

.saved-npc-role {
  color: #ccc;
  font-size: 0.9em;
  margin: 8px 0;
}

.remove-npc-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #7c3aed;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  opacity: 0.7;
}

.remove-npc-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.skin-creator-section {
  margin-top: 40px;
  padding: 20px;
  background: #2a2a2a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.skin-creator-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.character-selector {
  background: #333;
  padding: 20px;
  border-radius: 8px;
}

.character-type-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.character-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.character-select-card {
  background: #2a2a2a;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.character-select-card:hover {
  transform: translateY(-2px);
  background: #383838;
}

.character-select-card.active {
  border: 2px solid #4dff91;
  background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
}

.char-name {
  color: #7c3aed;
  font-weight: bold;
}

.character-select-card .char-type {
  color: #4dff91;
  font-size: 0.9em;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(77, 255, 145, 0.1);
  display: inline-block;
  margin-top: 5px;
}

.skin-creator-inputs {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.skin-input {
  padding: 12px;
  border: none;
  border-radius: 5px;
  background: #2a2a2a;
  color: #fff;
  font-size: 16px;
}

.skin-input.description {
  height: 80px;
}

.custom-skin-preview {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.preview-card {
  background: #2a2a2a;
  padding: 20px;
  border-radius: 5px;
  border-left: 4px solid #4dff91;
}

.skin-desc {
  color: #ccc;
  line-height: 1.4;
  margin: 15px 0;
}

.skin-voicelines {
  margin-top: 20px;
}

.voice-line-entry {
  background: rgba(77, 255, 145, 0.1);
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.trigger {
  color: #7c3aed;
  font-size: 0.9em;
  font-weight: bold;
}

.line {
  color: #4dff91;
  font-style: italic;
}

.save-skin-btn {
  margin-top: 20px;
  background: #4dff91;
  color: #1a1a1a;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: bold;
  width: 100%;
}

.save-skin-btn:hover {
  background: #3dff81;
  transform: translateY(-2px);
}

.match-creator {
  margin-top: 20px;
}

.match-setup {
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.match-context {
  margin: 20px 0;
}

.match-participants {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 20px 0;
}

.killer-selection,
.survivors-selection {
  background: #333;
  padding: 20px;
  border-radius: 8px;
}

.generate-match-btn {
  width: 100%;
  padding: 15px;
  background: #4dff91;
  color: #1a1a1a;
  font-weight: bold;
  margin-top: 20px;
}

.match-card {
  background: #2a2a2a;
  border-radius: 10px;
  padding: 20px;
  margin-top: 30px;
  animation: fadeIn 0.5s ease;
}

.match-info {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.match-info h3 {
  color: #7c3aed;
  margin-bottom: 10px;
}

.match-description {
  line-height: 1.6;
  color: #ccc;
}

.match-highlights {
  margin: 30px 0;
}

.highlight-entry {
  background: #333;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  border-left: 4px solid #7c3aed;
  transition: all 0.3s ease;
}

.highlight-entry:hover {
  transform: translateX(5px);
  background: #383838;
}

.highlight-phase {
  color: #7c3aed;
  font-weight: bold;
  margin-bottom: 10px;
}

.highlight-content {
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 15px;
}

.highlight-dialogue {
  background: rgba(77, 255, 145, 0.1);
  padding: 10px;
  border-radius: 5px;
}

.match-outcome {
  background: rgba(124, 58, 237, 0.1);
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #7c3aed;
}

.outcome-description {
  color: #ccc;
  line-height: 1.5;
  margin: 15px 0;
}

.killer-line {
  background: rgba(124, 58, 237, 0.1) !important;
}

.saved-matches-overview {
  margin-top: 40px;
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
}

.saved-matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.saved-match-card {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.saved-match-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.saved-match-card.selected {
  border: 2px solid #7c3aed;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.saved-match-title {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  margin-bottom: 8px;
}

.saved-match-participants {
  color: #ccc;
  font-size: 0.9em;
  margin: 8px 0;
}

.remove-match-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #7c3aed;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  border: none;
  cursor: pointer;
  opacity: 0.7;
}

.remove-match-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.match-map-selection {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.no-maps-message {
  text-align: center;
  color: #888;
  padding: 20px;
  font-style: italic;
}

.map-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.map-select-card {
  background: #2a2a2a;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.map-select-card:hover {
  transform: translateY(-2px);
  background: #383838;
}

.map-select-card.active {
  border: 2px solid #7c3aed;
  background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
}

.map-name {
  color: #7c3aed;
  font-weight: bold;
}

.map-theme {
  color: #4dff91;
  font-size: 0.9em;
}

.highlight-location {
  color: #4dff91;
  font-size: 0.9em;
  margin: 5px 0;
}

.ability-usage,
.decisive-abilities {
  background: rgba(77, 255, 145, 0.1);
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
}

.ability-usage h5,
.decisive-abilities h5 {
  color: #4dff91;
  margin: 0 0 10px 0;
  font-size: 0.9em;
}

.used-ability,
.decisive-ability {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 5px;
  border-radius: 3px;
  margin: 5px 0;
  background: rgba(51, 51, 51, 0.5);
}

.ability-user {
  color: #7c3aed;
  font-weight: bold;
  font-size: 0.9em;
  min-width: 100px;
}

.ability-name {
  color: #4dff91;
  font-style: italic;
  font-size: 0.9em;
  min-width: 120px;
}

.ability-effect {
  color: #ccc;
  font-size: 0.9em;
  flex: 1;
}

.final-location {
  color: #4dff91;
  font-size: 0.9em;
  margin: 10px 0;
}

@media (max-width: 1200px) {
  .character-maker {
    flex-direction: column;
    align-items: center;
    margin: 20px;
  }

  .saved-skins-sidebar {
    width: 100%;
    max-width: 800px;
    position: static;
    margin-bottom: 20px;
  }

  .creator-main-content {
    width: 100%;
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .character-maker {
    display: flex;
    gap: 20px;
    margin: 20px auto;
    justify-content: center;
    align-items: flex-start;
    max-width: 1400px;
  }

  .saved-skins-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: #2a2a2a;
    padding: 20px;
    border-radius: 10px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    position: sticky;
    top: 20px;
    margin-right: auto;
  }

  .creator-main-content {
    flex: 0 1 800px;
    margin: 0;
  }
}

.pronoun-selector {
  margin: 20px 0;
  text-align: center;
}

.pronoun-selector h3 {
  color: #7c3aed;
  margin-bottom: 15px;
}

.pronoun-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.pronoun-button {
  padding: 12px 24px;
  border: 2px solid #4dff91;
  border-radius: 5px;
  background: transparent;
  color: #4dff91;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.pronoun-button.active {
  background: #4dff91;
  color: #1a1a1a;
  box-shadow: 0 0 15px rgba(77, 255, 145, 0.2);
}

.pronoun-button:hover:not(.active) {
  transform: translateY(-2px);
  background: rgba(77, 255, 145, 0.1);
}

.milestone-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.milestone-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7c3aed;
  font-size: 14px;
  cursor: pointer;
}

.milestone-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.custom-ability-section {
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
  border-left: 4px solid #4dff91;
}

.custom-ability-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.custom-ability-form h3 {
  color: #4dff91;
  text-align: center;
  margin-bottom: 5px;
}

.ability-type-selector {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}

.ability-input {
  padding: 12px;
  border: none;
  border-radius: 5px;
  background: #333;
  color: #fff;
  font-size: 16px;
}

.ability-input.description {
  height: 60px;
}

.custom-ability-toggle {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.toggle-button {
  background: #4dff91;
  color: #1a1a1a;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.toggle-button:hover {
  background: #3dff81;
  transform: translateY(-2px);
}

.description-tooltip {
  background: #7c3aed;
  color: white;
  padding: 8px 12px;
  border-radius: 5px;
  margin: 8px 0;
  font-weight: bold;
  text-align: center;
  animation: pulse 2s infinite;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
  font-size: 13px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.survivor-fate-summary {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  margin: 15px 0;
}

.survivor-fate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 4px;
  margin: 5px 0;
}

.survivor-fate.escaped {
  background: rgba(77, 255, 145, 0.1);
  border-left: 3px solid #4dff91;
}

.survivor-fate.killed {
  background: rgba(124, 58, 237, 0.1);
  border-left: 3px solid #7c3aed;
}

.survivor-fate .name {
  font-weight: bold;
  color: #7c3aed;
}

.survivor-fate.killed .name {
  color: #7c3aed;
}

.survivor-fate .status {
  font-style: italic;
  color: #ccc;
}

.survivor-fate .final-moments {
  font-size: 0.9em;
  color: #888;
  margin-top: 5px;
}

.health-bar {
  background: rgba(124, 58, 237, 0.2);
  border-radius: 3px;
  height: 20px;
  width: 100%;
  position: relative;
  margin: 5px 0;
}

.health-bar-fill {
  background: #7c3aed;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.health-bar-text {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 20px;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.character-status {
  background: #333;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
}

.character-status h5 {
  color: #7c3aed;
  margin: 0 0 10px 0;
}

.highlight-health-updates {
  margin: 10px 0;
  padding: 8px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 4px;
  font-size: 0.9em;
}

.health-change {
  color: #7c3aed;
  font-weight: bold;
}

.health-change.healing {
  color: #4dff91;
}

.match-npcs-selection {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.npc-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.npc-select-card {
  background: #2a2a2a;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.npc-select-card:hover {
  transform: translateY(-2px);
  background: #383838;
}

.npc-select-card.active {
  border: 2px solid #7c3aed;
  background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
}

.npc-role {
  color: #4dff91;
  font-size: 0.9em;
}

.npc-interactions {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  margin: 10px 0;
}

.npc-interaction {
  margin: 10px 0;
  padding: 8px;
  background: rgba(77, 255, 145, 0.1);
  border-radius: 4px;
}

.npc-name {
  color: #7c3aed;
  font-weight: bold;
  margin-right: 10px;
}

.npc-action {
  color: #ccc;
  font-style: italic;
}

.npc-dialogue {
  color: #4dff91;
  font-style: italic;
  padding: 5px;
  margin: 5px 0;
}

.no-npcs-message {
  text-align: center;
  color: #888;
  padding: 20px;
  font-style: italic;
}

.emote-creator-section {
  margin-top: 30px;
  padding: 20px;
  background: #2a2a2a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.emote-creator-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.emote-input-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.emote-input {
  padding: 12px;
  border: none;
  border-radius: 5px;
  background: #333;
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
}

.emote-input:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(77, 255, 145, 0.3);
  background: #3a3a3a;
}

.emote-input.description {
  min-height: 100px;
  resize: vertical;
}

.emote-input.context {
  font-style: italic;
  background: rgba(77, 255, 145, 0.1);
}

.emote-type-select {
  padding: 12px;
  border: none;
  border-radius: 5px;
  background: #333;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.emote-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 15px;
  background: #333;
  border-radius: 5px;
}

.emote-option {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4dff91;
  cursor: pointer;
}

.emote-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.generate-emote-btn {
  background: #4dff91;
  color: #1a1a1a;
  padding: 15px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.generate-emote-btn:hover:not(:disabled) {
  background: #3dff81;
  transform: translateY(-2px);
}

.generate-emote-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.emote-preview {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.preview-card {
  background: #2a2a2a;
  padding: 20px;
  border-radius: 5px;
  border-left: 4px solid #4dff91;
}

.emote-type-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 15px;
  background: rgba(77, 255, 145, 0.2);
  color: #4dff91;
  font-size: 0.9em;
  margin: 10px 0;
}

.emote-type-tag.small {
  font-size: 0.8em;
  padding: 2px 8px;
}

.animation-phases {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0;
}

.animation-phase {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #333;
  padding: 10px;
  border-radius: 5px;
}

.phase-number {
  background: #4dff91;
  color: #1a1a1a;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.sound-section,
.particle-section {
  margin: 15px 0;
  padding: 15px;
  background: rgba(77, 255, 145, 0.1);
  border-radius: 5px;
}

.sound-timing,
.particle-timing {
  color: #4dff91;
  font-weight: bold;
  margin-right: 8px;
}

.emote-properties {
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.property {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: #333;
  border-radius: 5px;
  font-size: 0.9em;
}

.property.active {
  background: rgba(77, 255, 145, 0.2);
  color: #4dff91;
}

.property-icon {
  font-size: 1.2em;
}

.save-emote-btn {
  width: 100%;
  padding: 12px;
  background: #4dff91;
  color: #1a1a1a;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-emote-btn:hover {
  background: #3dff81;
  transform: translateY(-2px);
}

.saved-emotes-overview {
  margin-top: 30px;
}

.saved-emotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.saved-emote-card {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.saved-emote-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.saved-emote-card.selected {
  border: 2px solid #7c3aed;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.saved-emote-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.saved-emote-name {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1em;
}

.saved-emote-desc {
  color: #ccc;
  font-size: 0.9em;
  margin: 8px 0;
}

.saved-emote-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.remove-emote-btn {
  background: #7c3aed;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  border: none;
  cursor: pointer;
  opacity: 0.7;
}

.remove-emote-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.mobile-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #4dff91;
  color: #1a1a1a;
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.mobile-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.mobile-toggle .icon {
  font-size: 1.2em;
}

.mobile-optimized .character-maker {
  flex-direction: column;
  margin: 10px;
}

.mobile-optimized .saved-skins-sidebar {
  width: 100%;
  max-width: none;
  position: static;
  margin-bottom: 15px;
}

.mobile-optimized .creator-main-content {
  width: 100%;
  max-width: none;
  padding: 15px;
}

.mobile-optimized .type-selector {
  flex-wrap: wrap;
}

.mobile-optimized .type-button {
  flex: 1 1 calc(50% - 10px);
  min-width: 120px;
  font-size: 14px;
  padding: 10px;
}

.mobile-optimized .class-buttons {
  flex-direction: column;
}

.mobile-optimized .class-button {
  width: 100%;
}

.mobile-optimized .number-controls {
  flex-direction: column;
  gap: 10px;
}

.mobile-optimized .number-control {
  width: 100%;
}

.mobile-optimized .input-section {
  flex-direction: column;
}

.mobile-optimized .input-section input {
  width: 100%;
  margin-bottom: 10px;
}

.mobile-optimized .saved-characters-list,
.mobile-optimized .saved-maps-grid,
.mobile-optimized .saved-npcs-grid,
.mobile-optimized .saved-matches-grid,
.mobile-optimized .saved-emotes-grid {
  grid-template-columns: 1fr;
}

.mobile-optimized .character-card,
.mobile-optimized .map-card,
.mobile-optimized .npc-card,
.mobile-optimized .match-card {
  padding: 15px;
}

.mobile-optimized .match-participants {
  gap: 15px;
}

.mobile-optimized .emote-creator-form {
  padding: 15px;
}

.mobile-optimized h1 {
  font-size: 1.8em;
}

.mobile-optimized h2 {
  font-size: 1.5em;
}

.mobile-optimized h3 {
  font-size: 1.3em;
}

.mobile-optimized .pronoun-buttons,
.mobile-optimized .ability-type-selector {
  flex-direction: column;
  gap: 8px;
}

.mobile-optimized .pronoun-button,
.mobile-optimized .type-button {
  width: 100%;
}

.emote-character-selector {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.emote-character-selector h4 {
  color: #7c3aed;
  margin-bottom: 15px;
  text-align: center;
}

.emote-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.emote-character-card {
  background: #2a2a2a;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.emote-character-card:hover {
  transform: translateY(-2px);
  background: #383838;
}

.emote-character-card.active {
  border: 2px solid #7c3aed;
  background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
}

.character-name {
  color: #7c3aed;
  font-weight: bold;
  margin-bottom: 5px;
}

.character-type {
  color: #4dff91;
  font-size: 0.9em;
}

.selected-character-tag {
  background: rgba(77, 255, 145, 0.2);
  color: #4dff91;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.9em;
  margin: 10px 0;
  display: inline-block;
}

.custom-abilities-section {
  margin: 20px 0;
  padding: 20px;
  background: #2a2a2a;
  border-radius: 10px;
}

.custom-ability-list {
  margin: 20px 0;
}

.custom-ability-entries {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}

.custom-ability-entry {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  border-left: 4px solid #4dff91;
  position: relative;
}

.ability-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ability-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
}

.ability-type.active {
  background: rgba(124, 58, 237, 0.2);
  color: #7c3aed;
}

.ability-type.passive {
  background: rgba(77, 255, 145, 0.2);
  color: #4dff91;
}

.ability-name {
  color: #fff;
  font-weight: bold;
}

.ability-desc {
  color: #ccc;
  font-size: 0.9em;
  margin: 0;
}

.remove-ability-btn {
  background: #7c3aed;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding: 0;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.remove-ability-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.add-ability-btn {
  background: #4dff91;
  color: #1a1a1a;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 15px;
  transition: all 0.3s ease;
}

.add-ability-btn:hover:not(:disabled) {
  background: #3dff81;
  transform: translateY(-2px);
}

.add-ability-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.mobile-optimized .custom-abilities-section {
  padding: 15px;
}

.mobile-optimized .custom-ability-entries {
  gap: 10px;
}

.mobile-optimized .ability-header {
  flex-wrap: wrap;
}

.survivors-count {
  text-align: center;
  color: #7c3aed;
  margin-bottom: 15px;
  font-size: 1.1em;
}

.selected-survivors-list {
  margin-top: 20px;
  background: #333;
  padding: 15px;
  border-radius: 5px;
}

.selected-survivors-list h4 {
  color: #7c3aed;
  margin-bottom: 15px;
}

.no-survivors-selected {
  text-align: center;
  color: #888;
  font-style: italic;
  padding: 10px;
}

.selected-survivor-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2a2a2a;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.selected-name {
  color: #7c3aed;
  font-weight: bold;
}

.selected-class {
  color: #4dff91;
  font-size: 0.9em;
}

.remove-selected-btn {
  background: #7c3aed;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding: 0;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.remove-selected-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.match-emotes-selection {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.emote-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.emote-select-card {
  background: #2a2a2a;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}

.emote-select-card:hover {
  transform: translateY(-2px);
  background: #383838;
}

.emote-select-card.active {
  border: 2px solid #7c3aed;
  background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
}

.emote-select-name {
  color: #7c3aed;
  font-weight: bold;
}

.character-specific-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(124, 58, 237, 0.2);
  color: #7c3aed;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
}

.selected-emotes-list {
  margin-top: 20px;
  background: #2a2a2a;
  padding: 15px;
  border-radius: 5px;
}

.selected-emotes-list h4 {
  color: #7c3aed;
  margin-bottom: 15px;
}

.selected-emote-entry {
  display: flex;
  align-items: center;
  background: #333;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  gap: 10px;
}

.selected-emote-name {
  color: #7c3aed;
  font-weight: bold;
  flex: 1;
}

.selected-emote-type {
  color: #4dff91;
  font-size: 0.9em;
}

.selected-emote-character {
  color: #7c3aed;
  font-size: 0.9em;
  font-style: italic;
}

.no-emotes-message {
  text-align: center;
  color: #888;
  padding: 20px;
  font-style: italic;
}

.mobile-optimized .match-emotes-selection {
  padding: 15px;
}

.mobile-optimized .emote-select-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.mobile-optimized .selected-emote-entry {
  flex-wrap: wrap;
  padding: 8px;
}

.conversation-maker {
  margin-top: 30px;
  padding: 20px;
  background: #2a2a2a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.speakers-selection {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.speaker-column {
  flex: 1;
  background: #333;
  padding: 20px;
  border-radius: 8px;
}

.conversation-options {
  margin: 20px 0;
  padding: 20px;
  background: #333;
  border-radius: 8px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.conversation-input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 5px;
  background: #2a2a2a;
  color: #fff;
  font-size: 16px;
}

.mood-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mood-selector select {
  padding: 8px;
  border: none;
  border-radius: 5px;
  background: #2a2a2a;
  color: #fff;
  font-size: 14px;
}

.generate-conversation-btn {
  width: 100%;
  padding: 15px;
  background: #4dff91;
  color: #1a1a1a;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.generate-conversation-btn:hover:not(:disabled) {
  background: #3dff81;
  transform: translateY(-2px);
}

.generate-conversation-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.conversation-preview {
  margin: 30px 0;
}

.conversation-card {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #7c3aed;
}

.conversation-setting {
  color: #4dff91;
  font-style: italic;
  margin: 10px 0;
}

.conversation-prelude {
  color: #ccc;
  margin: 15px 0;
  line-height: 1.5;
}

.conversation-mood-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 15px;
  background: rgba(77, 255, 145, 0.2);
  color: #4dff91;
  font-size: 0.9em;
  margin: 10px 0;
}

.dialogue-section {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dialogue-line {
  display: flex;
  gap: 15px;
  padding: 10px;
  border-radius: 5px;
  background: #2a2a2a;
}

.dialogue-line.speaker1 {
  border-left: 4px solid #7c3aed;
}

.dialogue-line.speaker2 {
  border-left: 4px solid #4dff91;
}

.dialogue-speaker {
  color: #7c3aed;
  font-weight: bold;
  min-width: 100px;
}

.dialogue-content {
  flex: 1;
}

.dialogue-text {
  color: #fff;
  margin-bottom: 5px;
  line-height: 1.4;
}

.dialogue-emotion {
  color: #4dff91;
  font-style: italic;
  font-size: 0.9em;
  margin-bottom: 3px;
}

.dialogue-action {
  color: #7c3aed;
  font-size: 0.9em;
}

.conversation-aftermath {
  margin: 20px 0;
  padding: 15px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 5px;
  color: #ccc;
  line-height: 1.5;
}

.relationship-impact {
  color: #4dff91;
  font-weight: bold;
  margin: 15px 0;
}

.save-conversation-btn {
  width: 100%;
  padding: 12px;
  background: #4dff91;
  color: #1a1a1a;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.save-conversation-btn:hover {
  background: #3dff81;
  transform: translateY(-2px);
}

.saved-conversations {
  margin-top: 40px;
}

.saved-conversations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.saved-conversation-card {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  position: relative;
  transition: all 0.3s ease;
}

.saved-conversation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.conversation-title {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
}

.conversation-participants {
  color: #4dff91;
  font-size: 0.9em;
  margin: 5px 0;
}

.conversation-mood {
  color: #ccc;
  font-size: 0.9em;
  font-style: italic;
}

.remove-conversation-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #7c3aed;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.remove-conversation-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.last-man-standing-section {
  margin-top: 40px;
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.fighters-selection {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.fighter-column {
  flex: 1;
  background: #333;
  padding: 20px;
  border-radius: 8px;
}

.battle-map-selection {
  margin: 20px 0;
  background: #333;
  padding: 20px;
  border-radius: 8px;
}

.battle-map-selection h3 {
  color: #7c3aed;
  margin-bottom: 15px;
  text-align: center;
}

.generate-battle-btn {
  width: 100%;
  padding: 15px;
  background: #7c3aed;
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1.2em;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 20px 0;
}

.generate-battle-btn:hover:not(:disabled) {
  background: #6d28d9;
  transform: translateY(-2px);
}

.generate-battle-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.map-select-card {
  background: #2a2a2a;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.map-select-card:hover {
  transform: translateY(-2px);
  background: #383838;
}

.map-select-card.active {
  border: 2px solid #7c3aed;
  background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
}

.battle-narrative {
  margin-top: 30px;
}

.battle-header {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.battle-description {
  color: #ccc;
  margin-top: 10px;
  line-height: 1.5;
}

.battle-rounds {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.battle-round {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #7c3aed;
}

.round-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.round-location {
  color: #4dff91;
  font-style: italic;
}

.round-narrative {
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 20px;
}

.fighters-status {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.fighter-status {
  flex: 1;
  background: #2a2a2a;
  padding: 15px;
  border-radius: 5px;
  border-left: 4px solid #7c3aed;
}

.fighter-status.health-critical {
  border-color: #ef4444;
}

.fighter-name {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 10px;
}

.fighter-dialogue {
  color: #4dff91;
  font-style: italic;
  margin: 10px 0;
  padding: 8px;
  background: rgba(77, 255, 145, 0.1);
  border-radius: 4px;
}

.abilities-used,
.passives-triggered {
  margin-top: 15px;
}

.ability-entry,
.passive-entry {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  border-radius: 4px;
  margin: 5px 0;
  background: rgba(124, 58, 237, 0.1);
}

.ability-name,
.passive-name {
  color: #7c3aed;
  font-weight: bold;
}

.ability-effect,
.passive-effect {
  color: #ccc;
  font-style: italic;
}

.environmental-effects {
  margin: 20px 0;
  padding: 15px;
  background: rgba(77, 255, 145, 0.1);
  border-radius: 5px;
}

.effect-entry {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  margin: 5px 0;
}

.effect-desc {
  color: #4dff91;
}

.effect-impact {
  color: #ccc;
  font-style: italic;
}

.battle-outcome {
  margin-top: 30px;
  padding: 20px;
  background: #333;
  border-radius: 8px;
  border-left: 4px solid #7c3aed;
}

.outcome-fighters {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.outcome-fighter {
  flex: 1;
  padding: 15px;
  border-radius: 5px;
}

.outcome-fighter.winner {
  background: rgba(77, 255, 145, 0.1);
  border-left: 4px solid #4dff91;
}

.outcome-fighter.loser {
  background: rgba(124, 58, 237, 0.1);
  border-left: 4px solid #7c3aed;
}

.outcome-fighter-name {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
}

.outcome-fighter-health {
  color: #ccc;
  margin: 5px 0;
}

.outcome-fighter-quote {
  color: #4dff91;
  font-style: italic;
  margin-top: 10px;
  padding: 8px;
  background: rgba(77, 255, 145, 0.1);
  border-radius: 4px;
}

.deciding-factor {
  color: #7c3aed;
  font-weight: bold;
  margin: 15px 0;
}

.final-moments {
  color: #ccc;
  line-height: 1.5;
  font-style: italic;
  padding: 15px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 5px;
}

.char-health {
  color: #4dff91;
  font-size: 0.9em;
  margin-top: 5px;
}

.mobile-optimized .fighters-selection {
  flex-direction: column;
}

.mobile-optimized .outcome-fighters {
  flex-direction: column;
}

.fighter-type-selector {
  margin-bottom: 20px;
  background: #333;
  padding: 15px;
  border-radius: 8px;
}

.fighter-type-selector h4 {
  color: #7c3aed;
  margin-bottom: 10px;
  text-align: center;
}

.fighter-type-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 15px;
}

.fighter-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.fighter-role {
  color: #4dff91;
  font-size: 0.9em;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(77, 255, 145, 0.1);
}

.versus-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  color: #7c3aed;
  font-size: 1.5em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.versus-indicator .vs {
  padding: 5px 15px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 20px;
  margin: 0 10px;
}

.fighter-preview {
  text-align: center;
  padding: 10px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 8px;
  margin: 10px 0;
}

.fighter-preview.empty {
  background: rgba(124, 58, 237, 0.05);
  color: #666;
  font-style: italic;
}

.story-mode-section {
  margin-top: 30px;
  padding: 20px;
  background: #2a2a2a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.story-creator {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.story-setup {
  background: #333;
  padding: 20px;
  border-radius: 8px;
}

.story-input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 5px;
  background: #2a2a2a;
  color: #fff;
  font-size: 16px;
  margin-bottom: 15px;
}

.story-input.description {
  min-height: 100px;
  resize: vertical;
}

.story-characters-selection {
  margin: 20px 0;
}

.selected-story-characters {
  margin: 20px 0;
  padding: 15px;
  background: #2a2a2a;
  border-radius: 8px;
}

.selected-characters-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selected-character-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #333;
  border-radius: 5px;
}

.story-prompts {
  margin: 20px 0;
  padding: 15px;
  background: #2a2a2a;
  border-radius: 8px;
}

.add-prompt-section {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.add-prompt-btn {
  background: #4dff91;
  color: #1a1a1a;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-prompt-btn:hover:not(:disabled) {
  background: #3dff81;
  transform: translateY(-2px);
}

.prompts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prompt-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #333;
  border-radius: 5px;
}

.prompt-text {
  color: #4dff91;
  flex: 1;
  margin-right: 10px;
}

.remove-prompt-btn {
  background: #7c3aed;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.remove-prompt-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.generate-story-btn {
  width: 100%;
  padding: 15px;
  background: #7c3aed;
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1.2em;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 20px 0;
}

.generate-story-btn:hover:not(:disabled) {
  background: #6d28d9;
  transform: translateY(-2px);
}

.generate-story-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.story-preview {
  margin: 30px 0;
}

.story-card {
  background: #333;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #7c3aed;
}

.story-setting {
  color: #4dff91;
  font-style: italic;
  margin: 15px 0;
  line-height: 1.5;
}

.story-chapters {
  margin: 30px 0;
}

.story-chapter {
  background: #2a2a2a;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.chapter-content {
  color: #ccc;
  line-height: 1.6;
  margin: 15px 0;
}

.character-perspectives {
  margin: 20px 0;
}

.character-perspective {
  background: rgba(124, 58, 237, 0.1);
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.perspective-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.perspective-content {
  color: #ccc;
  font-style: italic;
  line-height: 1.4;
}

.chapter-dialogue {
  margin: 20px 0;
  padding: 15px;
  background: rgba(77, 255, 145, 0.1);
  border-radius: 5px;
}

.story-ending {
  margin-top: 30px;
  padding: 20px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 8px;
}

.ending-content {
  color: #ccc;
  line-height: 1.6;
  margin: 15px 0;
}

.character-fates {
  margin-top: 20px;
}

.character-fate {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #2a2a2a;
  border-radius: 5px;
  margin-bottom: 10px;
}

.fate-description {
  color: #4dff91;
  font-style: italic;
}

.save-story-btn {
  width: 100%;
  padding: 12px;
  background: #4dff91;
  color: #1a1a1a;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.save-story-btn:hover {
  background: #3dff81;
  transform: translateY(-2px);
}

.saved-stories {
  margin-top: 40px;
}

.saved-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.saved-story-card {
  background: #333;
  padding: 15px;
  border-radius: 5px;
  position: relative;
}

.story-title {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
}

.story-characters {
  color: #4dff91;
  font-size: 0.9em;
  margin: 5px 0;
}

.remove-story-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #7c3aed;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.remove-story-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.remix-credit {
  text-align: center;
  color: #7c3aed;
  font-size: 0.9em;
  opacity: 0.8;
  margin-top: -35px;
  margin-bottom: 25px;
  font-style: italic;
}

.skin-voicelines .ability-voicelines,
.skin-voicelines .passive-voicelines {
  margin-top: 15px;
  padding: 10px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 5px;
}

.ability-voiceline-entry,
.passive-voiceline-entry {
  margin: 10px 0;
  padding: 8px;
  background: rgba(124, 58, 237, 0.05);
  border-radius: 4px;
}

.ability-name,
.passive-name {
  color: #7c3aed;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.activation-line,
.success-line,
.trigger-line {
  color: #4dff91;
  font-style: italic;
  display: block;
  margin: 3px 0;
  padding: 5px;
  background: rgba(77, 255, 145, 0.1);
  border-radius: 3px;
}