/* basketballer.pro: everything in pixels. Jersey 10 has a 75-unit pixel in a 1400-unit em, so font sizes that
   are multiples of 18.6667px keep every font pixel on whole screen pixels (37.333px = 2 px, 56px = 3 px). */
@font-face { font-family: 'Jersey10'; src: url(/fonts/Jersey10-Regular.ttf) format('truetype'); font-display: swap; }
:root { --noc: #0f0d18; --granat: #1d2440; --krem: #f3efe6; --pom: #e8742a; --zloto: #f7c948; --czer: #e8364f; --px2: 37.3333px; --px3: 56px; }
* { box-sizing: border-box; }
html { background: var(--noc); }
body {
  margin: 0; min-height: 100vh; color: var(--krem); font: 400 var(--px2)/1.05 'Jersey10', ui-monospace, monospace;
  -webkit-font-smoothing: none; font-smooth: never;
  background-color: var(--noc);
  background-image: radial-gradient(#6b6490 1.5px, transparent 1.6px), radial-gradient(#3a3450 1.5px, transparent 1.6px);
  background-size: 71px 63px, 43px 51px; background-position: 7px 11px, 19px 3px;
  display: flex; flex-direction: column;
}
a { color: var(--zloto); }
a:hover { color: var(--pom); }
img.pix { image-rendering: pixelated; }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero: the logo over two Amiga raster bars */
.hero { position: relative; padding: 48px 0 24px; text-align: center; }
.hero::before, .hero::after { content: ''; position: absolute; left: 0; right: 0; height: 42px; z-index: 0; }
.hero::before { top: 38%; background: linear-gradient(180deg, #2a0f3a 0 6px, #5a1a6a 6px 12px, #9a2e8a 12px 18px, #e25aa8 18px 24px, #9a2e8a 24px 30px, #5a1a6a 30px 36px, #2a0f3a 36px 42px); }
.hero::after { top: calc(38% + 88px); background: linear-gradient(180deg, #0f1e3a 0 6px, #1a3a7a 6px 12px, #2f6ad0 12px 18px, #7fb0ff 18px 24px, #2f6ad0 24px 30px, #1a3a7a 30px 36px, #0f1e3a 36px 42px); }
.hero img { position: relative; z-index: 1; width: min(512px, 90vw); height: auto; }
.tagline { color: var(--zloto); margin: 18px 0 0; }

main { flex: 1; }
.card { background: var(--granat); border: 6px solid var(--krem); box-shadow: 6px 6px 0 #000; padding: 24px; margin: 24px 0; }
.card h2 { font-size: var(--px3); font-weight: 400; margin: 0 0 12px; line-height: 1; }
.card p { margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }
.pun { color: var(--pom); }
.teaser { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.teaser img { width: min(320px, 100%); height: auto; border: 6px solid var(--krem); box-shadow: 6px 6px 0 #000; }
.teaser div { flex: 1 1 260px; }

.links { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; padding: 0; list-style: none; }
.links a {
  display: inline-block; min-height: 48px; padding: 6px 18px; background: var(--pom); color: var(--noc); text-decoration: none;
  border: 3px solid var(--krem); box-shadow: 4px 4px 0 #000;
}
.links a:hover, .links a:focus-visible { background: var(--zloto); color: var(--noc); }
.links a:active { transform: translate(4px, 4px); box-shadow: none; }

/* LED board with the made-up sponsors, like the one behind the basket in the game */
.led { border-top: 3px solid var(--granat); border-bottom: 3px solid var(--granat); background: #09080d; overflow: hidden; margin-top: 24px; }
.led div { display: inline-block; white-space: nowrap; padding: 8px 0; color: var(--pom); animation: led 60s linear infinite; }
.led span { padding: 0 28px; }
@keyframes led { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .led div { animation: none; } }

footer { padding: 24px 0 32px; color: #aaa4b9; }
footer a { color: #aaa4b9; }

/* cookie banner */
#cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 10; max-width: 736px; margin: 0 auto; background: var(--granat); border: 6px solid var(--krem); box-shadow: 6px 6px 0 #000; padding: 16px 20px; }
#cookies p { margin: 0 0 12px; }
#cookies .buttons { display: flex; gap: 12px; flex-wrap: wrap; }
#cookies button {
  font: inherit; min-height: 48px; padding: 4px 18px; cursor: pointer; border: 3px solid var(--krem); box-shadow: 4px 4px 0 #000;
  -webkit-font-smoothing: none;
}
#cookies [data-accept] { background: var(--pom); color: var(--noc); }
#cookies [data-reject] { background: var(--noc); color: var(--krem); }

.doc h1 { font-size: var(--px3); font-weight: 400; margin: 32px 0 16px; line-height: 1; }
.doc h2 { font-size: var(--px2); font-weight: 400; color: var(--zloto); margin: 24px 0 8px; }
.doc p, .doc li { margin: 0 0 10px; }