:root {
  --mp-refraction-shadow: rgba(40, 53, 72, 0.045);
}

/*
 * Pure optical glass:
 * - no painted border
 * - no white highlight gradient
 * - no translucent card fill
 * - the generated displacement map is neutral in the centre and only bends
 *   the backdrop inside a narrow rounded bezel.
 *
 * When SVG backdrop filters are unavailable, the pseudo-element is invisible;
 * the fallback is therefore a clean, borderless transparent card.
 */
.cell,
.map:not(.is-focus) .cell,
.focus-cells .cell {
  isolation: isolate;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 12px 26px var(--mp-refraction-shadow),
    0 2px 6px rgba(40, 53, 72, 0.025) !important;
}

.cell::before,
.map:not(.is-focus) .cell::before,
.focus-cells .cell::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;

  /* A nearly-zero alpha is enough to expose backdrop-filter without tinting. */
  background: rgba(64, 80, 104, 0.001) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;

  backdrop-filter:
    url(#memory-edge-refraction)
    saturate(108%)
    contrast(1.035) !important;
  -webkit-backdrop-filter:
    url(#memory-edge-refraction)
    saturate(108%)
    contrast(1.035) !important;

  filter: none !important;
  transition: backdrop-filter 160ms ease, -webkit-backdrop-filter 160ms ease !important;
}

/* No secondary ring, highlight, stroke, or colour fringe. */
.cell::after,
.map:not(.is-focus) .cell::after,
.focus-cells .cell::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.cell > * {
  position: relative;
  z-index: 1 !important;
}

.cell:hover,
.cell.is-active,
.map:not(.is-focus) .cell:hover,
.map:not(.is-focus) .cell.is-active,
.focus-cells .cell:hover,
.focus-cells .cell.is-active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow:
    0 15px 31px rgba(40, 53, 72, 0.065),
    0 3px 8px rgba(40, 53, 72, 0.028) !important;
  transform: none !important;
}

.cell:hover::before,
.cell.is-active::before {
  backdrop-filter:
    url(#memory-edge-refraction-strong)
    saturate(111%)
    contrast(1.045) !important;
  -webkit-backdrop-filter:
    url(#memory-edge-refraction-strong)
    saturate(111%)
    contrast(1.045) !important;
}

/* The mnemonic label must not introduce another white capsule outline. */
.cell .obj,
.cell:hover .obj,
.cell.is-active .obj {
  border: 0 !important;
  outline: 0 !important;
  background: rgba(255, 255, 255, 0.13) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 7px rgba(50, 64, 84, 0.04) !important;
}

/* 1000 simultaneous backdrop filters are expensive. At panorama scale the
 * cards intentionally fall back to fully transparent, borderless surfaces. */
body.memory-overview-mode .cell::before {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 768px) {
  /* Mobile keeps the stable no-border fallback; only the selected card bends
   * the backdrop to avoid excessive GPU work. */
  .cell::before {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cell.is-active::before {
    background: rgba(64, 80, 104, 0.001) !important;
    backdrop-filter:
      url(#memory-edge-refraction-strong)
      saturate(109%)
      contrast(1.04) !important;
    -webkit-backdrop-filter:
      url(#memory-edge-refraction-strong)
      saturate(109%)
      contrast(1.04) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .cell::before {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}