/* GENERATED by scripts/build-site.mjs from css/style.css. Do not edit by hand.
   Styles for the pages of the site outside the game (/home, /news, /games ...). Tokens only: css/tokens.css. */

html { background: var(--wood-dark); }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; color: var(--w98-text); font: var(--text-ui)/var(--leading-ui) var(--font-ui); }

/* the way back into the room */
.site-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); padding: var(--space-2) var(--gutter); background: var(--crt-black);
  color: var(--dos-grey); font: var(--text-crt-md)/1.1 var(--font-crt); }
.site-bar a { color: var(--phosphor-link); }
.site-bar a:hover { color: var(--amber); }
.site-bar a:focus-visible { outline: 1px dotted var(--phosphor-link); outline-offset: 2px; }
.site-bar span { font-size: var(--text-crt); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main.web { flex: 1; }

.w98-btn {
  font: inherit; background: var(--w98-face); color: var(--w98-text); border: 0; padding: 5px 16px; min-width: 88px; cursor: pointer;
  box-shadow: var(--bevel-raised);
}
.w98-btn:active { box-shadow: var(--bevel-pressed); }
.w98-btn:focus-visible { outline: 1px dotted var(--w98-text); outline-offset: -5px; }
.w98-btn.default { outline: 1px solid var(--w98-text); }
kbd { display: inline-block; font: var(--text-ui-sm)/1 var(--font-ui); background: var(--w98-key); padding: 2px 5px; margin-right: 2px;
  box-shadow: var(--bevel-key); color: var(--w98-text); }

/* ---- The site inside the browser: a 1998 homepage, beige on wood panelling ---- */
.web { box-sizing: border-box; min-height: 100%; padding: var(--space-3); background: repeating-linear-gradient(90deg, var(--wood) 0 22px, var(--wood-dark) 22px 24px);
  color: var(--w98-text); font: var(--text-ui)/var(--leading-ui) var(--font-ui); }
.web a { color: var(--w98-title); text-decoration: underline; cursor: pointer; }
.web a.visited { color: var(--web-visited); }
.web a:hover, .web a:active { color: var(--volt-can); }
.web a:focus-visible { outline: 1px dotted var(--w98-text); outline-offset: 1px; }
.web h2 { margin: 0 0 var(--space-2); color: var(--w98-title); font: var(--text-crt-xl)/1 var(--font-crt); }
.web p { margin: 0 0 var(--space-3); }
.web hr { margin: var(--space-3) 0; border: 0; border-top: 1px solid var(--w98-shadow); border-bottom: 1px solid var(--w98-light); }
.web kbd { margin-right: var(--space-0); }
.web[data-kind="error"] { padding: var(--space-4); background: var(--w98-light); }
.w-page { width: 100%; max-width: calc(var(--web-width) + 144px); margin: 0 auto; border-collapse: separate; border-spacing: 0; background: var(--beige-light); box-shadow: var(--bevel-raised); }
.w-banner { padding: var(--space-3) var(--space-4); background: var(--crt-black); box-shadow: var(--bevel-sunken); }
.w-logo { color: var(--amber); font: var(--text-crt-xl)/1 var(--font-crt); }
.w-prompt { color: var(--phosphor); font: var(--text-crt-md)/1.1 var(--font-crt); }
.w-cursor, .w-tag.new { animation: w-blink 1.2s steps(1) infinite; }
.w-news tr:nth-child(n+4) .w-tag.new { animation: none; } /* only the latest few flash */
.w-marquee { overflow: hidden; margin-top: var(--space-2); color: var(--dos-grey); font: var(--text-crt)/1 var(--font-crt); white-space: nowrap; }
.w-marquee span { display: inline-block; padding-left: 100%; animation: w-scroll 20s linear infinite; }
@keyframes w-blink { 50% { visibility: hidden; } }
@keyframes w-scroll { to { transform: translateX(-100%); } }
.w-side { width: 140px; padding: var(--space-2); vertical-align: top; background: var(--w98-face); }
.web a.w-nav-btn { display: block; margin-bottom: var(--space-1h); padding: var(--space-1) var(--space-2); background: var(--w98-face); color: var(--w98-text); text-decoration: none; box-shadow: var(--bevel-raised); }
.web a.w-nav-btn:hover { color: var(--w98-title); }
.web a.w-nav-btn:active, .web a.w-nav-btn.here { background: var(--w98-key); font-weight: bold; box-shadow: var(--bevel-pressed); }
.w-visitors { margin: var(--space-4) 0 var(--space-3); font-size: var(--text-ui-xs); font-weight: bold; letter-spacing: .04em; text-align: center; }
.w-visitors span { display: block; margin-bottom: var(--space-1); }
.w-counter { display: inline-flex; padding: var(--space-0); background: var(--crt-black); box-shadow: var(--bevel-sunken); }
.w-counter i { padding: 0 1px; color: var(--phosphor); font: normal var(--text-crt)/1 var(--font-crt); }
.w-badges { display: grid; justify-items: center; gap: var(--space-1); }
.w-88 { display: grid; place-items: center; width: 88px; height: 31px; box-sizing: border-box; background: var(--crt-black); color: var(--phosphor); font: var(--text-crt-sm)/.8 var(--font-crt); text-align: center; box-shadow: var(--bevel-raised); }
.w-main { padding: var(--space-3) var(--space-4); vertical-align: top; background: var(--beige-light); }
.w-foot { padding: var(--space-2) var(--space-3); background: var(--w98-face); font-size: var(--text-ui-xs); text-align: center; }
.w-box { margin: 0 0 var(--space-4); padding: var(--space-0); background: var(--w98-face); box-shadow: var(--bevel-raised); }
.w-box h3 { margin: 0; padding: var(--space-1) var(--space-2); background: var(--w98-title); color: var(--w98-light); font: var(--text-crt-md)/1 var(--font-crt); }
.w-box-body { padding: var(--space-2) var(--space-3); background: var(--beige-light); box-shadow: var(--bevel-sunken); }
.w-box-body > :last-child { margin-bottom: 0; }
.w-tbl { width: 100%; border-collapse: collapse; }
.w-tbl td, .w-tbl th { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--w98-shadow); text-align: left; vertical-align: top; }
.w-tbl tr:last-child td { border-bottom: 0; }
.w-tbl th { background: var(--w98-face); font-weight: bold; box-shadow: var(--bevel-small); }
.w-games td:first-child, .w-date { white-space: nowrap; }
.w-date { width: 1%; color: var(--w98-title); font: var(--text-crt)/1.1 var(--font-crt); }
.w-kind { width: 1%; }
.w-tag { display: inline-block; padding: 0 var(--space-1); color: var(--w98-light); font: var(--text-crt-sm)/1.2 var(--font-crt); letter-spacing: .04em; }
.w-tag.new { background: var(--volt); }
.w-tag.fix { background: var(--zap-dark); }
.w-more { margin: var(--space-2) 0 0; font-size: var(--text-ui-sm); }
.w-list, .w-steps { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
.w-list li, .w-steps li { margin-bottom: var(--space-1h); }
.w-construction { margin-bottom: var(--space-3); padding: var(--space-2); border: solid; border-width: var(--space-2) 0; border-image: repeating-linear-gradient(45deg, var(--volt-yellow) 0 8px, var(--w98-dark) 8px 16px) 8;
  background: var(--volt-yellow); color: var(--w98-text); font: var(--text-crt-lg)/1 var(--font-crt); letter-spacing: .04em; text-align: center; }
.w-form { margin: 0 0 var(--space-3); padding: var(--space-2); background: var(--w98-face); box-shadow: var(--bevel-raised); }
.w-form table { width: 100%; }
.w-form td { padding: var(--space-0) var(--space-2) var(--space-0) 0; }
.w-form td:first-child { width: 1%; white-space: nowrap; }
.w-form input { box-sizing: border-box; width: 100%; padding: var(--space-1); border: 0; background: var(--w98-light); color: var(--w98-text); font: var(--text-ui)/1.2 var(--font-ui); box-shadow: var(--bevel-sunken); }
.w-form .w98-btn { margin-top: var(--space-1); }
.w-error h2 { color: var(--w98-text); }
.w-err-code { margin: var(--space-4) 0 0; color: var(--w98-title-off); font-size: var(--text-ui-sm); }
@media (prefers-reduced-motion: reduce) {
  .w-cursor, .w-tag.new, .w-marquee span { animation: none; }
  .w-marquee { white-space: normal; }
  .w-marquee span { padding-left: 0; }
}

/* outside the browser, visited links go purple like they did, and a link to a page that is not built yet is only text */
.web a:visited:not(.w-nav-btn) { color: var(--web-visited); }
.web a:hover:not(.w-nav-btn), .web a:active:not(.w-nav-btn) { color: var(--volt-can); }
.w-dead { color: var(--w98-title-off); }
.w-form .w98-btn { cursor: pointer; }

/* a phone is not 800x600: stack the button column above the page */
@media (max-width: 640px) {
  .web { padding: var(--space-1); }
  .w-page, .w-page > tbody, .w-page > tbody > tr, .w-page > tbody > tr > td { display: block; width: auto; }
  .w-page > tbody > tr > td.w-side { display: flex; flex-wrap: wrap; gap: var(--space-1h); }
  .web a.w-nav-btn { margin: 0; }
  .w-visitors, .w-badges { flex-basis: 100%; }
  .w-badges { grid-auto-flow: column; justify-content: center; }
  .w-main { padding: var(--space-3); }
  .w-banner { overflow: hidden; }
  .w-tbl.w-games { display: block; overflow-x: auto; }
}