/* Gem Cascade: what only the gem game has. The rest comes from /rooms/room.css. */

/* the score, and the level bar or the clock under it */
.jw-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 0 18px rgba(255, 190, 90, .45); }
.jw-score:empty { display: none; }
.jw-score strong { font: 300 44px/1 "Segoe UI", Arial, sans-serif; color: #fff4dc; font-variant-numeric: tabular-nums; }
.jw-score small { font-size: 12px; color: #d8c08a; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
.jw-bar { position: absolute; top: calc(78px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  width: min(420px, calc(100vw - 140px)); height: 18px; border-radius: 9px; background: rgba(0,0,0,.45); border: 1px solid rgba(217,178,107,.35); overflow: hidden; }
.jw-bar[hidden] { display: none; }
.jw-bar b { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #b8892f, #f6d27a); transition: width .3s ease; }
.jw-bar.time b { background: linear-gradient(90deg, #2b7bd8, #7fd3ff); transition: width .2s linear; }
.jw-bar.time.low b { background: linear-gradient(90deg, #c8321e, #ff8a5a); }
.jw-bar span { position: relative; display: block; text-align: center; font: 600 11px/18px var(--font); color: #fff; letter-spacing: .06em; text-shadow: 0 1px 2px #000; }
@media (max-width: 760px) {
  .jw-score { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .jw-score strong { font-size: 36px; }
  .jw-bar { top: calc(124px + env(safe-area-inset-top, 0px)); width: calc(100vw - 32px); }
}

/* 3, 2, 1 at the start of a game */
.jw-count { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; }
.jw-count span { font: 800 clamp(96px, 22vmin, 190px)/1 var(--gu-serif); color: #fff4d6; padding: .15em .45em; background: radial-gradient(closest-side, rgba(12, 6, 24, .6), transparent);
  text-shadow: 0 0 30px rgba(255, 200, 110, .85), 0 0 80px rgba(200, 120, 255, .55), 0 6px 14px #000; animation: jwcount 1s ease-out forwards; }
.jw-count.is-go span { font-size: clamp(72px, 16vmin, 140px); color: #ffe9a8; animation-duration: .7s; }
@keyframes jwcount { 0% { opacity: 0; transform: scale(1.6); } 18% { opacity: 1; transform: scale(1); } 75% { opacity: 1; transform: scale(.94); } 100% { opacity: 0; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .jw-count span { animation: none; } }

/* points floating up from a line */
.jw-pop { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -50%); font: 800 20px/1 var(--font); color: #fff;
  text-shadow: 0 0 10px rgba(255, 210, 120, .9), 0 2px 4px #000; animation: jwpop 1.1s ease-out forwards; white-space: nowrap; }
.jw-pop.big { font-size: 28px; color: #ffe9a8; }
@keyframes jwpop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }


/* the shop's swatches */
.swatch-gems { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 90px; height: 100%; padding: 10px; background: radial-gradient(circle at 50% 40%, #2a1840, #0a0610); }
.swatch-gems i { width: 20px; height: 20px; transform: rotate(45deg); border-radius: 3px; background: linear-gradient(135deg, #fff9 0, var(--c) 35%, var(--c) 65%, #0006 100%); box-shadow: 0 0 6px var(--c); }
.swatch-gems.glow i { box-shadow: 0 0 14px var(--c), 0 0 4px #fff; }
.swatch-board { min-height: 90px; height: 100%; display: grid; place-items: center; background: #090709; }
.swatch-board b { width: 72px; height: 72px; border: 3px solid var(--rim); background: repeating-conic-gradient(var(--a) 0 25%, var(--b) 0 50%) 0 0 / 18px 18px; }
.swatch-sky { min-height: 90px; height: 100%; background: radial-gradient(circle at 30% 40%, var(--cloud), transparent 55%), radial-gradient(circle at 75% 70%, var(--cloud), transparent 45%), var(--sky); }