/* Playground index.
 *
 * A shelf of things to play, grouped by kind. Built to grow: a card carries
 * its own accent colour and a scrap of artwork drawn from the thing itself,
 * so a page of ten projects reads as a set of distinct objects rather than a
 * grid of identical tiles.
 */

:root {
  --bg: #0b0d12;
  --lift: #141823;
  --fg: #f2f4f8;
  --dim: #6b7488;
  --faint: #4d5567;
  --line: #232936;

  /* One accent per project, assigned by card class. */
  --a: #ffcc33;
  --b: #7cf5c8;
  --c: #ff5e7a;
  --d: #8ab4ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
}

body {
  color: var(--fg);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: clamp(36px, 8vh, 96px) clamp(18px, 5vw, 56px) clamp(40px, 8vh, 90px);
}

#page {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
}

/* ---------- header ---------- */

.head { margin-bottom: clamp(38px, 7vh, 76px); }

.dots {
  display: flex;
  gap: 9px;
  margin-bottom: clamp(18px, 3vh, 30px);
}

.dot {
  width: clamp(11px, 1.4vw, 15px);
  height: clamp(11px, 1.4vw, 15px);
  border-radius: 50%;
  display: block;
}

.dot-a { background: var(--a); }
.dot-b { background: var(--b); }
.dot-c { background: var(--c); }

.wordmark {
  margin: 0;
  font-size: clamp(38px, 8.4vw, 86px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.sub {
  max-width: 46ch;
  margin: clamp(14px, 2.2vh, 22px) 0 0;
  font-size: clamp(14px, 1.7vw, 19px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--dim);
}

/* ---------- groups ---------- */

.group + .group { margin-top: clamp(36px, 6vh, 64px); }

.group-name {
  margin: 0 0 clamp(14px, 2.2vh, 22px);
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

/* ---------- cards ---------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--lift);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-3px);
  background: #181e2b;
}

.card:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
}

/* Each card shows a scrap of the thing itself rather than an icon. */
.card-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: clamp(28px, 4.5vh, 48px) 18px;
  background: #0e121b;
  border-bottom: 1px solid var(--line);
}

.art-rule {
  display: block;
  width: clamp(88px, 34%, 150px);
  height: 4px;
  border-radius: 999px;
  background: var(--fg);
  opacity: 0.85;
}

.art-word {
  font-size: clamp(19px, 3.4vw, 27px);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
}

.card-body {
  display: block;
  padding: clamp(17px, 2.2vw, 24px) clamp(18px, 2.3vw, 26px) clamp(19px, 2.4vw, 26px);
}

.card-name {
  display: block;
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 7px;
}

.card-desc {
  display: block;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--dim);
}

.card-meta {
  display: block;
  margin-top: clamp(11px, 1.6vh, 16px);
  font-size: clamp(11px, 1.15vw, 13px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* Accent per card: border on hover, and the artwork's highlight colour. */
.card-a:hover, .card-a:focus-visible { border-color: var(--a); }
.card-a .art-word { color: var(--a); }

.card-b:hover, .card-b:focus-visible { border-color: var(--b); }
.card-b .art-word { color: var(--b); }

.card-c:hover, .card-c:focus-visible { border-color: var(--c); }
.card-c .art-word { color: var(--c); }

.card-d:hover, .card-d:focus-visible { border-color: var(--d); }
.card-d .art-word { color: var(--d); }

/* ---------- foot ---------- */

.foot {
  margin: clamp(34px, 6vh, 64px) 0 0;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #363d4e;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-visible { transform: none; }
}

/* A spinning wheel drawn in CSS for the Spin-o-Rama card. */
.art-wheel {
  position: relative;
  width: clamp(54px, 13vw, 76px);
  height: clamp(54px, 13vw, 76px);
  border-radius: 50%;
  overflow: hidden;
  display: block;
  box-shadow: 0 0 0 3px #1c2130;
}

.wedge { position: absolute; inset: 0; }
.wedge.w1 { background: conic-gradient(var(--a) 0deg 90deg, transparent 90deg); }
.wedge.w2 { background: conic-gradient(transparent 90deg, var(--c) 90deg 180deg, transparent 180deg); }
.wedge.w3 { background: conic-gradient(transparent 180deg, var(--b) 180deg 270deg, transparent 270deg); }
.wedge.w4 { background: conic-gradient(transparent 270deg, var(--d) 270deg 360deg); }