:root { --bg: #14161C; --ink: #F3EEE3; --soft: #B5B0A3; --line: #2C3038; --accent: #E0A33A; color-scheme: dark light; }
@media (prefers-color-scheme: light) { :root { --bg: #FBF8F1; --ink: #1E1C18; --soft: #5F594D; --line: #E4DCCB; --accent: #8A5E12; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: var(--bg); color: var(--ink); font: 17px/1.6 ui-serif, Georgia, "Times New Roman", serif; -webkit-text-size-adjust: 100%; }
main { width: 100%; max-width: 620px; padding: 56px 16px; animation: rise .7s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main { animation: none; } }
.mark { font-size: 15px; letter-spacing: .02em; color: var(--soft); margin: 0 0 32px; }
h1 { font-size: clamp(32px, 6vw, 44px); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 16px; font-weight: 500; }
.lead { color: var(--soft); margin: 0 0 40px; }
.game { display: block; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.game:last-of-type { border-bottom: 1px solid var(--line); }
.game strong { display: block; font-size: 20px; font-weight: 500; color: var(--accent); }
.game span { color: var(--soft); font-size: 16px; }
.game:hover strong { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
footer { margin-top: 32px; font-size: 15px; color: var(--soft); }
footer a { color: inherit; text-underline-offset: 3px; }