/* Jumper: what only the sky has. The rest comes from /rooms/room.css. */

/* the height, and the best so far */
.jm-score { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: grid; justify-items: center; text-shadow: 0 2px 10px rgba(0, 20, 60, .55), 0 0 2px rgba(0, 0, 0, .4); }
.jm-score:empty { display: none; }
.jm-score strong { font: 800 40px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.jm-score small { font-size: 12px; color: #e6f0ff; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
@media (max-width: 760px) {
  .jm-score { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .jm-score strong { font-size: 32px; }
}

.jm-pause { position: absolute; z-index: 4; top: calc(14px + env(safe-area-inset-top, 0px)); left: calc(50% + 120px); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #0003; background: #fffd; color: #2b2a33; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px #0003; }
.jm-pause:hover { background: #fff; }
@media (max-width: 760px) { .jm-pause { top: calc(68px + env(safe-area-inset-top, 0px)); left: auto; right: 14px; } }

.jm-paused { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(20, 18, 24, .45); backdrop-filter: blur(2px); }
.jm-paused[hidden] { display: none; }
.jm-paused strong { font: 400 48px/1 var(--serif, var(--gu-serif)); color: #fff; text-shadow: 0 2px 12px #000; }


/* the shop */
.swatch-jumper { min-height: 90px; height: 100%; display: grid; place-items: center; position: relative; background: linear-gradient(#5d9ae8, #bcd8f6); }
.swatch-jumper b { width: 40px; height: 46px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 50% 70%, var(--belly) 0 34%, transparent 35%), radial-gradient(circle at 38% 30%, #fff6, var(--body) 45%); box-shadow: 0 4px 8px #0004; }
.swatch-jumper.glow b { box-shadow: 0 0 16px var(--body), 0 4px 8px #0004; }
.swatch-jumper i { position: absolute; top: calc(50% + 20px); width: 14px; height: 7px; border-radius: 50%; background: var(--feet); }
.swatch-jumper i:nth-of-type(1) { left: calc(50% - 15px); }
.swatch-jumper i:nth-of-type(2) { left: calc(50% + 1px); }
.swatch-plats { min-height: 90px; height: 100%; display: grid; align-content: center; justify-items: center; gap: 10px; background: linear-gradient(#5d9ae8, #bcd8f6); }
.swatch-plats i { width: 64px; height: 11px; border-radius: 6px; background: var(--c); box-shadow: 0 3px 4px #0004; }
.swatch-plats i:nth-child(2) { margin-left: 40px; }
.swatch-plats i:nth-child(3) { margin-right: 40px; }
.swatch-plats.glow i { box-shadow: 0 0 10px var(--c); }
.swatch-page { min-height: 90px; height: 100%; position: relative; overflow: hidden; background:
  linear-gradient(90deg, var(--frame) 0 10%, transparent 10% 90%, var(--frame) 90%), linear-gradient(var(--high), var(--low)); }
.swatch-page.stars { background: radial-gradient(circle at 24% 18%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 48% 10%, #fff 0 1px, transparent 2px),
  linear-gradient(90deg, var(--frame) 0 10%, transparent 10% 90%, var(--frame) 90%), linear-gradient(var(--high), var(--low)); }
.swatch-page i { position: absolute; width: 46px; height: 14px; border-radius: 10px; background: var(--cloud); box-shadow: 10px -6px 0 2px var(--cloud), -8px -3px 0 0 var(--cloud); opacity: .9; }
.swatch-page i:nth-of-type(1) { left: 26%; top: 34%; }
.swatch-page i:nth-of-type(2) { left: 52%; top: 68%; transform: scale(.75); }