/* 1. 漫画纸质感底色与网格 */
:root {
    --manga-yellow: #FFF3D6;
    --shin-yellow: #FCE762;
    --shin-red: #E53E30;
    --comic-blue: #E8F5FF;
}

div, details, text {
    background-color: var(--manga-yellow);
    background-image: radial-gradient(#d4c4a1 0.8px, transparent 0.8px);
    background-size: 12px 12px;
    font-family: "Chalkboard SE", "Comic Sans MS", "Microsoft YaHei", sans-serif;
}

/* 2. 隐藏思维链 */
think { display: none; }

/* 3. 粗黑圆角边框与分镜装饰 */
details, .manga-container {
    border: 4px solid #000;
    border-radius: 12px;
    margin-bottom: 8px;
    box-shadow: 6px 6px 0px #000;
    position: relative;
}

/* 在角部添加漫画星星装饰 */
details::after {
    content: "★";
    position: absolute;
    top: -10px;
    right: -10px;
    color: var(--shin-red);
    font-size: 20px;
    -webkit-text-stroke: 1px #000;
}

/* 4. 状态栏(Summary)美化 */
summary {
    background: var(--shin-yellow);
    padding: 12px;
    color: #5D3A1A;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
    border-bottom: 4px solid #000;
}

/* 5. 聊天气泡：NPC(左侧) */
.bubble-l {
    position: relative;
    background: #FFF;
    border: 4px solid #000;
    border-radius: 15px;
    padding: 15px;
    margin-left: 60px;
    color: #1A2A3A;
}

.bubble-l::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 20px;
    border-width: 20px 20px 0 0;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

/* 6. 拟声词浮动动画 */
.onomatopoeia {
    position: absolute;
    top: -25px;
    left: -10px;
    font-family: "Impact", "DFGothic", sans-serif;
    color: var(--shin-red);
    font-size: 28px;
    text-shadow: 2px 2px 0 #000;
    transform: rotate(-10deg);
    animation: popUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popUp {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1) rotate(-10deg); opacity: 1; }
}

/* 7. 点击下沉反馈 */
summary:active, .bubble-l:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0px #000;
}

/* 8. 电影选择列表样式 */
details li {
    padding: 5px;
    list-style: "👉";
    color: #5D3A1A;
    font-weight: bold;
}

details li:hover {
    color: var(--shin-red);
    background: rgba(229, 62, 48, 0.1);
}