.ctn-fantasy-panel {
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  color: #E0E0E0; /* Light text for dark background */
  background-color: #1A1A2E; /* Dark blue-purple background */
  border: 1px solid #0F3460; /* Darker blue border */
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  line-height: 1.6;
  max-width: 800px;
  margin: 20px auto; /* Center the panel */
  overflow: hidden;
  font-size: 14px; /* Base font size */
}

.ctn-fantasy-panel h3 {
  color: #E94560; /* Vibrant red for headings */
  border-bottom: 1px solid #0F3460;
  padding-bottom: 8px;
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 1.1em;
}

.ctn-details {
  margin-bottom: 10px;
  border: 1px solid #0F3460;
  border-radius: 8px;
  background-color: #16213E; /* Slightly lighter dark blue for details sections */
}

.ctn-summary {
  display: block; /* Make summary block-level to properly style */
  cursor: pointer;
  padding: 12px 15px;
  background-color: #0F3460; /* Dark blue for summary header */
  border-radius: 8px;
  font-weight: bold;
  color: #F8F8F8; /* White text for summary */
  position: relative;
  transition: background-color 0.2s ease;
  user-select: none; /* Prevent text selection on summary */
}

.ctn-summary:hover {
  background-color: #0B2B4F; /* Darker hover effect */
}

.ctn-summary::-webkit-details-marker {
  display: none;
}

.ctn-summary::before {
  content: '▶'; /* Right-pointing triangle */
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  color: #E94560;
  font-size: 0.8em;
}

.ctn-details[open] > .ctn-summary::before {
  content: '▼'; /* Down-pointing triangle when open */
}

.ctn-details-content {
  padding: 15px;
  padding-top: 10px; /* Adjust top padding for better spacing */
  border-top: 1px solid #0F3460;
  background-color: #16213E;
  border-radius: 0 0 8px 8px;
}

.ctn-details-content strong {
  color: #E94560; /* Highlight key terms */
}

.ctn-info-grid {
  display: grid;
  grid-template-columns: auto 1fr; /* Key on left, value on right */
  gap: 8px 15px; /* Row and column gap */
  padding-top: 5px;
  padding-bottom: 5px;
}

.ctn-key {
  font-weight: bold;
  color: #E94560;
  white-space: nowrap; /* Prevent key from wrapping */
}

.ctn-value {
  color: #E0E0E0;
}

.ctn-ul-no-marker {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ctn-ul-no-marker li {
  margin-bottom: 5px;
  padding-left: 10px;
  position: relative;
}

.ctn-ul-no-marker li::before {
  content: '◆'; /* Custom bullet point */
  color: #6A7989;
  position: absolute;
  left: 0;
  font-size: 0.7em;
  top: 0.5em; /* Adjust vertical alignment */
  line-height: 1; /* Ensure bullet doesn't affect line height */
}

.ctn-list-spacing {
  margin-top: -5px; /* Reduce space above first list item */
  margin-bottom: -5px; /* Reduce space below last list item */
}

.ctn-divider {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(233, 69, 96, 0), rgba(233, 69, 96, 0.75), rgba(233, 69, 96, 0));
  margin: 20px 0;
}

.ctn-memory-section .ctn-scroll-box {
  max-height: 200px; /* Fixed height for scrollable memory area */
  overflow-y: auto;
  border: 1px solid #0F3460;
  border-radius: 5px;
  margin-bottom: 15px;
  background-color: #0F3460;
}

.ctn-memory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  min-width: 400px; /* Ensure table is readable on small scrolls */
}

.ctn-memory-table th,
.ctn-memory-table td {
  border: 1px solid #1A1A2E; /* Darker border for table cells */
  padding: 8px 10px;
  text-align: left;
}

.ctn-memory-table th {
  background-color: #0F3460; /* Table header background */
  color: #F8F8F8;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 1;
}

.ctn-memory-table tbody tr:nth-child(even) {
  background-color: #122B48; /* Alternate row color */
}

.ctn-memory-table tbody tr:hover {
  background-color: #1E3A6B; /* Hover effect for table rows */
}

.ctn-action-list {
  list-style: decimal; /* Numbered list */
  padding-left: 25px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.ctn-action-list li {
  background-color: #0F3460; /* Dark blue for action items */
  margin-bottom: 8px;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  color: #E0E0E0;
}

.ctn-action-list li:hover {
  background-color: #1E3A6B; /* Lighter blue on hover */
  transform: translateX(5px);
  color: #F8F8F8;
}

/* Custom Scrollbar for Webkit browsers */
.ctn-scroll-box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ctn-scroll-box::-webkit-scrollbar-track {
  background: #1A1A2E; /* Dark background for scrollbar track */
  border-radius: 10px;
}

.ctn-scroll-box::-webkit-scrollbar-thumb {
  background: #E94560; /* Vibrant red for scrollbar thumb */
  border-radius: 10px;
  border: 2px solid #1A1A2E; /* Border to make thumb appear thinner */
}

.ctn-scroll-box::-webkit-scrollbar-thumb:hover {
  background: #D4324D; /* Slightly darker red on hover */
}


/* Mobile responsiveness */
@media (max-width: 768px) {
  .ctn-fantasy-panel {
    padding: 10px;
    margin: 10px auto;
    border-radius: 8px;
    font-size: 13px; /* Slightly smaller base font size on mobile */
  }

  .ctn-summary {
    padding: 10px 15px;
  }

  .ctn-details-content {
    padding: 10px;
  }

  .ctn-info-grid {
    grid-template-columns: 1fr; /* Stack key-value pairs vertically */
    gap: 5px 0;
  }

  .ctn-key {
    border-bottom: 1px dotted #0F3460; /* Dotted line under key for separation */
    padding-bottom: 3px;
    margin-bottom: 2px;
  }

  .ctn-value {
    padding-left: 10px; /* Indent value */
  }

  .ctn-memory-section .ctn-scroll-box {
    max-height: 150px; /* Shorter scroll height on mobile */
  }

  .ctn-memory-table th,
  .ctn-memory-table td {
    padding: 6px 8px;
    font-size: 0.85em;
  }

  .ctn-action-list li {
    padding: 8px 12px;
  }
}