/* Glass marbles for Glaze & Gleam (shared with the Retold Games home page). */
.marble { position: absolute; width: var(--m); aspect-ratio: 1; transform: translate(-50%, -50%); transition: left .25s ease, top .25s ease; }
.marble > i { position: absolute; display: block; border-radius: 50%; }
.marble .caustic { left: 22%; top: 38%; width: 130%; height: 100%; filter: blur(1.5px);
  background: radial-gradient(ellipse at 35% 35%, rgba(var(--glow), .6), rgba(var(--glow), .25) 45%, transparent 70%); }
.marble .core { inset: 0;
  background:
    radial-gradient(circle at 66% 72%, rgba(255, 255, 255, .55) 0 7%, transparent 32%),
    radial-gradient(circle at 44% 40%, var(--a) 0%, var(--b) 58%, var(--c) 100%);
  box-shadow: inset -2px -3px 5px rgba(0, 0, 0, .3), inset 1.5px 2px 3px rgba(255, 255, 255, .4), 1px 2.5px 3px rgba(25, 18, 10, .45); }
.marble .spec { left: 18%; top: 14%; width: 34%; height: 26%; transform: rotate(-30deg);
  background: radial-gradient(ellipse, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); }
/* frosted sea glass: soft, matte, a little faded */
.marble.frost .core { filter: saturate(.7) brightness(1.05);
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .22) .6px, transparent 1px) 0 0 / 3px 3px, radial-gradient(circle at 42% 38%, var(--a), var(--b) 80%, var(--c)); }
.marble.frost .spec { opacity: .45; filter: blur(1px); }
/* cat's eye: clear glass with a coloured vane through the middle */
.marble.cat .core { background:
  conic-gradient(from var(--swirl), transparent 0 18%, var(--b) 20% 29%, transparent 31% 68%, var(--c) 70% 78%, transparent 80%) center / 70% 70% no-repeat,
  radial-gradient(circle at 40% 36%, #FFFFFF, #EEF4F6 45%, var(--a) 100%); }
.marble.cat .core::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: conic-gradient(from var(--swirl), var(--b) 0 8%, transparent 10% 48%, var(--c) 50% 58%, transparent 60%); filter: blur(.4px); transform: rotate(var(--tilt)) scaleY(.55); }
/* opal: milky with a pastel sheen */
.marble.opal .core { background: conic-gradient(from var(--swirl), rgba(255, 210, 230, .35), rgba(200, 230, 255, .35), rgba(220, 255, 220, .35), rgba(255, 210, 230, .35)),
  radial-gradient(circle at 40% 35%, #FFFFFF, #F1EDF2 55%, var(--a) 100%); }
.marble.opal .caustic { opacity: .5; }
.marble.lifted { transform: translate(-50%, -60%) scale(1.15); transition: transform .18s ease-out; }
.marble.peek { animation: peek 1s ease-in-out infinite; }
@keyframes peek { 50% { transform: translate(-50%, -62%); } }