* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #302016; color: #f7ebd5; }
html, body { margin: 0; min-width: 280px; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(#130c0733, #130c0733), url('/assets/mud-background.jpg') center / cover no-repeat; }
.landing { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 24px; }
.content { width: 100%; text-align: center; }
h1 { margin: 0 0 36px; line-height: 0; }
.game-logo { display: block; width: min(100%, 780px); height: auto; margin-inline: auto; }
.downloads { display: flex; align-items: center; justify-content: center; gap: 16px; }
.download-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 62px; min-width: 210px; padding: 0 25px; border: 1px solid #f6e8d257; border-radius: 5px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.2; box-shadow: 0 6px 20px #160b0733; transition: background-color .18s, border-color .18s, transform .18s; }
.download-button svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }
.download-button .download-arrow { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-left: 10px; opacity: .7; }
.windows { color: #38271b; background: #f0e3cb; border-color: #f0e3cb; }
.apple { background: #291b13bd; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.windows:hover { background: #fff2db; border-color: #fff2db; transform: translateY(-2px); }
.apple:hover { background: #483024e6; border-color: #f6e8d299; transform: translateY(-2px); }
.download-button:focus-visible { outline: 3px solid #fff4df; outline-offset: 5px; }
.download-button:active { transform: translateY(1px); }
::selection { background: #f0e3cb; color: #38271b; }
@media (max-width: 560px) {
  .landing { padding: 40px 20px; }
  h1 { margin-bottom: 30px; }
  .downloads { flex-direction: column; gap: 12px; }
  .download-button { width: min(100%, 264px); min-height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .download-button { transition: none; } }