ai > .dnd-container {
background-color: #fdf6e4;
color: #3c2f2f;
border: 2px solid #8b4513;
border-radius: 8px;
padding: 15px;
font-family: Georgia, 'Times New Roman', Times, serif;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0,0,0,0.1);
max-width: 800px;
margin: 10px auto;
}
ai > .dnd-container .game-mode-indicator {
background-color: #e8dcb5;
border: 1px dashed #b49a6a;
border-radius: 4px;
padding: 5px 15px;
margin-bottom: 15px;
text-align: center;
}
ai > .dnd-container .game-mode-indicator p {
margin: 5px 0;
}
ai > .dnd-container .game-mode-indicator .mode-toggle-hint {
font-size: 0.8em;
color: #6a5a49;
}
ai > .dnd-container .main-body {
background: #fffaf0;
border: 1px solid #e8dcb5;
border-radius: 4px;
padding: 15px;
margin: 15px 0;
line-height: 1.7;
font-size: 16px;
white-space: pre-wrap;
word-wrap: break-word;
}
ai > .dnd-container .section-details {
border: 1px solid #d2b48c;
border-radius: 6px;
margin-bottom: 15px;
background: #faf3e0;
overflow: hidden;
}
ai > .dnd-container .section-details summary {
background-color: #d2b48c;
color: #5d4037;
font-weight: bold;
font-size: 1.2em;
padding: 10px 15px;
cursor: pointer;
list-style: none;
position: relative;
border-bottom: 1px solid #8b4513;
transition: background-color 0.2s;
}
ai > .dnd-container .section-details summary:hover {
background-color: #c1a37c;
}
ai > .dnd-container .section-details summary::-webkit-details-marker {
display: none;
}
ai > .dnd-container .section-details summary::before {
content: '[+]';
margin-right: 10px;
font-family: monospace;
color: #5d4037;
}
ai > .dnd-container .section-details[open] > summary::before {
content: '[-]';
}
ai > .dnd-container .section-content {
padding: 15px;
}
ai > .dnd-container .sub-header {
font-family: 'Copperplate', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-size: 1.1em;
color: #8B4513;
border-bottom: 2px solid #e8dcb5;
padding-bottom: 5px;
margin-top: 20px;
margin-bottom: 10px;
}
ai > .dnd-container .stat-list {
list-style: none;
padding-left: 0;
margin: 0;
}
ai > .dnd-container .stat-list li {
padding: 5px 0;
border-bottom: 1px dotted #d2b48c;
}
ai > .dnd-container .stat-list li:last-child {
border-bottom: none;
}
ai > .dnd-container .feature-block {
padding: 10px;
background-color: rgba(232, 220, 181, 0.3);
border-radius: 4px;
margin-top: 5px;
}
ai > .dnd-container .feature-block p {
margin: 5px 0;
}
ai > .dnd-container .info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
ai > .dnd-container .character-header {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
ai > .dnd-container .info-grid span {
padding: 4px;
background-color: rgba(232, 220, 181, 0.2);
border-radius: 3px;
}
ai > .dnd-container .core-stats-grid {
display: grid;
grid-template-columns: 1fr repeat(4, auto);
gap: 8px 12px;
align-items: center;
padding: 10px;
background-color: #f5ede0;
border-radius: 4px;
}
ai > .dnd-container .core-stats-grid .grid-header {
font-weight: bold;
color: #6a5a49;
text-align: center;
}
ai > .dnd-container .core-stats-grid span {
text-align: center;
}
ai > .dnd-container .core-stats-grid span:nth-child(5n + 1) {
text-align: left;
font-weight: bold;
}
ai > .dnd-container .quest-list {
list-style-type: '📜';
padding-left: 25px;
}
ai > .dnd-container .quest-list li {
padding-left: 10px;
margin-bottom: 10px;
}
ai > .dnd-container .quest-list.completed {
list-style-type: '✔️';
color: #556b2f;
}
ai > .dnd-container .quest-list em {
color: #6a5a49;
font-style: italic;
}
ai > .dnd-container .scrollable-table {
max-height: 400px;
overflow-y: auto;
}
ai > .dnd-container table {
width: 100%;
border-collapse: collapse;
margin-bottom: 15px;
font-size: 0.9em;
}
ai > .dnd-container th,
ai > .dnd-container td {
border: 1px solid #d2b48c;
padding: 8px;
text-align: left;
}
ai > .dnd-container th {
background-color: #e8dcb5;
font-weight: bold;
}
ai > .dnd-container tbody tr:nth-child(odd) {
background-color: rgba(245, 237, 224, 0.5);
}
ai > .dnd-container .action-list {
list-style: none;
padding-left: 0;
}
ai > .dnd-container .action-list li {
background-color: #c8a46c;
color: #fff;
padding: 12px 15px;
margin-bottom: 8px;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease-in-out;
border: 1px solid #8b4513;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
ai > .dnd-container .action-list li:hover {
background-color: #8b4513;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
ai > .dnd-container {
padding: 10px;
margin: 5px;
}
ai > .dnd-container .info-grid,
ai > .dnd-container .character-header {
grid-template-columns: 1fr;
}
ai > .dnd-container .core-stats-grid {
grid-template-columns: 1fr auto auto;
gap: 5px;
}
ai > .dnd-container .core-stats-grid .grid-header:nth-child(4),
ai > .dnd-container .core-stats-grid .grid-header:nth-child(5),
ai > .dnd-container .core-stats-grid span:nth-child(5n + 4),
ai > .dnd-container .core-stats-grid span:nth-child(5n + 5) {
display: none;
}
}