.maritime-panel {
background: #1e1b1a;
background-image:
linear-gradient(45deg, rgba(120, 70, 30, 0.1) 25%, transparent 25%),
linear-gradient(-45deg, rgba(120, 70, 30, 0.1) 25%, transparent 25%);
background-size: 30px 30px;
color: #e6d5b8;
font-family: 'Georgia', 'Times New Roman', '宋体', serif;
padding: 20px;
border-radius: 16px 8px 16px 8px;
border: 6px double #aa7c4f;
box-shadow:
0 10px 25px rgba(0,0,0,0.7),
inset 0 0 0 2px #4a3729,
inset 0 0 20px rgba(0,0,0,0.5);
max-width: 95%;
margin: 20px auto;
position: relative;
}
.maritime-panel::before {
content: "";
position: absolute;
top: 10px; left: 10px; right: 10px; bottom: 10px;
border: 1px dashed #b98a5c;
pointer-events: none;
border-radius: 12px 4px 12px 4px;
opacity: 0.3;
}
.maritime-panel .environment-bar {
background: #2c241e;
border-left: 6px solid #d4af37;
border-radius: 8px 4px 8px 4px;
padding: 12px 15px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 15px 25px;
font-size: 0.95em;
box-shadow: inset 0 2px 5px #0a0a0a, 0 4px 8px black;
color: #f0e6d2;
border: 1px solid #6b4f3a;
}
.maritime-panel .env-item {
flex: 1 1 200px;
display: flex;
align-items: center;
gap: 6px;
}
.maritime-panel .env-item::before {
content: "⚓";
color: #d4af37;
font-size: 1.2em;
opacity: 0.8;
}
.maritime-panel .env-item:nth-child(2)::before { content: "🧭"; }
.maritime-panel .env-item:nth-child(3)::before { content: "🌪️"; }
.maritime-panel .main-story-body {
background: #2f2822;
background-image: radial-gradient(circle at 30% 30%, rgba(255,215,0,0.05) 0%, transparent 30%);
padding: 20px 25px;
border-radius: 20px 8px 20px 8px;
margin-bottom: 25px;
border: 1px solid #7a6234;
box-shadow: inset 0 0 20px #1a1512, 0 6px 12px black;
font-size: 1.05em;
color: #f3e9d2;
line-height: 1.7;
white-space: pre-wrap;
text-shadow: 1px 1px 0 #00000060;
}
.maritime-panel details {
margin-bottom: 12px;
border: 1px solid #6b4f3a;
border-radius: 14px 6px 14px 6px;
overflow: hidden;
background: #251f1b;
box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}
.maritime-panel summary {
background: #3a2e26;
background: linear-gradient(170deg, #4a3a30, #2e2620);
padding: 12px 20px;
cursor: pointer;
font-weight: bold;
font-size: 1.1em;
color: #e6c27a;
border-bottom: 2px solid #b78a4b;
text-shadow: 0 2px 3px black;
letter-spacing: 1px;
position: relative;
list-style: none;
transition: 0.2s;
box-shadow: inset 0 -2px 5px #0f0f0f;
}
.maritime-panel summary:hover {
background: #4f3f34;
color: #f5d98f;
}
.maritime-panel summary::-webkit-details-marker {
display: none;
}
.maritime-panel summary::after {
content: "▼";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 0.9em;
color: #d4af37;
transition: transform 0.3s;
}
.maritime-panel details[open] > summary::after {
transform: translateY(-50%) rotate(180deg);
}
.maritime-panel .content-box,
.maritime-panel .info-card > div:not(summary) {
padding: 18px 20px;
background: #2c241e;
border-top: 1px solid #8b6f45;
}
.maritime-panel .grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px;
margin-bottom: 15px;
}
.maritime-panel .grid-item {
background: #1e1713;
padding: 6px 12px;
border-radius: 30px 6px 30px 6px;
border: 1px solid #b78a4b;
box-shadow: inset 0 1px 3px black;
color: #f0dbc0;
font-size: 0.95em;
}
.maritime-panel .badge {
background: #8b4513;
background: linear-gradient(145deg, #b35e1a, #6e2c00);
padding: 3px 12px;
border-radius: 40px 4px 40px 4px;
font-size: 0.85em;
color: #ffe6b3;
border: 1px solid #e6a345;
box-shadow: 0 2px 0 #3d1e0a;
white-space: nowrap;
}
.maritime-panel .description-block {
margin: 12px 0;
padding: 10px 15px;
background: #1f1a16;
border-left: 4px solid #b78a4b;
border-radius: 0 10px 10px 0;
font-size: 0.95em;
line-height: 1.6;
color: #daceb5;
}
.maritime-panel .skill-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 15px 0;
}
.maritime-panel .skill-item {
background: #2d241e;
padding: 6px 15px;
border-radius: 30px 4px 30px 4px;
border: 1px solid #8b6f45;
font-size: 0.9em;
color: #edd7b0;
}
.maritime-panel .inventory-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 15px 0;
}
.maritime-panel .inv-item {
background: #1e1a16;
padding: 6px 15px;
border-radius: 30px 6px 30px 6px;
border: 1px solid #a4703a;
box-shadow: inset 0 0 5px #00000066;
font-size: 0.95em;
}
.maritime-panel .currency-panel {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 15px 0;
padding: 10px;
background: #1f1915;
border-radius: 20px 6px 20px 6px;
border: 1px solid #b78a4b;
}
.maritime-panel .coin {
padding: 4px 14px;
border-radius: 40px 4px 40px 4px;
font-size: 0.9em;
font-weight: bold;
background: #2a2a2a;
color: #fff;
border: 1px solid #8b6f45;
box-shadow: 0 2px 0 #3d3d3d;
}
.maritime-panel .pp { background: #d4c9b0; color: #2d2d2d; border-color: #c0b28a; }
.maritime-panel .gp { background: #f5c542; color: #2d2d2d; border-color: #e0b020; }
.maritime-panel .ep { background: #b0a9a0; color: #1f1f1f; border-color: #9a8e7f; }
.maritime-panel .sp { background: #b0b0b0; color: #1f1f1f; border-color: #8f8f8f; }
.maritime-panel .cp { background: #b87333; color: #fff; border-color: #9e5e29; }
.maritime-panel .loot-box {
background: #241f1a;
padding: 12px 15px;
border-radius: 12px 4px 12px 4px;
border: 1px dashed #b78a4b;
color: #dbb477;
font-size: 0.95em;
}
.maritime-panel .ship-header {
font-size: 1.3em;
color: #e6c27a;
border-bottom: 2px solid #b78a4b;
padding-bottom: 5px;
margin-bottom: 15px;
text-shadow: 2px 2px 0 black;
}
.maritime-panel .stat-row {
display: flex;
align-items: center;
gap: 15px;
margin: 10px 0;
}
.maritime-panel .stat-row span:first-child {
width: 100px;
color: #c5a059;
}
.maritime-panel .progress-bar {
flex-grow: 1;
height: 12px;
background: #2a1e18;
border-radius: 20px;
border: 1px solid #6b4f3a;
overflow: hidden;
box-shadow: inset 0 2px 4px black;
}
.maritime-panel .progress-fill {
height: 100%;
background: linear-gradient(90deg, #b87333, #e6a345);
box-shadow: 0 0 5px #ffbb33;
border-radius: 20px;
}
.maritime-panel .hull { background: linear-gradient(90deg, #b22222, #dc143c); }
.maritime-panel .morale { background: linear-gradient(90deg, #1e3c72, #2a5298); }
.maritime-panel .supply-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
margin: 15px 0;
}
.maritime-panel .supply-item {
background: #1e1713;
padding: 6px 12px;
border-radius: 30px 4px 30px 4px;
border: 1px solid #8b6f45;
font-size: 0.9em;
color: #d2b48c;
}
.maritime-panel .debt-info {
background: #4a2c2c;
padding: 8px 15px;
border-radius: 40px 4px 40px 4px;
color: #f5deb3;
border: 1px solid #b8860b;
text-align: center;
}
.maritime-panel .npc-entry {
margin-bottom: 15px;
padding: 10px;
background: #1f1915;
border-radius: 12px 4px 12px 4px;
border: 1px solid #5a4a38;
}
.maritime-panel .npc-header {
font-size: 1.1em;
border-bottom: 1px solid #b78a4b;
padding-bottom: 4px;
margin-bottom: 8px;
color: #e6c27a;
}
.maritime-panel .tag {
background: #3a2e26;
padding: 2px 8px;
border-radius: 40px 2px 40px 2px;
font-size: 0.8em;
margin-left: 8px;
color: #d4af37;
border: 1px solid #8b6f45;
}
.maritime-panel .npc-meta {
color: #a89b8c;
font-size: 0.9em;
margin-bottom: 6px;
}
.maritime-panel .npc-desc {
color: #daceb5;
font-size: 0.95em;
margin: 5px 0;
}
.maritime-panel .divider {
border: none;
border-top: 2px dashed #8b6f45;
margin: 20px 0;
}
.maritime-panel .quest-item {
background: #1e1814;
padding: 12px 15px;
border-radius: 12px 4px 12px 4px;
margin-bottom: 10px;
border-left: 6px solid;
}
.maritime-panel .quest-item.main { border-color: #d4af37; }
.maritime-panel .quest-item.side { border-color: #6b8e23; }
.maritime-panel .rumor-box {
background: #2a221c;
padding: 12px 15px;
border-radius: 12px 4px 12px 4px;
margin-top: 15px;
border: 1px solid #8b6f45;
}
.maritime-panel .rumor-box ul {
padding-left: 20px;
color: #d2b48c;
}
.maritime-panel .scroll-container {
overflow-x: auto;
}
.maritime-panel table {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
background: #1e1713;
border-radius: 10px;
overflow: hidden;
}
.maritime-panel th {
background: #3a2e26;
color: #e6c27a;
padding: 10px;
font-weight: bold;
border-bottom: 2px solid #b78a4b;
}
.maritime-panel td {
padding: 8px 10px;
border-bottom: 1px solid #4a3a30;
color: #daceb5;
}
.maritime-panel tr:last-child td {
border-bottom: none;
}
.maritime-panel .action-list {
padding-left: 0;
list-style: none;
margin: 0;
}
.maritime-panel .action-list li {
margin-bottom: 10px;
padding: 12px 15px 12px 45px;
background: #1f1915;
border: 1px solid #6b4f3a;
border-radius: 40px 6px 40px 6px;
position: relative;
cursor: pointer;
transition: 0.2s;
color: #ecd7b0;
}
.maritime-panel .action-list li:hover {
background: #2e261f;
border-color: #b78a4b;
transform: translateX(8px);
box-shadow: 0 3px 8px black;
}
.maritime-panel .action-list li::before {
content: "⚓";
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 1.2em;
color: #d4af37;
}
@media (max-width: 600px) {
.maritime-panel .grid-layout {
grid-template-columns: 1fr 1fr;
}
.maritime-panel .environment-bar {
flex-direction: column;
gap: 8px;
}
.maritime-panel .env-item {
flex: 1 1 auto;
}
}
#ai-chat-box-wrap .maritime-panel.pirate-theme .inventory-grid .inv-item,
#ai-chat-box-wrap .maritime-panel.pirate-theme .skill-list .skill-item,
#ai-chat-box-wrap .maritime-panel.pirate-theme .quest-item,
#ai-chat-box-wrap .maritime-panel.pirate-theme .quest-item strong,
#ai-chat-box-wrap .maritime-panel.pirate-theme .quest-item p,
#ai-chat-box-wrap .maritime-panel.pirate-theme .rumor-box,
#ai-chat-box-wrap .maritime-panel.pirate-theme .rumor-box strong,
#ai-chat-box-wrap .maritime-panel.pirate-theme .rumor-box li,
#ai-chat-box-wrap .maritime-panel.pirate-theme .npc-entry,
#ai-chat-box-wrap .maritime-panel.pirate-theme .npc-desc,
#ai-chat-box-wrap .maritime-panel.pirate-theme .npc-meta,
#ai-chat-box-wrap .maritime-panel.pirate-theme table,
#ai-chat-box-wrap .maritime-panel.pirate-theme th,
#ai-chat-box-wrap .maritime-panel.pirate-theme td {
color: #e6d5b8 !important;
}
#ai-chat-box-wrap .maritime-panel.empire-theme .inventory-grid .inv-item,
#ai-chat-box-wrap .maritime-panel.empire-theme .skill-list .skill-item,
#ai-chat-box-wrap .maritime-panel.empire-theme .quest-item,
#ai-chat-box-wrap .maritime-panel.empire-theme .quest-item strong,
#ai-chat-box-wrap .maritime-panel.empire-theme .quest-item p,
#ai-chat-box-wrap .maritime-panel.empire-theme .rumor-box,
#ai-chat-box-wrap .maritime-panel.empire-theme .rumor-box strong,
#ai-chat-box-wrap .maritime-panel.empire-theme .rumor-box li,
#ai-chat-box-wrap .maritime-panel.empire-theme .npc-entry,
#ai-chat-box-wrap .maritime-panel.empire-theme .npc-desc,
#ai-chat-box-wrap .maritime-panel.empire-theme .npc-meta,
#ai-chat-box-wrap .maritime-panel.empire-theme table,
#ai-chat-box-wrap .maritime-panel.empire-theme th,
#ai-chat-box-wrap .maritime-panel.empire-theme td {
color: #b8e2ff !important;
}
#ai-chat-box-wrap .maritime-panel.pirate-theme .coin,
#ai-chat-box-wrap .maritime-panel.pirate-theme .badge,
#ai-chat-box-wrap .maritime-panel.pirate-theme .tag,
#ai-chat-box-wrap .maritime-panel.pirate-theme .target-desc {
color: inherit !important;
}
#ai-chat-box-wrap .maritime-panel.empire-theme .coin,
#ai-chat-box-wrap .maritime-panel.empire-theme .badge,
#ai-chat-box-wrap .maritime-panel.empire-theme .tag,
#ai-chat-box-wrap .maritime-panel.empire-theme .target-desc {
color: inherit !important;
}