/* Blockfall: what only the workshop has. The rest comes from /rooms/room.css. */

/* the score, level and rows: a card at the top left (a strip along the bottom on a phone) */
.bf-panel { position: absolute; z-index: 3; left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: 170px;
  display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: rgba(12, 13, 20, .82); border: 1px solid rgba(217, 178, 107, .22);
  box-shadow: 0 10px 26px #0008; color: #e9ecf3; font: 14px/1.2 var(--font, system-ui); pointer-events: none; }
.bf-panel[hidden] { display: none; }
.bf-panel div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px; }
.bf-panel span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #a9adbb; }
.bf-panel strong { font: 700 20px/1 "Segoe UI", Arial, sans-serif; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.bf-panel .bf-score { grid-template-columns: 1fr; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.bf-panel .bf-score strong { font-size: 30px; text-align: left; color: #f1d59a; }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  /* the strip leaves room at its right for the pause button, which sits in line with it */
  .bf-panel { top: auto; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 68px; width: auto; height: 54px; box-sizing: border-box; align-content: center;
    grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 6px; padding: 6px 12px; }
  .bf-panel div, .bf-panel .bf-score { grid-template-columns: 1fr; gap: 3px; padding: 0; border: 0; }
  .bf-panel strong, .bf-panel .bf-score strong { font-size: 17px; text-align: left; }
  .bf-panel span { font-size: 10px; letter-spacing: .1em; }
}

/* Ready… Go! */
.bf-count { position: absolute; z-index: 5; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none;
  font: 400 64px/1 var(--serif, var(--gu-serif)); color: #fff; text-shadow: 0 4px 24px #000, 0 0 30px rgba(120, 160, 255, .6); }
.bf-count:empty { display: none; }
.bf-count.go { color: #f1d59a; animation: bfgo .6s ease-out both; }
@keyframes bfgo { from { transform: translate(-50%, -50%) scale(.7); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1.25); opacity: .2; } }

.bf-pause { position: absolute; z-index: 4; top: calc(14px + env(safe-area-inset-top, 0px)); left: calc(66px + env(safe-area-inset-left, 0px)); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(12, 13, 20, .8); color: #e9ecf3; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px #0006; }
.bf-pause:hover { background: rgba(30, 32, 44, .95); }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .bf-pause { top: auto; left: auto; right: 10px; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 54px; border-radius: 14px;
    border-color: rgba(217, 178, 107, .22); font-size: 15px; }
}

.bf-paused { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(6, 7, 12, .55); backdrop-filter: blur(3px); text-align: center; padding: 20px; }
.bf-paused[hidden] { display: none; }
.bf-paused strong { font: 400 48px/1 var(--serif, var(--gu-serif)); color: #fff; text-shadow: 0 2px 12px #000; }
.bf-paused p { margin: 0; color: #c9ccd6; }


/* the shop */
.swatch-blocks { min-height: 90px; height: 100%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; padding: 10px; background: #07080d; }
.swatch-blocks i { width: 22px; height: 22px; border-radius: 4px; background: var(--c); box-shadow: inset 0 3px rgba(255, 255, 255, .45), inset 0 -3px rgba(0, 0, 0, .35), 0 2px 3px #000a; }
.swatch-blocks.enamel i { border-radius: 3px; box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 4px rgba(255, 255, 255, .35), inset 0 0 0 7px rgba(0, 0, 0, .28), inset 0 9px 6px rgba(255, 255, 255, .18), 0 2px 3px #000a; }
.swatch-blocks.jewel i { transform: rotate(45deg) scale(.85); border-radius: 3px; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), 0 0 8px var(--c); }
.swatch-blocks.neon i { background: transparent; border: 2px solid var(--c); box-shadow: 0 0 8px var(--c), inset 0 0 6px var(--c); }
.swatch-blocks.stone i { border-radius: 2px; filter: saturate(.7); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), inset 2px 2px rgba(255, 255, 255, .2); }
.swatch-blocks.candy i { border-radius: 8px; box-shadow: inset 0 6px 6px rgba(255, 255, 255, .55), 0 2px 4px #0008; }
.swatch-well { min-height: 90px; height: 100%; display: grid; place-items: center; background: #0a0b10; }
.swatch-well b { width: 54px; height: 76px; border: 7px solid var(--frame); border-top: 0; border-radius: 2px; background: var(--back);
  box-shadow: inset 0 0 0 1px var(--trim), 0 0 0 1px var(--trim), 0 6px 10px #0008; }
.swatch-sky { min-height: 90px; height: 100%; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--glow) 40%, transparent), transparent 60%), linear-gradient(var(--top), var(--bottom)); }
.swatch-sky.stars { background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 40% 60%, #fffc, transparent), radial-gradient(1px 1px at 85% 55%, #fff, transparent),
  radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--glow) 40%, transparent), transparent 60%), linear-gradient(var(--top), var(--bottom)); }