/* byo venue — the console's dusk, in a webpage */
:root { color-scheme: dark; }
body { margin: 0; background: #16121f; color: #c6d2ee; font: 15px/1.5 ui-monospace, monospace; }
a { color: #e8b878; text-decoration: none; }
a:hover { text-decoration: underline; }
header { display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 22px; border-bottom: 1px solid #2b2537; }
.brand { font-weight: bold; font-size: 18px; color: #f8ecd4; }
nav { display: flex; gap: 14px; align-items: baseline; }
nav form { display: inline; }
nav button { background: none; border: none; color: #e8b878; font: inherit; cursor: pointer; padding: 0; }
main { max-width: 880px; margin: 0 auto; padding: 24px 22px 64px; }
.flash { max-width: 880px; margin: 12px auto 0; padding: 8px 22px; }
.notice { color: #8fd08a; } .alert { color: #ef5d57; }
h1 { color: #f8ecd4; font-size: 22px; } h2 { color: #f8ecd4; font-size: 17px; }
.card { border: 1px solid #2b2537; border-radius: 6px; padding: 16px 18px; margin: 14px 0;
  background: #1a1626; }
.card h2 { margin: 0 0 4px; }
.muted { color: #6e6470; }
.status { padding: 1px 8px; border-radius: 10px; font-size: 12px; }
.status.verified { background: #2b3a26; color: #8fd08a; }
.status.failed { background: #3a2626; color: #ef5d57; }
.status.submitted, .status.verifying { background: #34304a; color: #8fa3dd; }
.actions { display: flex; gap: 14px; margin-top: 8px; }
.play { background: #e8b878; color: #16121f; padding: 4px 14px; border-radius: 4px; font-weight: bold; }
.play:hover { background: #f0d090; text-decoration: none; }
input[type=text], input[type=email], input[type=password], textarea, input[type=file] {
  width: 100%; box-sizing: border-box; background: #100d18; color: #c6d2ee;
  border: 1px solid #2b2537; border-radius: 4px; padding: 8px 10px; font: inherit; margin: 4px 0 14px; }
label { color: #94897f; }
input[type=submit], button[type=submit] { background: #e8b878; color: #16121f; border: none;
  padding: 8px 18px; border-radius: 4px; font: inherit; font-weight: bold; cursor: pointer; }
pre.log { background: #100d18; border: 1px solid #2b2537; border-radius: 4px;
  padding: 12px; overflow-x: auto; font-size: 12px; color: #94897f; }
/* the arcade grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.gamecard .preview { display: block; aspect-ratio: 16 / 9; border-radius: 8px;
  border: 1px solid #2b2537; background-size: 100% auto; background-position: 0 0;
  background-repeat: no-repeat; position: relative; overflow: hidden;
  image-rendering: pixelated; }
.gamecard .preview:hover { border-color: #e8b878; text-decoration: none; }
.gc-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px;
  color: #f8ecd4; font-weight: bold; font-size: 16px; text-shadow: 0 1px 3px #000;
  background: linear-gradient(transparent, rgba(10, 8, 16, 0.85)); }
.gc-play { position: absolute; top: 8px; right: 10px; color: #f8ecd4;
  text-shadow: 0 1px 3px #000; opacity: 0; transition: opacity .15s; }
.preview:hover .gc-play { opacity: 1; }
.gc-meta { margin: 6px 2px; font-size: 13px; }
/* docs */
.docs { display: flex; gap: 28px; align-items: flex-start; }
.docs-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 6px;
  min-width: 130px; border-right: 1px solid #2b2537; padding-right: 16px; }
.docs-nav a.current { color: #f8ecd4; font-weight: bold; }
.docs-body { max-width: 660px; min-width: 0; }
.docs-body h1 { font-size: 24px; } .docs-body h2 { margin-top: 28px; }
.docs-body pre, .docs-body code { background: #100d18; border-radius: 4px; }
.docs-body code { padding: 1px 5px; color: #e8b878; font-size: 13px; }
.docs-body pre { border: 1px solid #2b2537; padding: 12px 14px; overflow-x: auto; }
.docs-body pre code { background: none; border: none; padding: 0; color: #c6d2ee; }
.docs-body table { border-collapse: collapse; margin: 12px 0; }
.docs-body th, .docs-body td { border: 1px solid #2b2537; padding: 6px 12px; text-align: left; }
.docs-body th { color: #f8ecd4; }
.docs-body a { text-decoration: underline; }