/*
 * Game-tile covers — flat-color geometric art.
 * No gradients, no shadows. Each cover is a simple distinctive shape
 * on a tinted surface so a fly-by visitor recognizes the game at a glance.
 */

.tile-cover {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.tile-cover:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ─── Drift — a small disk circling a ring ───────────────────────────────── */
.cover-drift { background: #f1e9dd; }
.cover-drift::before {
  content: "";
  position: absolute;
  width: 38%; aspect-ratio: 1;
  border: 6px solid #b35900;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.cover-drift::after {
  content: "";
  position: absolute;
  width: 9%; aspect-ratio: 1;
  background: #1a4480;
  border-radius: 50%;
  top: 26%; left: 28%;
}

/* ─── Pollen — five color stops in a row ────────────────────────────────── */
.cover-pollen { background: #fbf3e6; }
.cover-pollen::before {
  content: "";
  position: absolute;
  top: 50%; left: 14%;
  width: 14%; aspect-ratio: 1;
  background: #d83a52;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow:
    25% 0 0 0 #e6a832,
    50% 0 0 0 #5f8a3e,
    75% 0 0 0 #1a4480,
    100% 0 0 0 #6d3a8e;
}

/* ─── Night Line — concentric radio waves (single warm dot) ─────────────── */
.cover-night-line { background: #1a1a24; }
.cover-night-line::before {
  content: "";
  position: absolute;
  width: 14%; aspect-ratio: 1;
  background: #e08a2a;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 18px rgba(224, 138, 42, 0.18),
    0 0 0 36px rgba(224, 138, 42, 0.10),
    0 0 0 56px rgba(224, 138, 42, 0.06);
}

/* ─── The Correspondence — a stack of letters ───────────────────────────── */
.cover-correspondence { background: #f4ede0; }
.cover-correspondence::before {
  /* back letter (slight rotation) */
  content: "";
  position: absolute;
  width: 50%; aspect-ratio: 5 / 3;
  top: 52%; left: 52%;
  transform: translate(-50%, -50%) rotate(-4deg);
  background: #ffffff;
  border: 1.5px solid #1a4480;
}
.cover-correspondence::after {
  /* front letter */
  content: "";
  position: absolute;
  width: 50%; aspect-ratio: 5 / 3;
  top: 50%; left: 48%;
  transform: translate(-50%, -50%) rotate(3deg);
  background: #ffffff;
  border: 1.5px solid #1a4480;
}

/* ─── Tutor — chalkboard, three chalk lines, one with a red X ──────────── */
.cover-tutor { background: #2a3a30; }
.cover-tutor::before {
  /* three white chalk lines */
  content: "";
  position: absolute;
  top: 30%; left: 18%; right: 18%;
  height: 5%;
  background: #f0ede4;
  box-shadow:
    0 18px 0 0 #f0ede4,
    0 36px 0 0 #f0ede4;
}
.cover-tutor::after {
  /* a red X over the middle line: built from a single rotated rect */
  content: "×";
  position: absolute;
  top: 48%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono, monospace);
  font-size: 56px;
  font-weight: 700;
  color: #d83a52;
  line-height: 1;
}

/* ─── Kern By Eye — two letterforms close together ──────────────────────── */
.cover-kern-by-eye { background: #fafaf7; }
.cover-kern-by-eye::before {
  content: "Aa";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-style: italic;
  font-size: 96px;
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: -0.18em;
  line-height: 1;
}

/* ─── Beam — line crossing a gold band ──────────────────────────────────── */
.cover-beam { background: #1a1a24; }
.cover-beam::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 18%;
  transform: translateX(-50%);
  background: #e0b03a;
}
.cover-beam::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 5%;
  transform: translateY(-50%);
  background: #f0ede4;
}

/* ─── Ornament Crop — a single ornament glyph ───────────────────────────── */
.cover-ornament { background: #f4ede0; }
.cover-ornament::before {
  content: "❦";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: 78px;
  color: #6d3a8e;
  line-height: 1;
}

/* ─── Far Green — a green hole on a dark fairway of space ───────────────── */
.cover-far-green { background: #101726; }
.cover-far-green::before {
  content: "";
  position: absolute;
  width: 56%; aspect-ratio: 2.6 / 1;
  border: 2px dashed #46557a;
  border-radius: 50%;
  top: 52%; left: 46%;
  transform: translate(-50%, -50%) rotate(-14deg);
}
.cover-far-green::after {
  content: "";
  position: absolute;
  width: 13%; aspect-ratio: 1;
  background: #57c98a;
  border-radius: 50%;
  top: 36%; left: 67%;
}

@media (prefers-reduced-motion: reduce) {
  .tile-cover { transition: none; }
  .tile-cover:hover { transform: none; }
}