/* 自定义颜色变量配置供 tailwind 扩展，这里也可以写原生 CSS */
:root {
    --watermelon-green: #2ecc71;
    --watermelon-dark-green: #27ae60;
    --watermelon-red: #ff4757;
    --watermelon-seed: #2f3542;
    --rind-yellow: #f1f2f6;
}

/* 扩展 Tailwind 的颜色 */
.bg-watermelon-green { background-color: var(--watermelon-green); }
.bg-watermelon-dark-green { background-color: var(--watermelon-dark-green); }
.bg-watermelon-red { background-color: var(--watermelon-red); }
.bg-rind-yellow { background-color: var(--rind-yellow); }

.text-watermelon-green { color: var(--watermelon-green); }
.text-watermelon-dark-green { color: var(--watermelon-dark-green); }
.text-watermelon-red { color: var(--watermelon-red); }
.text-watermelon-seed { color: var(--watermelon-seed); }

.border-watermelon-green { border-color: var(--watermelon-green); }
.border-watermelon-dark-green { border-color: var(--watermelon-dark-green); }

/* 怀旧/剧集质感字体 */
body {
    font-family: "Microsoft YaHei", "SimHei", sans-serif;
    background-image: linear-gradient(135deg, #f1f2f6 25%, #e1e3e8 100%);
}

.header {
    background-color: var(--watermelon-green);
    border-bottom: 5px solid var(--watermelon-dark-green);
    /* 加入类似西瓜皮的纹理 (简单的线性渐变模拟) */
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.05) 10px,
        rgba(0, 0, 0, 0.05) 20px
    );
}

.title-shadow {
    text-shadow: 2px 2px 0px var(--watermelon-seed), 4px 4px 0px rgba(0,0,0,0.2);
}