/* Glass marbles (marbles.js). Layers per marble: .mb-sh (shadow + caustic sprite), .mb-in > canvas (rolling pattern) + .mb-ov (fixed lighting). */
#mb-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 30; pointer-events: none; }
body.holding #mb-layer { pointer-events: none; visibility: hidden; }
.mb {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; pointer-events: auto; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; will-change: transform;
}
.mb.drag { cursor: grabbing; }
.mb-sh, .mb-in { position: absolute; display: block; pointer-events: none; }
.mb-sh {
  left: -44px; top: -44px; width: 132px; height: 132px; background-size: 100% 100%; transform-origin: 50% 50%;
  transition: transform .5s cubic-bezier(.3, 1.7, .5, 1), opacity .3s cubic-bezier(.16, 1, .3, 1);
}
.mb-in { inset: 0; transition: transform .4s cubic-bezier(.3, 1.7, .5, 1); }
.mb-tex, .mb-ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.mb-tex { border-radius: 50%; }
.mb-ov { -webkit-user-drag: none; }
@media (hover: hover) {
  .mb:hover .mb-in { transform: translate(-1px, -2px) scale(1.08); }
  .mb:hover .mb-sh { transform: translate(3px, 5px) scale(1.1); opacity: .9; }
}
.mb:active .mb-in, .mb.drag .mb-in { transform: translate(-2px, -4px) scale(1.16); transition-duration: .2s; }
.mb:active .mb-sh, .mb.drag .mb-sh { transform: translate(7px, 11px) scale(1.2); opacity: .78; }
.mb:focus-visible::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #f6f0e2; box-shadow: 0 0 0 1px rgba(40, 30, 20, .55), 0 0 10px 1px rgba(246, 240, 226, .5); pointer-events: none; }
/* night: the pattern layer follows the dimmer desk, the fixed highlight stays (it is the lamp) */
html.dark .mb-tex { filter: brightness(.6) saturate(.92); }
html.dark .mb-ov { filter: brightness(.88); }
html.dark .mb-sh { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .mb-in, .mb-sh { transition: none; }
}