:root { --color-primary: #dc3545; --color-primary-dark: #c82333; --color-primary-light: #ff4555; --color-bg-dark: #0f0f0f; --color-bg-medium: #1a1a2e; --color-bg-light: #16213e; --color-text: #e0e0e0; --color-text-dim: #ccc; --color-text-dimmer: #bbb; --color-text-gray: #999; --color-white: #ffffff; --color-black-80: rgba(0, 0, 0, 0.8); --color-wolf: #4caf50; --color-tiger: #00bcd4; --color-demon: #ffc107; --color-dragon: #f44336; --color-god: #e91e63; --gradient-bg: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-medium) 50%, var(--color-bg-light) 100%); --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); --gradient-primary-hover: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%); --gradient-manifesto: linear-gradient(180deg, rgba(20, 20, 30, 0.95) 0%, rgba(40, 10, 10, 0.95) 100%); --gradient-wolf: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%); --gradient-tiger: linear-gradient(135deg, rgba(0, 188, 212, 0.1) 0%, rgba(0, 188, 212, 0.05) 100%); --gradient-demon: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%); --gradient-dragon: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.05) 100%); --gradient-god: linear-gradient(135deg, rgba(233, 30, 99, 0.1) 0%, rgba(233, 30, 99, 0.05) 100%); }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans TC', sans-serif; background: var(--gradient-bg); color: var(--color-text); min-height: 100vh; overflow-x: hidden; }
.header { background: var(--color-black-80); padding: 2rem 0; border-bottom: 3px solid var(--color-primary); text-align: center; margin-bottom: 2rem; }
.header h1 { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 900; color: var(--color-primary); text-shadow: 0 4px 15px rgba(220, 53, 69, 0.5); letter-spacing: 2px; }
.header p { font-size: 1.1rem; color: var(--color-text-gray); margin-top: 0.5rem; }
.preamble-section { padding: 2.5rem; background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.02) 100%); border-radius: 15px; margin: 0 2rem 3rem; border-left: 5px solid var(--color-primary); box-shadow: 0 4px 15px rgba(220, 53, 69, 0.1); }
.preamble-section h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--color-primary); margin-bottom: 1.5rem; }
.preamble-section p { font-size: 1rem; line-height: 1.8; color: #d0d0d0; margin-bottom: 1rem; }
.preamble-section p:last-child { margin-bottom: 0; }
.disaster-section { padding: 3rem 2rem; background: rgba(20, 20, 30, 0.9); border-radius: 15px; margin: 0 2rem 4rem; border: 2px solid rgba(220, 53, 69, 0.3); }
.disaster-section h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--color-primary); margin-bottom: 2rem; text-align: center; text-shadow: 0 2px 10px rgba(220, 53, 69, 0.3); }
.disaster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.disaster-card { border-radius: 10px; padding: 1.5rem; transition: all 0.3s ease; position: relative; overflow: hidden; border: 2px solid; }
.disaster-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s ease; }
.disaster-card:hover::before { left: 100%; }
.disaster-card:hover { transform: translateY(-5px); }
.disaster-card.wolf { background: var(--gradient-wolf); border-color: rgba(76, 175, 80, 0.4); }
.disaster-card.wolf:hover { border-color: var(--color-wolf); box-shadow: 0 0 20px rgba(76, 175, 80, 0.5); }
.disaster-card.tiger { background: var(--gradient-tiger); border-color: rgba(0, 188, 212, 0.4); }
.disaster-card.tiger:hover { border-color: var(--color-tiger); box-shadow: 0 0 20px rgba(0, 188, 212, 0.5); }
.disaster-card.demon { background: var(--gradient-demon); border-color: rgba(255, 193, 7, 0.4); }
.disaster-card.demon:hover { border-color: var(--color-demon); box-shadow: 0 0 20px rgba(255, 193, 7, 0.5); }
.disaster-card.dragon { background: var(--gradient-dragon); border-color: rgba(244, 67, 54, 0.4); }
.disaster-card.dragon:hover { border-color: var(--color-dragon); box-shadow: 0 0 20px rgba(244, 67, 54, 0.5); }
.disaster-card.god { background: var(--gradient-god); border-color: rgba(233, 30, 99, 0.4); }
.disaster-card.god:hover { border-color: var(--color-god); box-shadow: 0 0 20px rgba(233, 30, 99, 0.5); }
.disaster-level { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 900; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem; }
.disaster-level.wolf { color: var(--color-wolf); }
.disaster-level.tiger { color: var(--color-tiger); }
.disaster-level.demon { color: var(--color-demon); }
.disaster-level.dragon { color: var(--color-dragon); }
.disaster-level.god { color: var(--color-god); }
.level-bars { display: flex; gap: 6px; margin-bottom: 1rem; }
.bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.bar.filled { background: currentColor; }
.disaster-description { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-dimmer); margin-bottom: 1rem; }
.disaster-impact { font-size: 0.85rem; color: var(--color-text-gray); font-style: italic; border-left: 3px solid; padding-left: 1rem; }
.disaster-card.wolf .disaster-impact { border-color: var(--color-wolf); }
.disaster-card.tiger .disaster-impact { border-color: var(--color-tiger); }
.disaster-card.demon .disaster-impact { border-color: var(--color-demon); }
.disaster-card.dragon .disaster-impact { border-color: var(--color-dragon); }
.disaster-card.god .disaster-impact { border-color: var(--color-god); }
.footer { background: var(--color-black-80); padding: 2rem; text-align: center; border-top: 2px solid rgba(220, 53, 69, 0.3); margin-top: 4rem; color: var(--color-text-gray); }
.manifesto-section { padding: 4rem 2rem; background: var(--gradient-manifesto); border-radius: 15px; margin: 0 2rem 4rem; border: 2px solid var(--color-primary); box-shadow: 0 0 30px rgba(220, 53, 69, 0.2); }
.manifesto-header { text-align: center; margin-bottom: 3rem; }
.manifesto-header h2 { font-family: 'Playfair Display', serif; font-size: 2.8rem; color: var(--color-primary); font-weight: 900; line-height: 1.3; text-shadow: 0 2px 15px rgba(220, 53, 69, 0.4); }
.manifesto-header .subtitle { font-size: 1.5rem; color: var(--color-demon); margin-top: 1rem; font-weight: 700; }
.manifesto-body { max-width: 900px; margin: 0 auto; line-height: 1.8; font-size: 1.1rem; color: var(--color-text-dim); }
.highlight-box { background: rgba(220, 53, 69, 0.1); border-left: 5px solid var(--color-primary); padding: 1.5rem; margin: 2rem 0; border-radius: 0 10px 10px 0; }
.highlight-red-text { color: var(--color-primary-light); font-weight: 700; }
.reform-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 3rem 0; }
.reform-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(220, 53, 69, 0.3); padding: 2rem; border-radius: 12px; transition: all 0.3s ease; }
.reform-card:hover { background: rgba(220, 53, 69, 0.08); transform: translateY(-3px); border-color: var(--color-primary); }
.reform-card h4 { color: var(--color-demon); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.8rem; }
.reform-card h4 .badge { background: var(--color-primary); color: var(--color-white); font-size: 0.9rem; padding: 0.4rem 0.8rem; border-radius: 5px; }
.opinion-footer { text-align: center; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.vote-now-btn { background: var(--gradient-primary); color: var(--color-white); border: none; padding: 1.2rem 3rem; font-size: 1.4rem; font-weight: 900; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; box-shadow: 0 5px 20px rgba(220, 53, 69, 0.5); }
.vote-now-btn:hover { transform: scale(1.05); color: var(--color-white); box-shadow: 0 8px 25px rgba(220, 53, 69, 0.7); background: var(--gradient-primary-hover); }
/* 輔助類別 */
.text-white { color: var(--color-white) !important; }
.color-demon-text { color: var(--color-demon) !important; }
.no-list-style { list-style: none; padding-left: 0; margin-top: 1rem; }
@media (max-width: 768px) { .header h1 { font-size: 2rem; } .preamble-section { margin: 0 1rem 2rem; padding: 1.5rem; } .disaster-section h2 { font-size: 1.8rem; } .disaster-grid { grid-template-columns: 1fr; } .manifesto-header h2 { font-size: 1.8rem; } .manifesto-section { margin: 0 1rem 3rem; padding: 2rem 1rem; } }