/* Bounce: what only its table has. The rest comes from /rooms/room.css. */

.bn-score { position: absolute; z-index: 3; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(78px + env(safe-area-inset-left, 0px)); pointer-events: none;
  display: grid; text-shadow: 0 2px 0 #0008, 0 0 18px #000a; }
.bn-score[hidden] { display: none; }
.bn-score strong { font: 800 44px/1 var(--font); color: #ffe7a0; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bn-score small { font-size: 13px; color: #f3e6c8; margin-top: 3px; }

.bn-right { position: absolute; z-index: 3; top: calc(84px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); pointer-events: none;
  display: grid; justify-items: end; gap: 8px; text-shadow: 0 2px 0 #0008, 0 0 12px #000a; }
.bn-right[hidden] { display: none; }
.bn-wall { display: grid; justify-items: end; }
.bn-wall strong { font: 800 24px/1 var(--font); color: #fff; }
.bn-wall small { font-size: 13px; color: #e9dcc0; margin-top: 2px; }
.bn-lives { display: flex; gap: 6px; }
.bn-lives i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b8bcc6 45%, #555b66); box-shadow: 0 1px 4px #0009; }
.bn-powers { display: grid; gap: 4px; justify-items: end; }
.bn-power { font: 700 12px var(--font); padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--c); box-shadow: 0 2px 8px #0006; text-shadow: 0 1px 2px #0008; }
@media (max-width: 760px) {
  .bn-score { top: calc(64px + env(safe-area-inset-top, 0px)); left: calc(14px + env(safe-area-inset-left, 0px)); }
  .bn-score strong { font-size: 32px; }
  .bn-right { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .bn-wall strong { font-size: 18px; }
}

/* a wall's name as it starts, a wall cleared, a ball lost */
.bn-banner { position: absolute; z-index: 4; left: 50%; top: 38%; transform: translate(-50%, -50%); pointer-events: none; display: grid; justify-items: center; gap: 4px;
  padding: 14px 26px; border-radius: 16px; background: #000b; border: 1px solid #fff2; box-shadow: 0 10px 30px #0008; text-align: center; }
.bn-banner[hidden] { display: none; }
.bn-banner small { font-size: 14px; color: #e9dcc0; }
.bn-banner strong { font: 400 34px/1.1 var(--serif, var(--gu-serif)); color: #fff; }
.bn-banner.go { animation: bnin .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes bnin { from { opacity: 0; transform: translate(-50%, -40%) scale(.9); } }

.bn-pops { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.bn-pop { position: absolute; transform: translate(-50%, -50%); font: 800 22px/1 var(--font); color: #fff; white-space: nowrap;
  text-shadow: 0 2px 0 #000a, 0 0 12px #000; animation: bnrise 1.2s cubic-bezier(.2, .8, .3, 1) forwards; }
.bn-pop.cap { color: #ffe27a; }
.bn-pop.life { color: #ff8fa0; }
@keyframes bnrise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%); } }
@media (prefers-reduced-motion: reduce) { .bn-pop { animation-duration: .01s; animation-delay: 1s; } .bn-banner.go { animation: none; } }

.bn-pause { position: absolute; z-index: 4; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #fff3; background: #0008; color: #fff; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px #0006; }
.bn-pause:hover { background: #000b; }
@media (max-width: 760px) { .bn-pause { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: auto; right: 14px; transform: none; } }
.bn-paused { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(10, 12, 12, .92); backdrop-filter: blur(14px); }
.bn-paused[hidden] { display: none; }
.bn-paused strong { font: 400 48px/1 var(--serif, var(--gu-serif)); color: #fff; }

/* the shop's swatches: a table with a few bricks, a bat, a ball */
.swatch-table { min-height: 90px; height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); align-content: start; gap: 4px; padding: 14px 16px; position: relative;
  background: var(--floor); box-shadow: inset 0 0 0 7px var(--frame), inset 0 0 0 9px var(--rail); }
.swatch-table i { height: 10px; border-radius: 2px; background: hsl(calc(var(--n, 0) * 40), 70%, 55%); box-shadow: inset 0 -2px 0 #0004; }
.swatch-table i:nth-child(1) { --n: 0; } .swatch-table i:nth-child(2) { --n: 1; } .swatch-table i:nth-child(3) { --n: 2; } .swatch-table i:nth-child(4) { --n: 4; } .swatch-table i:nth-child(5) { --n: 5; }
.swatch-table i:nth-child(6) { --n: 6; } .swatch-table i:nth-child(7) { --n: 7; } .swatch-table i:nth-child(8) { --n: 8; } .swatch-table i:nth-child(9) { --n: 3; } .swatch-table i:nth-child(10) { --n: 0; }
.swatch-table b { position: absolute; left: 50%; bottom: 14px; width: 34px; height: 7px; margin-left: -17px; border-radius: 4px; background: var(--rail); }
.swatch-table.neon b, .swatch-table.neon { box-shadow: inset 0 0 0 7px var(--frame), inset 0 0 0 9px var(--rail), inset 0 0 18px var(--lines); }
.swatch-bat { min-height: 90px; height: 100%; display: grid; place-items: center; background: radial-gradient(circle, #1e2b25, #0b120f); }
.swatch-bat i { width: 120px; height: 18px; border-radius: 9px; background: linear-gradient(90deg, var(--ends) 0 14%, var(--body) 14% 86%, var(--ends) 86%); box-shadow: inset 0 -4px 6px #0005, inset 0 3px 4px #fff4, 0 4px 10px #0008; }
.swatch-bat.glow i { box-shadow: 0 0 14px var(--body), 0 0 30px var(--body), inset 0 3px 4px #fff6; }
.swatch-ball { min-height: 90px; height: 100%; display: grid; place-items: center; background: radial-gradient(circle, #1e2b25, #0b120f); }
.swatch-ball i { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--colour) 40%, color-mix(in srgb, var(--colour) 40%, #000)); box-shadow: 0 6px 12px #0008; }
.swatch-ball.glow i { box-shadow: 0 0 16px var(--trail), -26px 10px 14px -6px var(--trail); }
.swatch-ball.glass i { opacity: .85; background: radial-gradient(circle at 35% 30%, #fff, transparent 30%), radial-gradient(circle at 60% 60%, var(--colour), color-mix(in srgb, var(--colour) 30%, #000)); }