body,html{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/.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;display:flex;flex-flow:column;justify-content:center;align-items:center;text-align:center;background:rgba(0,0,0,.267);backdrop-filter:sepia(.5) brightness(.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:.5em;color:rgba(204,238,255,.933)}@media (max-width:640px){#message{font-size:2.5em}}#start{font-size:.75em;margin:1.5rem;padding:.75rem 1.5rem;border:2px solid hsla(0,0%,100%,.267);color:#000;font-weight:600;text-shadow:0 0 10px hsla(0,0%,100%,.333),0 2px 3px rgba(28,251,169,.467),0 -2px 3px rgba(28,251,169,.467);box-shadow:0 2px 4px rgba(0,0,0,.333),0 0 30px rgba(0,0,0,.2);background:linear-gradient(45deg,hsla(0,0%,100%,0) 45%,rgba(175,255,225,.4) 50%,hsla(0,0%,100%,0) 55%,hsla(0,0%,100%,0)),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 .25s ease-in}#start:focus,#start:hover{animation:background-shine 1.5s ease-in infinite both;outline-color:#1cfba9;outline-offset:4px}#start:active{transform:scale(.95)}[hidden]{display:none!important}.text-shine{background-color:#daefff;background-image:linear-gradient(30deg,rgba(187,221,221,.333) 12%,transparent 12.5%,transparent 87%,rgba(187,221,221,.333) 87.5%,rgba(187,221,221,.333)),linear-gradient(150deg,rgba(187,221,221,.333) 12%,transparent 12.5%,transparent 87%,rgba(187,221,221,.333) 87.5%,rgba(187,221,221,.333)),linear-gradient(30deg,rgba(187,221,221,.333) 12%,transparent 12.5%,transparent 87%,rgba(187,221,221,.333) 87.5%,rgba(187,221,221,.333)),linear-gradient(150deg,rgba(187,221,221,.333) 12%,transparent 12.5%,transparent 87%,rgba(187,221,221,.333) 87.5%,rgba(187,221,221,.333)),linear-gradient(60deg,hsla(0,0%,100%,.333) 25%,transparent 25.5%,transparent 75%,hsla(0,0%,100%,.333) 0,hsla(0,0%,100%,.333)),linear-gradient(60deg,hsla(0,0%,100%,.333) 25%,transparent 25.5%,transparent 75%,hsla(0,0%,100%,.333) 0,hsla(0,0%,100%,.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,hsla(0,0%,100%,0) 45%,hsla(0,0%,100%,.933) 50%,hsla(0,0%,100%,0) 55%,hsla(0,0%,100%,0));background-size:250%;color:transparent;content:attr(data-text);text-shadow:0 1px 2px rgba(0,0,0,.6),-2px 2px 20px rgba(0,0,0,.067),2px 2px 20px rgba(0,0,0,.067),0 15px 35px rgba(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%}to{background-position:125%}}@-webkit-keyframes text-shine{0%{background-position:-200%}to{background-position:125%}}@keyframes background-shine{0%{background-position:-200%,50% 50%}to{background-position:125%,50% 50%}}@-webkit-keyframes background-shine{0%{background-position:-200%,50% 50%}to{background-position:125%,50% 50%}}@keyframes slot-selected{0%{outline-color:rgba(136,187,238,.333);outline-offset:-5px;outline-width:5px}to{outline-color:rgba(136,187,238,.467);outline-offset:-7px;outline-width:7px}}@-webkit-keyframes slot-selected{0%{outline-color:rgba(136,187,238,.333);outline-offset:-5px;outline-width:5px}to{outline-color:rgba(136,187,238,.467);outline-offset:-7px;outline-width:7px}}@keyframes slot-exploding{0%,to{box-shadow:inset 0 0 0 hsla(0,0%,100%,.2),0 0 0 rgba(255,221,221,.333)}15%,25%{box-shadow:inset 0 0 200px hsla(0,0%,100%,.2),0 0 50px rgba(255,221,221,.333)}}@-webkit-keyframes slot-exploding{0%,to{box-shadow:inset 0 0 0 hsla(0,0%,100%,.2),0 0 0 rgba(255,221,221,.333)}15%,25%{box-shadow:inset 0 0 200px hsla(0,0%,100%,.2),0 0 50px rgba(255,221,221,.333)}}@keyframes jewel-arriving{0%{transform:translate3d(0,-100vh,0)}to{transform:translateZ(0)}}@-webkit-keyframes jewel-arriving{0%{transform:translate3d(0,-100vh,0)}to{transform:translateZ(0)}}@keyframes jewel-falling{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@-webkit-keyframes jewel-falling{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes jewel-exploding{0%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1.15)}to{opacity:0;transform:scale(.25) translate3d(0,5%,0)}}@-webkit-keyframes jewel-exploding{0%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1.15)}to{opacity:0;transform:scale(.25) translate3d(0,5%,0)}}@keyframes jewel-brightening{0%{filter:brightness(1)}to{filter:brightness(1.2)}}@-webkit-keyframes jewel-brightening{0%{filter:brightness(1)}to{filter:brightness(1.2)}}@keyframes star-blinking{0%{transform:translateX(-50%);filter:brightness(1) drop-shadow(0 0 .5px rgba(255,255,255,.667))}to{transform:translateX(-50%) scale(.9);filter:brightness(1.075) drop-shadow(0 0 1px rgba(255,255,255,.667))}}@-webkit-keyframes star-blinking{0%{transform:translateX(-50%);filter:brightness(1) drop-shadow(0 0 .5px rgba(255,255,255,.667))}to{transform:translateX(-50%) scale(.9);filter:brightness(1.075) drop-shadow(0 0 1px rgba(255,255,255,.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,.333);border-radius:10px;cursor:default;box-shadow:inset 0 5px 30px rgba(0,0,0,.467);backdrop-filter:blur(7px);transition:opacity .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,.467);cursor:grabbing;animation:slot-selected .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 .5s ease}board-slot:nth-child(2n){background:rgba(17,17,17,.467)}board-slot:nth-child(odd){background:rgba(0,0,0,.467)}board-slot[locked]{border:3px solid rgba(51,51,51,.333);background:transparent;cursor:default}board-slot.exploding{animation:slot-exploding .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 .2s cubic-bezier(.25,.25,.5,1.1) forwards}jewel-piece.falling,jewel-piece.moving{transition:transform .1s cubic-bezier(.25,.25,.5,1.1)}jewel-piece.flipping{transition:transform .15s ease-in}jewel-piece.exploding{animation:jewel-exploding .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,.3),rgba(250,170,165,.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,.4),rgba(255,218,106,.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,.5),rgba(247,141,77,.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,.5),rgba(236,140,253,.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,.4),rgba(185,219,146,.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,.4),rgba(106,167,245,.55))}jewel-piece[promoted]:not(.arriving):not(.falling):not(.exploding) .shape{animation:jewel-brightening .5s ease .75s infinite alternate backwards}jewel-piece[promoted]:after{position:absolute;left:50%;z-index:2;width:175%;height:175%;background-position:50%;background-size:100% 100%;content:"";transform:translate3d(-50%,0,0);pointer-events:none}jewel-piece[promoted=smoke]{filter:drop-shadow(0 0 15px rgba(204,204,204,.333)) drop-shadow(0 4px 8px rgba(221,221,221,.667)) drop-shadow(0 2px 8px #555)}jewel-piece[promoted=smoke]:after{top:-12%;width:115%;height:115%;filter:brightness(5) contrast(1.2) opacity(.5)}jewel-piece[promoted=fire]{filter:drop-shadow(0 0 8px rgba(255,193,7,.333)) drop-shadow(0 4px 8px rgba(255,193,7,.667)) drop-shadow(0 2px 8px #f00)}jewel-piece[promoted=fire]:after{bottom:16%;left:52%;width:170%;height:140%;filter:saturate(2) brightness(1.2) contrast(1.25) opacity(1)}jewel-piece[promoted=fire][type=heptagon]:after{bottom:26%}jewel-piece[promoted=star]:after{animation:star-blinking .85s ease .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,hsla(0,0%,100%,.733),hsla(0,0%,100%,.133));mix-blend-mode:lighten}jewel-piece[promoted=rainbow]{padding:8px}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,hsla(0,0%,100%,.333),hsla(0,0%,100%,.133),hsla(0,0%,100%,0),hsla(0,0%,100%,.333),hsla(0,0%,100%,.2),hsla(0,0%,100%,0),hsla(0,0%,100%,.333),hsla(0,0%,100%,.133),hsla(0,0%,100%,0),hsla(0,0%,100%,.333),hsla(0,0%,100%,.2),hsla(0,0%,100%,0),hsla(0,0%,100%,.333)),linear-gradient(90deg,#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,hsla(0,0%,100%,.333),hsla(0,0%,100%,.133),hsla(0,0%,100%,0),hsla(0,0%,100%,.333),hsla(0,0%,100%,.2),hsla(0,0%,100%,0),hsla(0,0%,100%,.333),hsla(0,0%,100%,.133),hsla(0,0%,100%,0),hsla(0,0%,100%,.333),hsla(0,0%,100%,.2),hsla(0,0%,100%,0),hsla(0,0%,100%,.333)),linear-gradient(90deg,#e85f0b,#ffc107,#8bc34a,#0f6de6,#e040fb,#f44336)}jewel-piece[promoted=rainbow] .shape:after{background:linear-gradient(130deg,hsla(0,0%,100%,.133),hsla(0,0%,100%,.2));backdrop-filter:blur(4px)}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)}