html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  position: relative;
  margin: 0;
  padding: 0;
  background: #000;
  font: 400 1.15em/1.1 fantasy;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 640px) {
  body {
    font-size: 1em;
  }
}
#background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #0869ad 0%, #0a3446 100%);
  overflow: hidden;
  z-index: 1;
}
#content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media (orientation: landscape) {
  #content {
    flex-flow: row;
  }
}
header,
main,
section {
  display: flex;
  flex: 2;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
header,
section {
  flex: 1;
  flex-flow: column;
  color: #fff;
  font-size: 2em;
}
header h1,
section h1 {
  text-align: right;
  font: 400 1.5em/0.85 fantasy;
}
header h1 span,
section h1 span {
  display: block;
}
@media (max-width: 640px) {
  header h1,
  section h1 {
    margin: 1.5rem 0 1rem;
  }
}
header strong,
section strong {
  font-size: 2em;
}
@media (max-width: 640px) {
  header strong,
  section strong {
    font-size: 1.5em;
    margin-left: 1rem;
  }
}
@media (orientation: portrait) {
  section {
    margin-top: 1.25rem;
  }
}
@media (max-width: 640px) {
  section {
    flex-flow: row;
  }
}
#message {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(0,0,0,0.267);
  backdrop-filter: sepia(0.5) brightness(0.65) blur(10px);
  padding: 1.25rem;
  font-size: 3.5em;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 1s ease;
}
#message p {
  font-size: 0.5em;
  color: rgba(204,238,255,0.933);
}
@media (max-width: 640px) {
  #message {
    font-size: 2.5em;
  }
}
#start {
  font-size: 0.75em;
  margin: 1.5rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid rgba(255,255,255,0.267);
  color: #000;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255,255,255,0.333), 0 2px 3px rgba(28,251,169,0.467), 0 -2px 3px rgba(28,251,169,0.467);
  box-shadow: 0 2px 4px rgba(0,0,0,0.333), 0 0 30px rgba(0,0,0,0.2);
  background: linear-gradient(45deg, rgba(255,255,255,0) 45%, rgba(175,255,225,0.4) 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%), radial-gradient(#1cfba9, #199e92);
  background-position: -200%, 50% 50%;
  background-size: 250%;
  outline: 2px solid rgba(28,251,169,0);
  outline-offset: 0;
  transition: all 0.25s ease-in;
}
#start:hover,
#start:focus {
  animation: background-shine 1.5s ease-in infinite both;
  outline-color: #1cfba9;
  outline-offset: 4px;
}
#start:active {
  transform: scale(0.95);
}
[hidden] {
  display: none !important;
}
.text-shine {
  background-color: #daefff;
  background-image: linear-gradient(30deg, rgba(187,221,221,0.333) 12%, transparent 12.5%, transparent 87%, rgba(187,221,221,0.333) 87.5%, rgba(187,221,221,0.333)), linear-gradient(150deg, rgba(187,221,221,0.333) 12%, transparent 12.5%, transparent 87%, rgba(187,221,221,0.333) 87.5%, rgba(187,221,221,0.333)), linear-gradient(30deg, rgba(187,221,221,0.333) 12%, transparent 12.5%, transparent 87%, rgba(187,221,221,0.333) 87.5%, rgba(187,221,221,0.333)), linear-gradient(150deg, rgba(187,221,221,0.333) 12%, transparent 12.5%, transparent 87%, rgba(187,221,221,0.333) 87.5%, rgba(187,221,221,0.333)), linear-gradient(60deg, rgba(255,255,255,0.333) 25%, transparent 25.5%, transparent 75%, rgba(255,255,255,0.333) 75%, rgba(255,255,255,0.333)), linear-gradient(60deg, rgba(255,255,255,0.333) 25%, transparent 25.5%, transparent 75%, rgba(255,255,255,0.333) 75%, rgba(255,255,255,0.333));
  background-position: 0 0, 0 0, 10px 17.5px, 10px 17.5px, 0 0, 10px 17.5px;
  background-size: 10px 17.5px;
  position: relative;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.text-shine::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.933) 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%);
  background-size: 250%;
  color: transparent;
  content: attr(data-text);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), -2px 2px 20px rgba(0,0,0,0.067), 2px 2px 20px rgba(0,0,0,0.067), 0 15px 35px rgba(0,0,0,0.2);
  animation: text-shine 3.5s ease-in 2s infinite both;
  -webkit-background-clip: text;
  mix-blend-mode: screen;
}
@keyframes text-shine {
  0% {
    background-position: -200%;
  }
  100% {
    background-position: 125%;
  }
}
@-webkit-keyframes text-shine {
  0% {
    background-position: -200%;
  }
  100% {
    background-position: 125%;
  }
}
@keyframes background-shine {
  0% {
    background-position: -200%, 50% 50%;
  }
  100% {
    background-position: 125%, 50% 50%;
  }
}
@-webkit-keyframes background-shine {
  0% {
    background-position: -200%, 50% 50%;
  }
  100% {
    background-position: 125%, 50% 50%;
  }
}
@keyframes slot-selected {
  0% {
    outline-color: rgba(136,187,238,0.333);
    outline-offset: -5px;
    outline-width: 5px;
  }
  100% {
    outline-color: rgba(136,187,238,0.467);
    outline-offset: -7px;
    outline-width: 7px;
  }
}
@-webkit-keyframes slot-selected {
  0% {
    outline-color: rgba(136,187,238,0.333);
    outline-offset: -5px;
    outline-width: 5px;
  }
  100% {
    outline-color: rgba(136,187,238,0.467);
    outline-offset: -7px;
    outline-width: 7px;
  }
}
@keyframes slot-exploding {
  0%, 100% {
    box-shadow: inset 0 0 0 rgba(255,255,255,0.2), 0 0 0 rgba(255,221,221,0.333);
  }
  15%, 25% {
    box-shadow: inset 0 0 200px rgba(255,255,255,0.2), 0 0 50px rgba(255,221,221,0.333);
  }
}
@-webkit-keyframes slot-exploding {
  0%, 100% {
    box-shadow: inset 0 0 0 rgba(255,255,255,0.2), 0 0 0 rgba(255,221,221,0.333);
  }
  15%, 25% {
    box-shadow: inset 0 0 200px rgba(255,255,255,0.2), 0 0 50px rgba(255,221,221,0.333);
  }
}
@keyframes jewel-arriving {
  0% {
    transform: translate3d(0, -100vh, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes jewel-arriving {
  0% {
    transform: translate3d(0, -100vh, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes jewel-falling {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes jewel-falling {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes jewel-exploding {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(0.25) translate3d(0, 5%, 0);
  }
}
@-webkit-keyframes jewel-exploding {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(0.25) translate3d(0, 5%, 0);
  }
}
@keyframes jewel-brightening {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.2);
  }
}
@-webkit-keyframes jewel-brightening {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.2);
  }
}
@keyframes star-blinking {
  0% {
    transform: translateX(-50%);
    filter: brightness(1) drop-shadow(0 0 0.5px rgba(255,255,255,0.667));
  }
  100% {
    transform: translateX(-50%) scale(0.9);
    filter: brightness(1.075) drop-shadow(0 0 1px rgba(255,255,255,0.667));
  }
}
@-webkit-keyframes star-blinking {
  0% {
    transform: translateX(-50%);
    filter: brightness(1) drop-shadow(0 0 0.5px rgba(255,255,255,0.667));
  }
  100% {
    transform: translateX(-50%) scale(0.9);
    filter: brightness(1.075) drop-shadow(0 0 1px rgba(255,255,255,0.667));
  }
}
game-board {
  display: grid;
  overflow: hidden;
  box-sizing: border-box;
  width: calc(100vmin - 30px);
  height: calc(100vmin - 30px);
  border: 5px solid rgba(51,51,51,0.333);
  border-radius: 10px;
  cursor: default;
  box-shadow: inset 0 5px 30px rgba(0,0,0,0.467);
  backdrop-filter: blur(7px);
  transition: opacity 0.5s ease;
}
game-board[grabbing] {
  cursor: grabbing !important;
}
game-board:not([animating]) board-slot:not(:empty) {
  cursor: pointer !important;
}
game-board:empty {
  opacity: 0;
}
game-board:not([animating]) board-slot[selected] {
  background: rgba(51,102,153,0.467);
  cursor: grabbing;
  animation: slot-selected 0.3s ease-in infinite alternate forwards;
}
game-board:not([animating]) board-slot[selected] jewel-piece {
  z-index: 2;
}
board-slot {
  position: relative;
  box-sizing: border-box;
  outline: 5px solid transparent;
  transition: all 0.5s ease;
}
board-slot:nth-child(even) {
  background: rgba(17,17,17,0.467);
}
board-slot:nth-child(odd) {
  background: rgba(0,0,0,0.467);
}
board-slot[locked] {
  border: 3px solid rgba(51,51,51,0.333);
  background: transparent;
  cursor: default;
}
board-slot.exploding {
  animation: slot-exploding 0.3s ease both;
}
board-slot.first-row.first-column {
  border-radius: 4px 0 0 0;
}
board-slot.first-row.last-column {
  border-radius: 0 4px 0 0;
}
board-slot.last-row.first-column {
  border-radius: 0 0 0 4px;
}
board-slot.last-row.last-column {
  border-radius: 0 0 4px 0;
}
jewel-piece {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  padding: 7px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-style: preserve-3d;
}
@media (max-width: 640px) {
  jewel-piece {
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%;
  }
}
jewel-piece:not([hidden]) {
  display: block;
}
jewel-piece .border,
jewel-piece .shape,
jewel-piece .shape::after {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
jewel-piece .border {
  padding: 2px;
}
jewel-piece .shape {
  padding: 15%;
}
jewel-piece .shape::after {
  content: '';
  display: block;
}
jewel-piece.arriving {
  animation: jewel-arriving 0.2s cubic-bezier(0.25, 0.25, 0.5, 1.1) forwards;
}
jewel-piece.falling {
  transition: transform 0.1s cubic-bezier(0.25, 0.25, 0.5, 1.1);
}
jewel-piece.moving {
  transition: transform 0.1s cubic-bezier(0.25, 0.25, 0.5, 1.1);
}
jewel-piece.flipping {
  transition: transform 0.15s ease-in;
}
jewel-piece.exploding {
  animation: jewel-exploding 0.35s ease-out forwards;
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='square'] {
  padding: 11px;
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='square'] .border,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='square'] .shape,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='square'] .shape::after {
  border-radius: 10%;
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='square'] .border {
  background: linear-gradient(130deg, #f88e86, #8d1108);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='square'] .shape {
  background: radial-gradient(#f99890, #d4190c);
  background: conic-gradient(from 45deg, #f55a4e, #f44336, #f33122, #f55246, #f44336, #f33628, #f55a4e, #f44336, #f33628, #f55044, #f44336, #f33122, #f65f54);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='square'] .shape::after {
  background: linear-gradient(130deg, rgba(250,170,165,0.3), rgba(250,170,165,0.25));
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='diamond'] .border,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='diamond'] .shape,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='diamond'] .shape::after {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='diamond'] .border {
  background: linear-gradient(130deg, #ffe69c, #b78a00);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='diamond'] .shape {
  background: radial-gradient(#fd7, #c49300);
  background: conic-gradient(from 30deg, #ffc825, #ffc107, #f4b700, #ffc61b, #ffc107, #f9bb00, #ffc825, #ffc107, #f9bb00, #ffc518, #ffc107, #f4b700, #ffca2c);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='diamond'] .shape::after {
  background: linear-gradient(130deg, rgba(255,236,181,0.4), rgba(255,218,106,0.75));
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='circle'] {
  padding: 10px;
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='circle'] .border,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='circle'] .shape,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='circle'] .shape::after {
  border-radius: 50%;
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='circle'] .border {
  background: linear-gradient(130deg, #f9ae80, #ba4c09);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='circle'] .shape {
  background: radial-gradient(#f8a673, #ae4708);
  background: conic-gradient(from 45deg, #f4701f, #e85f0b, #d8580a, #f46914, #e85f0b, #dc5a0a, #f4701f, #e85f0b, #dc5a0a, #f46812, #e85f0b, #d8580a, #f57526);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='circle'] .shape::after {
  background: linear-gradient(130deg, rgba(248,157,102,0.5), rgba(247,141,77,0.75));
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='triangle'] {
  padding: 9px;
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='triangle'] .border,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='triangle'] .shape,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='triangle'] .shape::after {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='triangle'] .border {
  background: linear-gradient(130deg, #fcecff, #9f04b9);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='triangle'] .shape {
  background: radial-gradient(#ee96fd, #c705e7);
  background: conic-gradient(from 120deg, #e457fb, #e040fb, #dc2afb, #e24ffb, #e040fb, #dd31fb, #e457fb, #e040fb, #dd31fb, #e24dfb, #e040fb, #dc2afb, #e55dfc);
  padding: 22% 16% 11%;
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='triangle'] .shape::after {
  background: linear-gradient(130deg, rgba(236,140,253,0.5), rgba(236,140,253,0.9));
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='hexagon'] {
  padding: 9px;
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='hexagon'] .border,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='hexagon'] .shape,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='hexagon'] .shape::after {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='hexagon'] .border {
  background: linear-gradient(130deg, #f3f9ed, #547928);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='hexagon'] .shape {
  background: radial-gradient(#bfde9b, #699832);
  background: conic-gradient(from 45deg, #99ca60, #8bc34a, #82bc3e, #94c858, #8bc34a, #85c040, #99ca60, #8bc34a, #85c040, #93c757, #8bc34a, #82bc3e, #9ccc65);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='hexagon'] .shape::after {
  background: linear-gradient(130deg, rgba(209,231,183,0.4), rgba(185,219,146,0.55));
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='heptagon'] {
  padding: 9px;
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='heptagon'] .border,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='heptagon'] .shape,
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='heptagon'] .shape::after {
  clip-path: polygon(30% 0, 0 20%, 0 55%, 50% 100%, 100% 55%, 100% 20%, 70% 0);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='heptagon'] .border {
  background: linear-gradient(130deg, #cde2fc, #09418a);
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='heptagon'] .shape {
  background: radial-gradient(#76aef6, #0b52ac);
  background: conic-gradient(from 45deg, #247ef1, #0f6de6, #0e65d6, #1a78f0, #0f6de6, #0e68db, #247ef1, #0f6de6, #0e68db, #1876f0, #0f6de6, #0e65d6, #2c82f1);
  padding: 13% 15% 15%;
}
jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])[type='heptagon'] .shape::after {
  background: linear-gradient(130deg, rgba(155,196,249,0.4), rgba(106,167,245,0.55));
}
jewel-piece[promoted]:not(.arriving):not(.falling):not(.exploding) .shape {
  animation: jewel-brightening 0.5s ease 0.75s infinite alternate backwards;
}
jewel-piece[promoted]::after {
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 175%;
  height: 175%;
  background-position: center;
  background-size: 100% 100%;
  content: '';
  transform: translate3d(-50%, 0, 0);
  pointer-events: none;
}
jewel-piece[promoted='smoke'] {
  filter: drop-shadow(0 2px 4px rgba(221,221,221,0.6)) drop-shadow(0 -2px 2px #555) drop-shadow(0 0 15px rgba(204,204,204,0.267));
}
jewel-piece[promoted='smoke']::after {
  top: -12%;
  width: 115%;
  height: 115%;
  filter: brightness(5) contrast(1.2) opacity(0.5);
  background-image: url("/images/desktop/arcade/jewelsback/smoke.webp");
}
jewel-piece[promoted='fire'] {
  filter: drop-shadow(0 3px 6px rgba(255,0,0,0.467)) drop-shadow(0 -2px 2px rgba(255,193,7,0.333)) drop-shadow(0 0 15px rgba(255,193,7,0.333));
}
jewel-piece[promoted='fire']::after {
  bottom: 16%;
  left: 52%;
  width: 170%;
  height: 140%;
  filter: saturate(2) brightness(1.2) contrast(1.25) opacity(1);
  background-image: url("/images/desktop/arcade/jewelsback/fire.webp");
}
jewel-piece[promoted='fire'][type="heptagon"]::after {
  bottom: 26%;
}
jewel-piece[promoted='star'] {
  filter: drop-shadow(0 2px 4px rgba(229,229,255,0.467)) drop-shadow(0 0 15px rgba(15,109,230,0.4));
}
jewel-piece[promoted='star']::after {
  animation: star-blinking 0.85s ease 0.75s infinite alternate both;
  width: 110%;
  height: 110%;
  top: -5%;
  clip-path: polygon(50% 0%, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0 50%, 45% 45%);
  background-image: radial-gradient(circle, rgba(255,255,255,0.733), rgba(255,255,255,0.133));
  mix-blend-mode: lighten;
}
jewel-piece[promoted='rainbow'] {
  padding: 8px;
  filter: drop-shadow(0 0 15px rgba(15,109,230,0.2)) drop-shadow(0 4px 4px rgba(255,193,7,0.5)) drop-shadow(0 -4px 4px rgba(224,64,251,0.4));
}
jewel-piece[promoted='rainbow'] .border,
jewel-piece[promoted='rainbow'] .shape,
jewel-piece[promoted='rainbow'] .shape::after {
  border-radius: 0;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
jewel-piece[promoted='rainbow'] .border {
  background: linear-gradient(98deg, #e85f0b, #ffc107, #8bc34a, #0f6de6, #e040fb, #f44336);
  background: conic-gradient(from 90deg, rgba(255,255,255,0.333), rgba(255,255,255,0.133), rgba(255,255,255,0), rgba(255,255,255,0.333), rgba(255,255,255,0.2), rgba(255,255,255,0), rgba(255,255,255,0.333), rgba(255,255,255,0.133), rgba(255,255,255,0), rgba(255,255,255,0.333), rgba(255,255,255,0.2), rgba(255,255,255,0), rgba(255,255,255,0.333)), linear-gradient(to right, #e85f0b, #ffc107, #8bc34a, #0f6de6, #e040fb, #f44336);
}
jewel-piece[promoted='rainbow'] .shape {
  background: linear-gradient(90deg, #e85f0b, #ffc107, #8bc34a, #0f6de6, #e040fb, #f44336);
  background: conic-gradient(from 45deg, rgba(255,255,255,0.333), rgba(255,255,255,0.133), rgba(255,255,255,0), rgba(255,255,255,0.333), rgba(255,255,255,0.2), rgba(255,255,255,0), rgba(255,255,255,0.333), rgba(255,255,255,0.133), rgba(255,255,255,0), rgba(255,255,255,0.333), rgba(255,255,255,0.2), rgba(255,255,255,0), rgba(255,255,255,0.333)), linear-gradient(to right, #e85f0b, #ffc107, #8bc34a, #0f6de6, #e040fb, #f44336);
}
jewel-piece[promoted='rainbow'] .shape::after {
  background: linear-gradient(130deg, rgba(255,255,255,0.133), rgba(255,255,255,0.2));
  backdrop-filter: blur(4px);
}
jewel-piece[promoted='nebula'] {
  filter: drop-shadow(0 4px 4px rgba(68,51,102,0.667)) drop-shadow(0 0 15px rgba(0,0,0,0.6));
}
jewel-piece[promoted='nebula'] .border,
jewel-piece[promoted='nebula'] .shape {
  border-radius: 50%;
  clip-path: none;
}
jewel-piece[promoted='nebula'] .border {
  filter: drop-shadow(0 0 3px #bbb lack);
  background: linear-gradient(130deg, #b8c7ce, #4c636e);
}
jewel-piece[promoted='nebula'] .shape {
  background: linear-gradient(130deg, #455a64, #34444b);
}
jewel-piece[promoted='nebula'] .shape::after {
  display: none;
}
jewel-piece[promoted='nebula']::after {
  top: -36%;
  filter: brightness(0) contrast(2);
  background-image: url("/images/desktop/arcade/jewelsback/smoke.webp");
}

/* GameHarbor integration additions */
html,body{touch-action:manipulation;}
header{position:relative;}
#audioToggle{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:2px solid #fff5;background:#071629cc;color:#fff;font-size:20px;cursor:pointer;z-index:5;}
#audioToggle:hover,#audioToggle:focus{outline:2px solid #1cfba9;outline-offset:2px;}
@media (max-width:640px){#audioToggle{top:8px;right:8px;width:38px;height:38px;font-size:18px;}game-board{width:calc(100vmin - 18px);height:calc(100vmin - 18px);}}