/* ============================================================
  触手与妹妹 · 紫黑治愈系美化 V1
  适配标签：status-top, story-text, command-deck, command-copy, details, status-item
============================================================ */

/* ---- 顶部状态行 ---- */
status-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 0px !important;
    background: #f5f0eb !important;
    border: 2px solid #c8b8b0 !important;
    border-radius: 16px !important;
    padding: 10px 18px !important;
    margin-bottom: 12px !important;
    font-family: 'Comic Sans MS', 'Courier New', monospace !important;
    font-size: 13px !important;
    color: #3a2a2a !important;
}

status-top span {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    line-height: 1.6 !important;
}

status-top .time {
    color: #6a4a4a !important;
    font-weight: 600 !important;
}

status-top .weather {
    color: #8a6a5a !important;
}

status-top .action {
    color: #4a2a3a !important;
    font-weight: 500 !important;
}

status-top .mood {
    color: #7a4a5a !important;
    font-weight: 500 !important;
}

/* ---- 正文 ---- */
story-text {
    display: block !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    margin: 10px 0 !important;
    border: 2px solid #e8ddd8 !important;
    color: #3a2a2a !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    font-family: 'Comic Sans MS', 'Courier New', monospace !important;
}

/* ---- 选项区 ---- */
command-deck {
    display: block !important;
    background: #f5f0eb !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    margin: 10px 0 !important;
    border: 2px solid #e8ddd8 !important;
}

command-deck::before {
    content: "💡 你想做什么？" !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #6a4a4a !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.5px !important;
    font-family: 'Comic Sans MS', 'Courier New', monospace !important;
}

command-copy {
    display: block !important;
    font-size: 13px !important;
    color: #3a2a2a !important;
    padding: 4px 0 !important;
    line-height: 1.7 !important;
    font-family: 'Comic Sans MS', 'Courier New', monospace !important;
}

/* ---- 折叠面板 ---- */
details {
    background: #faf7f3 !important;
    border: 2px solid #e8ddd8 !important;
    border-radius: 16px !important;
    padding: 6px 12px 10px 12px !important;
    margin-top: 10px !important;
    transition: border-color 0.2s !important;
}

details:hover {
    border-color: #c8b8b0 !important;
}

details summary {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6a4a4a !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
    letter-spacing: 1px !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Comic Sans MS', 'Courier New', monospace !important;
    user-select: none !important;
}

details summary:hover {
    color: #4a2a2a !important;
}

details summary::-webkit-details-marker {
    display: none !important;
}
details summary::marker {
    display: none !important;
}

details summary::before {
    content: "▶" !important;
    font-size: 11px !important;
    color: #b09088 !important;
    transition: transform 0.25s ease !important;
    display: inline-block !important;
    margin-right: 2px !important;
}

details[open] summary::before {
    transform: rotate(90deg) !important;
}

/* ---- 状态条目 ---- */
status-item {
    display: block !important;
    font-size: 13px !important;
    color: #3a2a2a !important;
    line-height: 1.8 !important;
    padding: 2px 0 !important;
    font-family: 'Comic Sans MS', 'Courier New', monospace !important;
}

status-item .label {
    color: #8a6a5a !important;
    font-weight: 600 !important;
    display: inline-block !important;
    min-width: 72px !important;
}

status-item .value {
    color: #3a2a2a !important;
    font-weight: 400 !important;
}

/* ---- 移动端适配 ---- */
@media (max-width: 500px) {
    status-top {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    story-text {
        font-size: 13px !important;
        padding: 12px 14px !important;
    }
    details summary {
        font-size: 12px !important;
    }
    status-item {
        font-size: 12px !important;
    }
    command-deck::before {
        font-size: 12px !important;
    }
    command-copy {
        font-size: 12px !important;
    }
}