html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0a0a0c;
  color: #d8d8d8;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #1b1b22 0%, #050507 70%);
}

/* The spiral container is placed at the viewport center; its (0,0) is the
   spiral's convergence point. All cards are positioned in pixels relative
   to that point. The zoom is applied per frame by setting each card's real
   width/height/left/top (so images re-rasterize from the source PNG at the
   new size instead of GPU-stretching). No transform on this container. */
.spiral {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

/* Each card sits at a fixed (left, top, width, height) relative to .spiral.
 * The rounded corners (border-radius % of the smaller side) hide the
 * Scryfall JPG's white-around-rounded-corner artifact that would otherwise
 * appear as small triangles in the top corners of each square.
 *
 * The double-stop box-shadow paints, from outermost in:
 *   1) a light hairline — separates this card from any neighbor whose
 *      border is also black
 *   2) a sharp black ring — gives every card a clean black outline so
 *      white-bordered or light-bordered cards still read as bounded.
 * Together they make adjacent cards always distinguishable regardless of
 * border color. */
.card {
  position: absolute;
  overflow: hidden;
  background: #000;
  border-radius: 4.6%;
  box-shadow:
    inset 0 0 0 1px rgba(245, 235, 215, 0.55),
    inset 0 0 0 2.5px rgba(0, 0, 0, 0.95);
}

.card img {
  width: 100%;
  height: 100%;
  /* Shift the crop window down a hair so the rounded-corner whitespace at
     the very top of the source sits above the visible area, leaving the
     title bar and art intact within the square. */
  object-fit: cover;
  object-position: 50% 8%;
  display: block;
  pointer-events: none;
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
}

/* Spiral arc overlay — the iconic Fibonacci curve, a quarter-circle
   inscribed in each square. SVG fills the viewport so its path can't get
   clipped (an SVG of width:0 height:0 is often clipped even with
   overflow:visible, which is why the previous overlay looked invisible).
   Stroke + filter are driven by CSS custom properties so the HUD sliders
   can change them live without rebuilding the path. */
.curve {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
  z-index: 5;
}
.curve path {
  fill: none;
  stroke: var(--arc-color, #ffd784);
  stroke-width: var(--arc-width, 3.5);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}

.hud {
  position: fixed;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  z-index: 10;
  user-select: none;
}
.hud button {
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
}
.hud button:hover { background: rgba(255, 255, 255, 0.18); }
.hud label { display: inline-flex; align-items: center; gap: 6px; }

/* Speed slider gets its own emphasized group so it's easy to find. */
.hud .speed-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.hud .speed-group label { font-weight: 600; letter-spacing: 0.02em; }
.hud .speed-group input[type="range"] {
  width: 200px;
  accent-color: #ffd784;
}
.hud .speed-readout {
  min-width: 64px;
  text-align: right;
  color: #ffd784;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.hud .arc-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.hud .arc-group label { font-weight: 600; }
.hud .arc-group input[type="color"] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.hud .arc-group input[type="range"] { width: 130px; accent-color: #ffd784; }
.hud .arc-readout {
  min-width: 44px;
  text-align: right;
  color: #ffd784;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}