@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Noto+Sans+SC:wght@300;400;700&display=swap');
body {
font-family: 'Roboto', 'Noto Sans SC', sans-serif;
margin: 0;
padding: 0;
background-color: #2b3e50; /* Deep blue-grey background */
color: #e0e0e0; /* Light off-white text */
line-height: 1.6;
font-size: 16px;
overflow-x: hidden;
}
.urban-panel {
max-width: 800px;
margin: 30px auto;
padding: 25px;
background-color: #364f6b; /* Lighter blue-grey panel */
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
border: 1px solid #4e657d;
}
.urban-panel think {
display: none; /* 强制隐藏推理块 */
}
hr {
border: none;
border-top: 1px dashed #4e657d;
margin: 25px 0;
}
.urban-panel > p:first-of-type {
margin-top: 0;
}
.urban-panel > p:last-of-type {
margin-bottom: 0;
}
.urban-panel > div {
margin-bottom: 20px;
}
.urban-panel > div:last-of-type {
margin-bottom: 0;
}
.urban-panel .time-location,
.urban-panel .status-bar,
.urban-panel .environment {
font-size: 0.95em;
color: #c0c0c0; /* Slightly desaturated text for metadata */
margin-bottom: 10px;
}
.urban-panel .time-location span,
.urban-panel .status-bar span {
color: #aed581; /* Light green for general highlights */
font-weight: bold;
}
.urban-panel .environment {
color: #b0b0b0;
font-style: italic;
}
.urban-panel .status-bar {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: space-between;
padding: 10px 0;
}
.urban-panel .status-bar span {
color: #aed581; /* Default stat color */
}
.urban-panel .status-bar span:first-of-type { color: #ffd700; } /* Trust - Gold */
.urban-panel .status-bar span:nth-of-type(2) { color: #ef5350; } /* Fear - Red */
.urban-panel .status-bar span:nth-of-type(3) { color: #66bb6a; } /* Bond - Green */
.urban-panel .status-bar span:nth-of-type(4) { color: #9c27b0; } /* Defenses - Purple */
.urban-panel .main-content {
font-size: 1.05em;
color: #e0e0e0;
margin-bottom: 25px;
}
.urban-panel span.aus,
.urban-panel span.aes {
display: block;
padding: 12px 18px;
margin: 15px 0;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
line-height: 1.5;
position: relative;
word-wrap: break-word;
}
.urban-panel span.aus {
background-color: #587c9f; /* Muted blue for male dialogue */
color: #f0f8ff; /* AliceBlue for male text */
text-align: left;
margin-right: 20%;
}
.urban-panel span.aes {
background-color: #8e5c8e; /* Soft plum for female dialogue */
color: #f8f0ff; /* LavenderBlush for female text */
text-align: right;
margin-left: 20%;
}
details {
background-color: #3e546e; /* Darker blue-grey for details sections */
border-radius: 8px;
margin-bottom: 15px;
transition: background-color 0.3s ease;
overflow: hidden;
}
details[open] {
background-color: #3a4e66; /* Slightly darker when open */
}
summary {
padding: 15px 20px;
font-weight: bold;
color: #aed581; /* Light green for summary titles */
cursor: pointer;
outline: none;
user-select: none;
position: relative;
list-style: none; /* Hide default triangle */
transition: color 0.3s ease;
border-bottom: 1px solid #4e657d;
}
summary:hover {
color: #c5e1a5; /* Lighter green on hover */
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: '▶';
position: absolute;
left: 10px;
font-size: 0.8em;
color: #aed581;
transition: transform 0.2s ease;
}
details[open] summary::before {
content: '▼';
transform: rotate(90deg);
}
.details-content {
padding: 15px 20px;
border-top: 1px solid #4e657d;
background-color: #3a4e66; /* Match open details background */
color: #c0c0c0; /* Lighter text for details content */
font-size: 0.95em;
}
.details-content p {
margin-top: 0;
margin-bottom: 10px;
}
.details-content p:last-of-type {
margin-bottom: 0;
}
.details-content strong {
color: #ffd700; /* Gold for strong emphasis */
}
.details-content ul {
list-style-type: none;
padding: 0;
margin: 10px 0;
}
.details-content ul li {
background-color: #4a617e; /* Slightly darker background for list items */
margin-bottom: 8px;
padding: 12px 18px;
border-radius: 6px;
transition: background-color 0.2s ease, transform 0.1s ease;
cursor: pointer;
border-left: 4px solid #aed581; /* Light green border for actions */
color: #e0e0e0;
}
.details-content ul li:last-of-type {
margin-bottom: 0;
}
.details-content ul li:hover {
background-color: #5a718f; /* Lighter background on hover */
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.details-content ul li span {
font-weight: bold;
color: #c5e1a5; /* Lighter green for action letters */
margin-right: 5px;
}
.details-content ul li.action-A { border-left-color: #66bb6a; } /* Green for A */
.details-content ul li.action-B { border-left-color: #ffb74d; } /* Orange for B */
.details-content ul li.action-C { border-left-color: #4fc3f7; } /* Light Blue for C */
.details-content ul li.action-D { border-left-color: #e57373; } /* Light Red for D */
.details-content .status-line {
display: flex;
flex-wrap: wrap;
gap: 10px 15px;
font-size: 0.9em;
color: #b0b0b0;
margin-top: 5px;
}
.details-content .status-line span {
color: #aed581; /* Default stat color */
}
.details-content .status-line .trust-val { color: #ffd700; }
.details-content .status-line .fear-val { color: #ef5350; }
.details-content .status-line .bond-val { color: #66bb6a; }
.details-content .status-line .defenses-val { color: #9c27b0; }
@media (max-width: 768px) {
.urban-panel {
margin: 20px auto;
padding: 15px;
}
span.aus,
span.aes {
margin-left: 0;
margin-right: 0;
}
span.aes {
text-align: left; /* On smaller screens, align both to left for simplicity */
}
summary {
padding: 12px 15px;
}
.details-content {
padding: 12px 15px;
}
.details-content ul li {
padding: 10px 15px;
}
}