:root {
    --board-size: 1000px;
    --cell: 10px;
    --bg: #0a0a0a;
    --fg: #d6ffd6;
    --grid: #153e15;
    --link: #7cff7c;
    --logo-bg-dark: #000; /* default bg for transparent logos on dark */
    --logo-bg-light: #fff; /* default bg for transparent logos on light */
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

/* Header / Footer */
header {
    border-bottom: 2px solid var(--grid);
    padding: 10px 12px;
    display: flex;
    gap: 16px;
    align-items: baseline;
    flex-wrap: wrap
}

header .brand {
    font-weight: 800;
    letter-spacing: .5px
}

header nav a {
    color: var(--link);
    text-decoration: none;
    margin-right: 12px
}

header nav a:hover {
    color: var(--fg);
    text-decoration: underline
}

header .counts {
    margin-left: 12px;
    color: var(--link);
    opacity: .85;
    font-size: 12px;
    font-variant-numeric: tabular-nums
}

footer {
    text-align: center;
    opacity: .7;
    padding: 14px 0 28px;
    font-size: 12px
}

footer nav a {
    color: var(--link);
    text-decoration: none;
    margin: 0 8px
}

footer nav a:hover {
    color: var(--fg);
    text-decoration: underline
}

/* Layout */
.wrap {
    max-width: 1100px;
    margin: 18px auto;
    padding: 0 12px
}

.note {
    opacity: .8;
    font-size: 12px;
    margin-bottom: 10px
}

/* Board & logos */
.board {
    position: relative;
    width: var(--board-size);
    height: var(--board-size);
    margin: 0 auto;
    background-color: #000;
    background-image: repeating-linear-gradient(0deg, var(--grid) 0, var(--grid) 1px, transparent 1px, transparent var(--cell)),
    repeating-linear-gradient(90deg, var(--grid) 0, var(--grid) 1px, transparent 1px, transparent var(--cell));
    border: 3px solid var(--grid);
    box-shadow: 0 0 28px rgba(0, 255, 80, .15) inset, 0 0 18px rgba(0, 255, 80, .05);
    image-rendering: pixelated;
}

.logo {
    position: absolute;
    display: block;
    border: 1px solid #1f5d1f;
    background: transparent;
    overflow: hidden;
}

.logo.theme-dark {
    background: var(--logo-bg-dark)
}

.logo.theme-light {
    background: var(--logo-bg-light)
}

.logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent;
    image-rendering: -webkit-optimize-contrast
}

.logo:focus-visible {
    outline: 2px dashed var(--link);
    outline-offset: 0
}

.logo:hover {
    border-color: var(--link)
}

.board-footer {
    max-width: var(--board-size);
    margin: 16px auto 24px;
    text-align: center;
}

.board-description {
    font-size: 1rem;
    margin: 0;
    text-align: center;
}

.legal-footer {
    font-size: 10px;
    margin-top: 1rem;
    padding-bottom: 2rem;
    text-align: center;
}