
<div class="ui-frame">
    
    <details class="scene-header" open>
        <summary>当前情况</summary>
        <div class="header-content">
            <p><strong>时间:</strong> 2024年7月26日 傍晚18:30</p>
            <p><strong>地点:</strong> 合租公寓的客厅</p>
            <p><strong>人物:</strong> 你 (陆沉), 夏晚晴</p>
        </div>
    </details>

    
    <div class="story-content">
        <p>你刚打开家门，一股夹杂着外卖香气的热浪就扑面而来。客厅的灯没开，只有电视屏幕的光在昏暗中闪烁，将沙发上那团小小的身影映照得忽明忽暗。</p>
        <p>夏晚晴盘着腿，怀里抱着一桶家庭装的冰淇淋，正聚精会神地看着一部甜得发腻的偶像剧。听到你的动静，她头也不回，只是懒洋洋地从鼻子里哼出一声：</p>
        <p class="dialogue female-speech">“哟，滞销品今天下班还挺早？”</p>
        <p>她的声音和冰淇淋一样凉，带着一丝甜，但更多的是让你牙酸的嘲讽。</p>
    </div>

    
    <details class="status-bar player-status">
        <summary>你的档案</summary>
        <div class="status-content">
            <p><strong>姓名：</strong> 陆沉</p>
            <p><strong>身份：</strong> 28岁的普通社畜，夏晚晴的哥哥，被妹妹认定的“滞销品”</p>
            <p><strong>当前状态：</strong> 刚下班，身心俱疲，对妹妹的毒舌有点无奈</p>
        </div>
    </details>

    
    <details class="status-bar npc-status" open>
        <summary>夏晚晴 状态栏</summary>
        <div class="status-content">
            <p><strong>心情：</strong> 咸鱼瘫（非常放松）</p>
            <p><strong>对你的嫌弃值：</strong> 85/100 (稳定在高位)</p>
            <p><strong>今日KPI：</strong> 已在相亲APP上为你筛选了3位“潜在买家”，待审核</p>
            <p><strong>人物心声：</strong> “哼，这个月的房租水电又得靠我哥...得赶紧把他推销出去，这房子就是我一个人的了！”</p>
        </div>
    </details>

    
    <details class="memory-zone">
        <summary>星记忆回廊 (0 | 1)</summary>
        <div class="memory-content">
            <table>
                <thead>
                    <tr><th>区域</th><th>时间</th><th>场景</th><th>事件摘要</th></tr>
                </thead>
                <tbody>
                    <tr><td>STM</td><td>第1天 18:30</td><td>客厅</td><td>你下班回家，夏晚晴一边吃冰淇淋一边用“滞销品”称呼你。</td></tr>
                </tbody>
            </table>
        </div>
    </details>

    
    <div class="action-suggestions">
        <div class="suggestion-title">接下来可以做什么？</div>
        <div class="option">1. 无视她的嘲讽，回自己房间。</div>
        <div class="option">2. 反唇相讥：“咸鱼少女今天又没出门？”</div>
        <div class="option">3. 凑过去看看她在吃什么，顺便抢一勺。</div>
        <div class="option">4. 询问她今天又给你安排了什么“好事”。</div>
    </div>
</div>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

    :root {
        --bg-main: #1a1b26;
        --bg-content: #24283b;
        --border-glow: rgba(139, 233, 253, 0.5);
        --border-glow-alt: rgba(255, 121, 198, 0.5);
        --text-main: #c0caf5;
        --text-bright: #f8f8f2;
        --primary: #8be9fd;
        --secondary: #ff79c6;
        --purple: #bd93f9;
        --shadow: rgba(0, 0, 0, 0.5);
    }

    .ui-frame {
        max-width: 800px;
        margin: 20px auto;
        font-family: 'Noto Sans SC', sans-serif;
        background-color: var(--bg-main);
        border: 1px solid var(--border-glow);
        border-radius: 12px;
        box-shadow: 0 0 25px var(--border-glow), 0 10px 40px var(--shadow);
        overflow: hidden;
        color: var(--text-main);
    }

    .ui-frame p {
        margin: 0;
        padding: 0;
        line-height: 1.8;
    }
    
    .ui-frame details {
        transition: all 0.3s ease-in-out;
    }

    .ui-frame summary {
        padding: 12px 20px;
        font-weight: 700;
        cursor: pointer;
        outline: none;
        color: var(--primary);
        border-bottom: 1px solid transparent;
        transition: all 0.3s ease;
        position: relative;
    }
    
    .ui-frame summary::before {
        content: '▶';
        margin-right: 10px;
        font-size: 0.8em;
        transition: transform 0.3s ease;
        display: inline-block;
    }

    .ui-frame details[open] > summary::before {
        transform: rotate(90deg);
    }

    .ui-frame details > summary:hover {
        color: var(--secondary);
    }

    .scene-header {
        background: linear-gradient(145deg, rgba(36, 40, 59, 0.5), rgba(26, 27, 38, 0.2));
        border-bottom: 1px solid var(--border-glow);
    }

    .scene-header .header-content {
        padding: 0 20px 15px 40px;
    }

    .story-content {
        padding: 25px;
        margin: 15px;
        background-color: var(--bg-content);
        border: 1px solid var(--border-glow);
        border-radius: 8px;
        box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
    }

    .story-content p {
        margin-bottom: 15px;
    }
    .story-content p:last-child {
        margin-bottom: 0;
    }
    
    .dialogue {
        padding: 10px 15px;
        border-radius: 8px;
        background: rgba(0,0,0,0.2);
    }

    .female-speech {
        border-left: 3px solid var(--secondary);
        color: var(--secondary);
    }

    .status-bar {
        margin: 0 15px 15px 15px;
        background-color: var(--bg-content);
        border: 1px solid var(--border-glow);
        border-radius: 8px;
    }

    .status-bar .status-content {
        padding: 15px 20px;
    }
    
    .npc-status {
        border-color: var(--border-glow-alt);
    }
    .npc-status summary {
        color: var(--secondary);
    }

    .memory-zone {
        margin: 0 15px 15px 15px;
        background-color: var(--bg-content);
        border: 1px solid var(--purple);
        border-radius: 8px;
    }
    .memory-zone summary {
        color: var(--purple);
    }
    .memory-zone .memory-content {
        padding: 15px;
        overflow-x: auto;
    }
    .memory-zone table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9em;
    }
    .memory-zone th, .memory-zone td {
        padding: 8px 12px;
        text-align: left;
        border-bottom: 1px solid var(--border-glow);
    }
    .memory-zone th {
        color: var(--text-bright);
        font-weight: 500;
    }

    .action-suggestions {
        padding: 20px;
        background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    }
    
    .suggestion-title {
        font-weight: 700;
        color: var(--text-bright);
        margin-bottom: 15px;
        text-align: center;
    }

    .option {
        padding: 12px 15px;
        background-color: var(--bg-content);
        border: 1px solid var(--border-glow);
        border-radius: 6px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .option:last-child {
        margin-bottom: 0;
    }
    .option:hover {
        background-color: var(--primary);
        color: var(--bg-main);
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 15px var(--border-glow);
    }
</style>
