/* PointyClicky's site, on the app's own grid: one --px is one UI pixel,
   which is the game's pixel. Type, covers, screenshots, borders and gaps are
   whole multiples of it. Colours are the app's palette (Design/Pixel.swift). */

@font-face { font-family: "Press Start 2P"; src: url("/fonts/PressStart2P-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Tiny5"; src: url("/fonts/Tiny5-Variable.ttf") format("truetype"); font-display: block; }

:root {
  --px: 2px;
  --ink: #16161B; --panel: #1B1836; --raised: #2A2650; --edge-light: #4A4486; --edge-dark: #07061A;
  --cream: #F3E9D2; --muted: #9A94BD; --dim: #5C5886;
  --amber: #FFC43D; --amber-dark: #B8731A; --cyan: #52D6E8; --cyan-dark: #1B7C8C;
  --green: #BFE052; --red: #EF5F5F; --magenta: #E46BC2;
  --column: calc(300 * var(--px));
}
@media (min-width: 760px) { :root { --px: 3px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); }
body {
  color: var(--cream); background: var(--ink);
  font-family: "Tiny5", monospace; font-size: calc(8 * var(--px)); line-height: calc(12 * var(--px));
  -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
}
img { image-rendering: pixelated; display: block; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: var(--px); text-underline-offset: calc(2 * var(--px)); }
p + p { margin-top: calc(6 * var(--px)); }
strong { color: var(--cream); font-weight: normal; }

.display, h1, h2, h3 { font-family: "Press Start 2P", monospace; font-weight: normal; font-size: calc(8 * var(--px)); line-height: calc(10 * var(--px)); text-transform: uppercase; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.amber { color: var(--amber); }
.green { color: var(--green); }

.column { width: min(var(--column), calc(100% - 16 * var(--px))); margin: 0 auto; }

/* Header and footer */
.top { display: flex; justify-content: center; padding: calc(8 * var(--px)) 0 0; }
.top nav { display: flex; gap: calc(10 * var(--px)); }
.top nav a { color: var(--muted); }
.top nav a[aria-current] { color: var(--amber); }

footer { margin-top: calc(24 * var(--px)); padding: calc(12 * var(--px)) 0 calc(16 * var(--px)); border-top: var(--px) solid var(--edge-light); color: var(--muted); }
footer nav { display: flex; flex-wrap: wrap; gap: calc(4 * var(--px)) calc(8 * var(--px)); margin-bottom: calc(6 * var(--px)); }
footer p { color: var(--dim); }

/* The pieces, as in the app */
.section { margin-top: calc(20 * var(--px)); }
.header { display: flex; align-items: flex-end; gap: calc(3 * var(--px)); margin-bottom: calc(6 * var(--px)); }
.header h2 { white-space: nowrap; }
.header::after { content: ""; flex: 1; height: var(--px); margin-bottom: var(--px);
  background-image: linear-gradient(to right, var(--dim) var(--px), transparent var(--px)); background-size: calc(2 * var(--px)) var(--px); }

.panel {
  background: var(--panel); padding: calc(5 * var(--px));
  box-shadow: inset var(--px) var(--px) 0 var(--edge-light), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--edge-dark),
              calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--edge-dark);
}
.panel + .panel { margin-top: calc(6 * var(--px)); }
.panel h3 { margin-bottom: calc(4 * var(--px)); }
.panel .lead { display: flex; align-items: center; gap: calc(3 * var(--px)); margin-bottom: calc(3 * var(--px)); }

.button {
  display: inline-flex; align-items: center; gap: calc(3 * var(--px));
  font-family: "Press Start 2P", monospace; text-transform: uppercase; color: var(--ink); background: var(--amber);
  padding: calc(4 * var(--px)) calc(8 * var(--px));
  box-shadow: inset 0 calc(-2 * var(--px)) 0 var(--amber-dark), calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--edge-dark);
  clip-path: polygon(var(--px) 0, calc(100% - var(--px)) 0, 100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, 0 calc(100% - var(--px)), 0 var(--px));
}
.button:hover { text-decoration: none; transform: translateY(var(--px)); }
.button.secondary { background: var(--raised); color: var(--cream); box-shadow: inset 0 calc(-2 * var(--px)) 0 var(--edge-dark); }

.badge {
  display: inline-block; font-family: "Tiny5", monospace; text-transform: uppercase; color: var(--ink); background: var(--cyan);
  padding: 0 calc(2 * var(--px)); line-height: calc(10 * var(--px));
  clip-path: polygon(var(--px) 0, calc(100% - var(--px)) 0, 100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, 0 calc(100% - var(--px)), 0 var(--px));
}
.badge.green { background: var(--green); }
.badge.amber { background: var(--amber); }
.badge.dim { background: var(--raised); color: var(--muted); }

.cursor { display: inline-block; width: calc(4 * var(--px)); height: calc(7 * var(--px)); background: var(--amber); vertical-align: calc(-1 * var(--px)); animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

/* Home */
.hero { text-align: center; padding: calc(10 * var(--px)) 0 calc(8 * var(--px)); }
.hero .logo { width: calc(121 * var(--px)); height: calc(83 * var(--px)); margin: 0 auto calc(10 * var(--px)); }
.hero h1 { color: var(--cream); max-width: calc(220 * var(--px)); margin: 0 auto calc(6 * var(--px)); }
.hero p { color: var(--muted); max-width: calc(220 * var(--px)); margin: 0 auto; }
.hero .soon { margin-top: calc(10 * var(--px)); display: inline-flex; align-items: center; gap: calc(3 * var(--px)); color: var(--amber); }

.shots { display: flex; justify-content: center; align-items: flex-start; gap: calc(8 * var(--px)); flex-wrap: wrap; margin-top: calc(14 * var(--px)); }
/* Screenshots are one image pixel per app pixel, drawn at a whole scale: 1x on phones, 2x on wider screens. */
:root { --shot: 1px; }
@media (min-width: 900px) { :root { --shot: 2px; } }
.shot { filter: drop-shadow(calc(3 * var(--shot)) calc(3 * var(--shot)) 0 var(--edge-dark)); }
.shot.portrait { width: calc(215 * var(--shot)); height: calc(451 * var(--shot)); }
.shot.landscape { width: min(calc(451 * var(--shot)), 100%); height: auto; aspect-ratio: 451 / 215; }
.caption { color: var(--dim); text-align: center; margin-top: calc(4 * var(--px)); }
figure { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 899px) { .shots figure + figure { display: none; } }
.wide { display: flex; justify-content: center; margin-top: calc(16 * var(--px)); }

.gestures { display: grid; grid-template-columns: max-content 1fr; gap: calc(2 * var(--px)) calc(6 * var(--px)); }
.gestures dt { color: var(--amber); }
.gestures dd { color: var(--muted); }

.wall { display: grid; grid-template-columns: repeat(5, calc(56 * var(--px) / 2)); gap: calc(3 * var(--px)); justify-content: start; }
.wall img { width: calc(28 * var(--px)); height: calc(39 * var(--px)); box-shadow: var(--px) var(--px) 0 var(--edge-dark); }
@media (min-width: 760px) { .wall { grid-template-columns: repeat(8, calc(28 * var(--px))); } }

/* Games */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(56 * var(--px)), 1fr)); gap: calc(8 * var(--px)) calc(5 * var(--px)); }
.game img { width: calc(56 * var(--px)); height: calc(78 * var(--px)); box-shadow: calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--edge-dark); margin-bottom: calc(3 * var(--px)); }
.game .title { line-height: calc(10 * var(--px)); }
.game .meta { color: var(--muted); line-height: calc(10 * var(--px)); }
.game .badge { margin-top: calc(2 * var(--px)); }
@media (max-width: 759px) { .games { grid-template-columns: repeat(3, 1fr); } }

.filters { display: flex; flex-wrap: wrap; gap: calc(3 * var(--px)); margin-bottom: calc(8 * var(--px)); }
.filters button { font: inherit; color: var(--muted); background: var(--raised); border: 0; padding: 0 calc(3 * var(--px)); line-height: calc(12 * var(--px)); cursor: pointer;
  clip-path: polygon(var(--px) 0, calc(100% - var(--px)) 0, 100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, 0 calc(100% - var(--px)), 0 var(--px)); }
.filters button[aria-pressed="true"] { background: var(--amber); color: var(--ink); }

/* Long reads: privacy, support, source */
.prose h2 { margin: calc(14 * var(--px)) 0 calc(5 * var(--px)); color: var(--cream); }
.prose ul { list-style: none; }
.prose li { padding-left: calc(8 * var(--px)); position: relative; }
.prose li + li { margin-top: calc(3 * var(--px)); }
.prose li::before { content: ""; position: absolute; left: var(--px); top: calc(5 * var(--px)); width: calc(2 * var(--px)); height: calc(2 * var(--px)); background: var(--amber); }
.prose p, .prose li { color: var(--muted); }
.prose p strong, .prose li strong { color: var(--cream); }
.page-title { margin: calc(12 * var(--px)) 0 calc(4 * var(--px)); }
.updated { color: var(--dim); margin-bottom: calc(8 * var(--px)); }

.q { margin-top: calc(10 * var(--px)); }
.q h3 { color: var(--amber); font-family: "Tiny5", monospace; text-transform: none; font-size: calc(8 * var(--px)); line-height: calc(12 * var(--px)); margin-bottom: calc(2 * var(--px)); }
.q p { color: var(--muted); }