:root { --ink: #2b2118; --paper: #fdf8ef; --accent: #b7791f; --card: #fffdf7; --line: #e5d9c3; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, 'Times New Roman', serif; background: var(--paper); color: var(--ink); line-height: 1.6; }
.site-header { text-align: center; padding: 1.5rem 1rem 0.5rem; }
.site-header h1 { margin: 0; font-size: 2.2rem; }
.tagline { max-width: 720px; margin: 0.5rem auto; }
.mirror-note { max-width: 720px; margin: 0.5rem auto; font-style: italic; }
.tip-button { display: inline-block; background: #ffdd00; color: #222; font-family: Arial, sans-serif; font-weight: bold; padding: 0.5rem 1rem; border-radius: 8px; text-decoration: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 1rem 0 0; }
.tabs button { font-family: Arial, sans-serif; font-size: 1rem; padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; }
.tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
main { max-width: 1020px; margin: 0 auto; padding: 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem 1rem; font-family: Arial, sans-serif; }
.filters label { display: flex; flex-direction: column; font-size: 0.85rem; }
.filters input, .filters select { padding: 0.4rem; border: 1px solid var(--line); border-radius: 6px; font-size: 1rem; }
.filters button { padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); cursor: pointer; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.card img { width: 100%; height: 200px; object-fit: cover; background: #eee; }
.card-body { padding: 0.75rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.card-body h3 { margin: 0; font-size: 1.15rem; }
.card-date { font-family: Arial, sans-serif; font-size: 0.85rem; color: #6b5a44; }
.pills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pill { font-family: Arial, sans-serif; font-size: 0.8rem; background: #f3e9d2; border-radius: 999px; padding: 0.15rem 0.6rem; }
.pill.premium { background: #3b2f5c; color: #fff; }
.card-body button { margin-top: auto; align-self: start; font-family: Arial, sans-serif; padding: 0.45rem 1rem; border: none; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
.reader { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; margin-top: 1rem; }
.reader img.hero { width: 100%; max-height: 420px; object-fit: cover; border-radius: 8px; }
.reader video { width: 100%; max-height: 520px; background: #000; border-radius: 8px; }
.warning { border: 3px solid #a00; background: #fff0f0; padding: 1rem; font-weight: bold; border-radius: 8px; }
.reader h2 { font-size: 1.8rem; margin-bottom: 0.2rem; }
.reader .meta { font-family: Arial, sans-serif; color: #6b5a44; }
.games { margin-top: 1rem; }
.game-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
.game-card iframe { width: 100%; max-width: 960px; height: 640px; border: 1px solid var(--line); border-radius: 8px; }
footer { text-align: center; padding: 1.5rem 1rem 2.5rem; font-family: Arial, sans-serif; }
.empty { grid-column: 1 / -1; text-align: center; padding: 2rem; }