:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #21140f; color: #f5ead5; font: 16px/1.5 Arial, sans-serif; }
body.playing { overflow: hidden; }
main { width: min(700px, 100%); margin: 0 auto; padding: 34px 24px 28px; text-align: center; }
h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.logo { display: block; width: min(620px, 100%); height: auto; margin: 0 auto; }
.note { max-width: 590px; margin: 20px auto 22px; color: #f7eddf; font-size: 17px; }
.actions { display: flex; justify-content: center; gap: 12px; }
.actions a { display: inline-flex; min-width: 132px; min-height: 48px; align-items: center; justify-content: center; gap: 10px; border-radius: 9px; font-size: 16px; font-weight: 700; text-decoration: none; transition: transform 120ms ease, background 120ms ease; }
.actions a:hover { transform: translateY(-1px); }
.actions a:focus-visible { outline: 3px solid #f0c75a; outline-offset: 3px; }
.play-button { border: 1px solid #a6d542; background: linear-gradient(#8acb2e, #4f8c1c); color: #14220b; box-shadow: inset 0 1px #d6f28a, 0 3px 0 #263e13; }
.play-button span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #1b2e0e; color: #d9f58b; font-size: 11px; padding-left: 2px; }
.play-button:hover { background: linear-gradient(#98db36, #5a9b22); }
.play-button[aria-disabled=true] { border-color: #777064; background: #665f57; color: #d8d1c6; box-shadow: none; }
.donate-button { border: 1px solid #ca8d58; background: #39231a; color: #ffd6a9; box-shadow: inset 0 1px #6e4430, 0 3px 0 #130c09; }
.donate-button:hover { background: #4a2e21; }
.donate-button span { color: #ef9d73; }
.requirements { margin: 15px 0 0; color: #b9a99b; font-size: 12px; }
.disclaimer { margin: 8px 0 0; color: #8f8176; font-size: 11px; }
.game-shell { position: fixed; inset: 0; z-index: 10; background: #050504; }
.game-shell[hidden] { display: none; }
.game-shell iframe { width: 100%; height: 100%; border: 0; background: #000; }
.game-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; padding: 24px; background: #e7dfc8; color: #25291e; text-align: center; }
.loading-mark { width: 44px; height: 44px; margin-bottom: 22px; border: 1px solid #293525; transform: rotate(45deg); }
.loading-mark span { display: block; width: 18px; height: 18px; margin: 12px; background: #60713a; }
.loading-title { margin: 0; font: 700 18px/1.2 Georgia, serif; letter-spacing: .12em; text-transform: uppercase; }
.loading-message { min-width: 240px; margin: 10px 0 15px; color: #63634f; font-size: 12px; letter-spacing: .04em; }
.loading-track { width: 240px; height: 2px; overflow: hidden; background: #c4bea8; }
.loading-track span { display: block; width: 12%; height: 100%; background: #60713a; transition: width 180ms linear; }
body.game-ready .game-loading { display: none; }
body.game-ready .game-shell iframe { display: block; }
@media (max-width: 540px) { main { padding: 26px 18px 22px; } .note { font-size: 15px; } .actions { flex-direction: column; align-items: stretch; } .actions a { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .actions a, .loading-track span { transition: none; } }