@font-face {
  font-family: Jersey;
  src: url('/portal/assets/jersey10.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  color: #294333;
  background: #f5f4eb;
}

* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.6; }
[hidden] { display: none !important; }
.event-banner { padding: 9px 20px; border-bottom: 1px solid #d3bd88; background: #ead8a9; color: #473c25; text-align: center; font-size: 13px; }
.event-banner p { max-width: 760px; margin: auto; }
.page { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
main { padding-top: 36px; text-align: center; }
h1, p { margin: 0; }
.logo { display: block; width: 244px; max-width: 75%; height: auto; margin: auto; image-rendering: pixelated; }
.intro { margin: 14px 0 24px; }
.game-preview { display: block; width: 100%; height: auto; border: 2px solid #485b43; border-radius: 6px; image-rendering: pixelated; }
.play { margin-top: 24px; }
.play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 186px;
  padding: 10px 32px;
  border: 2px solid #345b32;
  border-radius: 5px;
  background: #85b75c;
  color: #183c25;
  font: 32px/1 Jersey, 'Trebuchet MS', sans-serif;
  text-decoration: none;
  box-shadow: 0 3px 0 #345b32;
}
.play-button:hover { background: #96c56d; }
.play-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #345b32; }
.play-note { margin-top: 12px; font-size: 13px; color: #596254; }
.online-status { margin-top: 4px; color: #596254; font-size: 13px; }
.online-status::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #578542; vertical-align: 2px; }
.online-status.is-offline::before { background: #8a8170; }
.site-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 16px 0 24px; border-top: 1px solid #d8dacd; font-size: 13px; color: #596254; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
a { color: inherit; }
.footer-links a { text-underline-offset: 3px; }
.help { flex: 1; }
.help summary { width: fit-content; min-height: 32px; cursor: pointer; }
.help summary:hover, .footer-links a:hover { color: #244b2c; }
.help[open] { flex-basis: 100%; }
.help-content { max-width: 560px; padding: 2px 0 8px; }
.help-content h2 { margin: 14px 0 4px; font-size: 14px; font-weight: bold; color: #294333; }
:focus-visible { outline: 3px solid #a15b24; outline-offset: 5px; }

@media (max-width: 540px) {
  main { padding-top: 28px; }
  .logo { width: 218px; }
  .intro { max-width: 270px; margin: 14px auto 22px; }
  .play { margin-top: 22px; }
  .site-footer { margin-top: 24px; }
}