:root{--paper-color: #c3c9a7;--game-color-1: #9e1717;--game-color-2: #4775b5;--game-color-3: #2e2e79}html,body{margin:0;width:100%;height:100%;background-color:var(--paper-color);overflow:hidden}*{position:relative;box-sizing:border-box;user-select:none}canvas{width:100%;height:100%}.game-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:row-reverse}.main{width:75%;height:100%;display:flex;align-items:center;justify-content:center;flex-grow:1;z-index:4;&:before{content:"";display:block;width:calc(100% - 4vmin);height:calc(100% - 4vmin);border:1vmin solid var(--game-color-1);position:absolute;border-radius:3vmin;opacity:0}&.lock:before{opacity:1}&.shake:before{animation:shake .82s cubic-bezier(.36,.07,.19,.97) both}}.aside{box-shadow:0 0 6px #000000b3;height:100%;width:50vmin;display:flex;flex-direction:column;flex-shrink:0;z-index:5;background-color:var(--paper-color);&:before{--s: 120px;--_g: radial-gradient(#0000 70%,#1a2030 71%);background:var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2),conic-gradient(#0f9177 25%,#fdebad 0 50%,#d34434 0 75%,#b5d999 0);background-size:var(--s) var(--s);content:"";display:block;position:absolute;width:200%;height:100%;box-shadow:inset 0 0 5px #000000b3,0 0 5px #000000b3;opacity:.7;bottom:0;right:1.8vmin;z-index:3}&:after{content:"";display:block;position:absolute;width:100%;height:100%;border-right:2vmin solid var(--game-color-1);right:0;z-index:2;opacity:.7}>div{z-index:4}}@media (max-aspect-ratio: 1.4){.game-wrap{flex-direction:column-reverse;font-weight:100}.main{width:100%;height:75%}.aside{height:25vmin;width:100%;flex-direction:row;&:before{right:0;bottom:1.9vmin}&:after{border-bottom:2vmin solid var(--game-color-1);border-right:unset;right:0;bottom:0}}}@keyframes wheelturn{0%{transform:translate3d(-50%,-50%,0) rotate(0)}to{transform:translate3d(-50%,-50%,0) rotate(-360deg)}}@keyframes shake{10%,90%{transform:translate3d(-.5vmin,0,0)}20%,80%{transform:translate3d(1vmin,0,0)}30%,50%,70%{transform:translate3d(-2vmin,0,0)}40%,60%{transform:translate3d(2vmin,0,0)}}.grid-wrap{display:flex;flex-wrap:wrap;width:auto;height:90%;flex-direction:column;justify-content:center;margin:0 auto;&.hidden{display:none}.card-wrap{max-height:calc(33% - 2vmin);height:calc(100% - 2vmin);width:auto;max-width:unset}}.card-wrap{max-width:calc(23% - 2vmin);aspect-ratio:1/1.5;margin:1vmin;width:calc(100% - 2vmin)}@media (min-aspect-ratio: 1.4){.grid-wrap.fs-4 .card-wrap{max-height:calc(50% - 2vmin)}}@media (min-aspect-ratio: 1.8){.grid-wrap.fs-9 .card-wrap{max-height:calc(40% - 2vmin)}.grid-wrap.fs-6 .card-wrap{max-height:calc(48% - 2vmin)}.grid-wrap.fs-3 .card-wrap{max-height:calc(51% - 2vmin)}}@media (min-aspect-ratio: 2.5){.grid-wrap.fs-12 .card-wrap{max-height:calc(45% - 2vmin)}.grid-wrap.fs-4 .card-wrap{max-height:calc(51% - 2vmin)}}@media (max-aspect-ratio: 1.4){.grid-wrap{flex-direction:row;width:100%;height:auto;.card-wrap{height:auto;width:100%;max-width:calc(26% - 2vmin)}}.grid-wrap.fs-6{width:84vmin}.grid-wrap.fs-6 .card-wrap{max-height:calc(48% - 2vmin);max-height:none}.grid-wrap.fs-4 .card-wrap,.grid-wrap.fs-3 .card-wrap{max-width:calc(23% - 2vmin)}}@media (max-aspect-ratio: 1){.grid-wrap{width:63vmax;.card-wrap{height:auto;width:100%;max-width:calc(25% - 2vmin);max-height:unset}}.grid-wrap.fs-6{width:64vmax}.grid-wrap.fs-6 .card-wrap{max-width:calc(26% - 2vmin)}.grid-wrap.fs-4 .card-wrap{max-width:calc(35% - 2vmin)}}@media (max-aspect-ratio: 1 / 1.4){.grid-wrap{width:50vmax;.card-wrap{height:auto;width:100%;max-width:calc(26% - 2vmin)}}.grid-wrap.fs-9 .card-wrap{max-width:calc(33% - 2vmin)}.grid-wrap.fs-4 .card-wrap{max-width:calc(35% - 2vmin)}.grid-wrap.fs-3 .card-wrap{max-width:calc(40% - 2vmin)}}@media (max-aspect-ratio: 1 / 1.8){.grid-wrap.fs-9 .card-wrap{max-width:calc(29% - 2vmin)}.grid-wrap.fs-6 .card-wrap{max-width:calc(34% - 2vmin)}}@media (max-aspect-ratio: 1 / 3.3){.grid-wrap.fs-9 .card-wrap{max-width:calc(38% - 2vmin)}.grid-wrap.fs-12 .card-wrap{max-width:calc(34% - 2vmin)}}.card{width:100%;height:100%;background-color:#a9a673;border:1vmin solid var(--game-color-2);transition:.3s all;border-radius:12px;overflow:hidden;box-shadow:0 0 4px #000c;&.selected{transform:rotate(25deg);transition:.3s all}&:after{content:"";display:block;position:absolute;border:.6vmin solid var(--game-color-2);width:calc(100% - 3vmin);height:calc(100% - 3vmin);left:50%;top:50%;transform:translate3d(-50%,-50%,0);opacity:.8}&.partial:after{border-style:dashed}&.none:after{border-style:double;border-style:none}&.color-1{border-color:var(--game-color-1)}&.color-1:after{border-color:var(--game-color-1)}&.color-3{border-color:var(--game-color-3)}&.color-3:after{border-color:var(--game-color-3)}&:before{content:"";display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:35%;height:75%;background-image:url(./cup-suit-VWKK75NG.png);background-size:auto 28%;background-repeat:space;image-rendering:pixelated;filter:drop-shadow(0 0 .3vmin rgba(0,0,0,.8))}&.cup.two:before{background-size:auto 40%;height:60%;width:38%}&.cup.one:before{background-size:auto 100%;height:22%}&.sword:before{background-image:url(./sword-suit-BJQX7DP7.png);background-size:auto 26%;height:56%;width:55%}&.sword.two:before{background-size:auto 34%;height:43%}&.sword.one:before{background-size:auto 92%;height:16%;width:55%}&.coin:before{background-image:url(./coin-suit-2KHOOQJR.png);background-size:auto 28%;width:35%}&.coin.two:before{background-size:auto 40%;height:60%;width:38%}&.coin.one:before{background-size:auto 100%;height:22%}}@media (max-width: 550px) or (max-height: 550px){.card{border-width:2vmin}.card:after{border-width:1vmin}}.title{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:8;background-color:#c3c9a7;cursor:pointer;&:before{content:"";display:block;position:absolute;inset:1vmin;border:.3vmin solid var(--game-color-2);opacity:.5}}.title-text{font-size:12vmin;color:#555;margin-bottom:5vh;word-spacing:1.4vmin;-webkit-text-stroke:.5vmin #333;:is(span){display:inline-block;&:first-letter{font-size:24vmin}}.king{color:#85a731;-webkit-text-stroke-color:#62620c}.v{color:var(--game-color-1);-webkit-text-stroke-color:#4e1212;font-size:10.5vmin;&:first-letter{letter-spacing:-6vmin}}.cards{color:#3c3758;-webkit-text-stroke-color:#0e153d;&:first-letter{letter-spacing:-.7vmin}}.of{font-size:8vmin;&:first-letter{font-size:8vmin}}}.title-in-aside-wrap{padding:2vmin 4vmin 0 2vmin;:first-letter{font-size:7vmin;letter-spacing:-.5vmin}.title-in-aside{background:var(--paper-color);padding:.4vmin;border:1vmin solid var(--game-color-3);display:flex;&:before{content:"";display:block;width:calc(100% - 2px - .8vmin);height:calc(100% - 2px - .8vmin);position:absolute;border:1px solid var(--game-color-3)}}.title-text{font-size:4vmin;-webkit-text-stroke:.2vmin #333;margin:0 auto;padding:2vmin;word-spacing:.4vh}.v,.king{font-size:4vmin;&:first-letter{font-size:5vmin;letter-spacing:-.5vmin}}.of{font-size:2vmin;&:first-letter{font-size:2vmin;letter-spacing:0}}.cards{font-size:4vmin;&:first-letter{font-size:5vmin;letter-spacing:-.5vmin}}}@media (max-aspect-ratio: 1.4) and (min-aspect-ratio: 1 / 1.3){.title-in-aside-wrap{padding:2vmin 0 4vmin 2vmin;height:100%}.title-in-aside{height:100%}}@media (max-aspect-ratio: 1 / 1.3){.title-in-aside-wrap{padding:2vmin 0 4vmin 2vmin;height:100%}.title-in-aside{height:100%}}@media (max-width: 300px){.title-wrap .title-text{font-size:12vmin;:is(span){&:first-letter{font-size:22vmin}}.v:first-letter{letter-spacing:-5vmin}}}.title-game-won{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:8;background-color:#c3c9a7;cursor:pointer;flex-direction:column;transform:translateZ(0);transition:all .6s;&.hidden{transform:translate3d(0,-130%,0)}&:before{content:"";display:block;position:absolute;inset:1vmin;border:.3vmin solid var(--game-color-2);opacity:.5}.not-true-end{width:80%;font-size:3.3vmin;top:-7vmin;text-align:center}.credits{font-size:3.6vmin}}.claim-results{background:rgba(0,0,0,1);background-color:#c3c9a7;position:absolute;width:100%;height:100%;z-index:9;top:0;left:0;display:flex;align-items:center;justify-content:center;transform:translateY(-200%);transition:all .6s ease-in-out}.claim-results.in{transform:translateY(0);opacity:1;.results-text{transform:translateY(0)}}.results-text{margin-bottom:5vmin;color:#85a731;-webkit-text-stroke:.5vmin #62620c;font-size:15vmin;transition:all .3s;transition-delay:.3s;line-height:.9;>div:first-letter{font-size:34vmin;letter-spacing:-5vmin}}.results-text.false{color:var(--game-color-1);-webkit-text-stroke-color:#4e1212;left:5vmin;:nth-child(2){left:-5vmin}}.results-text.missed{color:var(--game-color-1);-webkit-text-stroke-color:#4e1212;:nth-child(1){&:first-letter{letter-spacing:0}left:-4vmin}left:4vmin}.results-text.stolen{color:var(--game-color-1);-webkit-text-stroke-color:#4e1212;:nth-child(1){&:first-letter{letter-spacing:-1vmin}}}:root{--t: 10}@keyframes sand{0%{transform:translateY(0)}50%{transform:translateY(50%)}to{transform:translateY(100%)}}@keyframes sand2{0%{background-position-y:0%}to{background-position-y:88%}}.timer-card-wrap{position:absolute;height:80%;width:80%;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:1;.timer-card{transform:translate(-200%);transition:.3s all;width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:1vmin;width:calc(100% - 6vmin);left:4vmin;background-color:var(--paper-color);border:2vmin solid var(--game-color-2);box-shadow:0 0 4px #000c}.timer-wrap{width:22vmin;&:before{content:"";display:block;height:8.8vmin;width:.7vmin;left:48%;position:absolute;bottom:2vmin;z-index:1;background:linear-gradient(0deg,#fff,#fff 50%,transparent 50%,transparent);background-size:20px 2vmin;background-position-y:0%;animation:sand2 .3s linear infinite forwards}}&.in .timer-card{transform:translate(0)}&.flip .timer-wrap:before{opacity:0}&.flip .timer{transform:rotate3d(0,0,1,180deg)}&.flipped .timer{transform:rotate3d(0,0,1,0);transition:all 0s}&.fg-flip .timer .timer-fg{transform:rotate3d(0,0,1,180deg)}.timer{aspect-ratio:.88;height:100%;background-color:#5f6f5e;transform:rotate3d(0,0,1,0);transition:all .3s;.timer-fg{background:url(./hourglass-N665X5BL.png) no-repeat 0 0;image-rendering:pixelated;background-size:cover;transition:all 0s;aspect-ratio:.88;height:100%;z-index:2;transform:translateZ(0)}&:before,&:after{display:block;position:absolute;left:1.5vmin;right:1.5vmin;content:"";background-color:#fff;z-index:1}&:before{bottom:56%;height:calc(35% - calc(var(--t) * 3.5%))}&:after{bottom:6%;height:calc(2% + calc(var(--t) * 3.5%))}}}@media (max-aspect-ratio: 1.4){.timer-card-wrap{width:80%;top:54%;left:50%;transform:translate(-50%,-50%);.timer-card{width:100%;left:0;transform:translateY(-200%)}}}.claim-button-wrap{height:40%;padding:2vmin 4vmin 2vmin 2vmin;transform:translateZ(0);transition:all .6s;&.hidden{transform:translate3d(-100%,0,0)}&.struck{.claim-strike-button{transform:rotate3d(0,0,1,11deg)}}&.shake{animation:shake .82s cubic-bezier(.36,.07,.19,.97) both}}.claim-strike-button{padding:2vmin;background:var(--paper-color);width:100%;height:100%;font-size:6vmin;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;border:2vmin solid var(--game-color-1);box-shadow:0 0 4px #000c;transform:rotate3d(0,0,1,0);transition:all .3s;&:before{content:"";display:block;position:absolute;width:calc(100% - 4vmin);height:calc(100% - 4vmin);border:1vmin solid var(--game-color-1)}>div{color:var(--game-color-1);-webkit-text-stroke:.2vmin #4e1212;line-height:.9;&:first-letter{font-size:10.5vmin}}}@media (max-aspect-ratio: 1.4){.claim-button-wrap{width:20%;height:100%;padding:2vmin 2vmin 4vmin;&.hidden{transform:translate3d(0,-100%,0)}}.claim-strike-button{border:1vmin solid var(--game-color-1);font-size:3vmin;&:before{border:.6vmin solid var(--game-color-1);width:calc(100% - 2vmin);height:calc(100% - 2vmin)}>div{color:var(--game-color-1);-webkit-text-stroke-color:#4e1212;line-height:.9;&:first-letter{font-size:5.5vmin}}}}.match-info-wrap{height:20%;padding:2vmin 4vmin 0 2vmin;transform:translateZ(0);transition:all .6s;&.hidden{transform:translate3d(-100%,0,0)}.match-info{padding:.8vmin 2vmin 2vmin;background:var(--paper-color);width:100%;height:100%;font-size:3vw;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;border:2vmin solid var(--game-color-2);box-shadow:0 0 4px #000c;transform:rotate3d(0,0,1,0);transition:all .3s}.points{display:flex;width:100%;height:8vmin;justify-content:space-between;background-color:var(--game-color-1);&:before{display:block;content:"";background-color:var(--game-color-2);width:50%;height:100%;position:absolute;right:0}}.points-label{color:#3c3758;-webkit-text-stroke:.2vmin #0e153d;font-size:4vmin;margin-bottom:.4vmin}.points>div{width:2vmin;height:2vmin;aspect-ratio:1;background:url(./coin-suit-2KHOOQJR.png) no-repeat center center;background-size:cover;top:1px;&:after{display:block;content:"";background:url(./sword-suit-v-LBR3UWAH.png) no-repeat center center;width:1.6vmin;background-size:cover;aspect-ratio:1/3;image-rendering:pixelated;position:absolute;top:2.9vmin;right:.2vmin;transform:rotate(180deg);filter:drop-shadow(0 0 2px black);opacity:0}&.active:after{opacity:1}}}@media (max-aspect-ratio: 1.4){.match-info-wrap{width:25%;height:100%;padding:2vmin 0 4vmin 2vmin;&.hidden{transform:translate3d(0,-100%,0)}.match-info{border:1vmin solid var(--game-color-2)}.points>div{width:1vmin;height:1vmin;&:after{right:-.4vmin}}}}.match-results-wrap{position:absolute;width:100%;height:100%;top:0;left:0;transform:translate3d(0,-130%,0);transition:all .6s;.match-results{padding:.8vmin 2vmin 2vmin;background:var(--paper-color);width:100%;height:100%;font-size:3vw;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;border:2vmin solid var(--game-color-1);box-shadow:0 0 4px #000c;transform:rotate3d(0,0,1,0)}&.loss{transform:translateZ(0);.match-results .heading{color:var(--game-color-1);-webkit-text-stroke:.3vmin #4e1212;font-size:15vmin;line-height:1;:first-letter{font-size:20vmin}}}&.win{transform:translateZ(0);.match-results{border:2vmin solid #85a731}.match-results .heading{color:#85a731;-webkit-text-stroke:.3vmin #62620c;font-size:15vmin;line-height:1;:first-letter{font-size:20vmin}}}}.wheel-wrap{width:100%;height:100%;background-color:var(--paper-color);z-index:9;position:absolute;top:0;left:0;transform:translateZ(0);transition:all .6s;&.hidden{transform:translate3d(0,-130%,0)}.wheel{width:100%;height:100%}.wheel-card{width:100%;height:100%;aspect-ratio:1;background-color:var(--paper-color);z-index:100;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0);color:var(--game-color-3);color:#3c3758;-webkit-text-stroke:.5vmin #0e153d;font-size:7vmin;z-index:8;text-align:center;border:2vmin solid var(--game-color-3);padding-top:5vmin;&:first-letter{font-size:15vmin;letter-spacing:-1.8vmin}&:before{content:"";display:block;background:url(./wheel-VF4BERQ5.png) no-repeat 50% 50%;background-size:cover;image-rendering:pixelated;z-index:100;position:absolute;top:48%;left:50%;transform:translate3d(-50%,-50%,0) rotate(0);animation:wheelturn 5.3s steps(30,end) infinite reverse;width:50vmin;aspect-ratio:1}.travel-text{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-530%)}.destination-text{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,370%)}}}@media (max-aspect-ratio: 1.4){.wheel-wrap{.wheel-card{&:before{width:30vmin}.travel-text{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-370%)}.destination-text{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,240%)}}}}@media (max-aspect-ratio: 1 / 1.4){.wheel-wrap .wheel-card{.travel-text{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-490%)}.destination-text{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,290%)}}}.match-list-wrap{position:absolute;width:100%;height:100%;top:0;left:0;transform:translateZ(0);transition:all .6s;border:2vmin solid var(--game-color-2);background:var(--paper-color);box-shadow:0 0 4px #000c;&.hidden{transform:translate3d(0,-130%,0)}.heading{color:#3c3758;-webkit-text-stroke:.3vmin #0e153d;font-size:8vmin;padding:2vmin;text-align:center;width:100%;>div{display:inline-block}>div:first-letter{font-size:11vmin}}.match-list{padding:.8vmin 8vmin;width:100%;height:80%;font-size:4.5vmin;text-align:center;align-items:start;justify-content:start;flex-direction:column;overflow-y:auto;>div{display:flex;width:100%;margin-bottom:2vmin;justify-content:center}}}@media (max-aspect-ratio: 1.4){.match-list-wrap{.match-list{height:70%}}}@media (max-aspect-ratio: 1 / 1.3){.match-list-wrap{.match-list{>div{margin-bottom:4vmin;font-size:5.5vmin}}}}.match-options-wrap{position:absolute;width:100%;height:100%;top:0;left:0;transform:translateZ(0);transition:all .6s;background:var(--paper-color);box-shadow:0 0 4px #000c;display:flex;align-items:center;&.hidden{transform:translate3d(0,-130%,0)}.heading{color:#3c3758;-webkit-text-stroke:.3vmin #0e153d;font-size:8vmin;padding:2vmin;text-align:center;width:100%;>div{display:inline-block}>div:first-letter{font-size:11vmin}}.match-options{padding:.8vmin 8vmin;width:100%;font-size:2.5vw;text-align:left;align-items:center;justify-content:start;flex-direction:column;color:#3c3758;-webkit-text-stroke:.3vmin #0e153d;display:flex;padding-bottom:8vh;>div{display:flex;width:100%;margin-bottom:2vmin;justify-content:center}}.match-options-label{font-size:8vmin}.match-options-cards,.match-options-points{>div{border:.4vmin solid black;width:10vmin;aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin:0 3vmin 3vmin;font-size:8vmin;&.active{border:1vmin solid black}}}.match-options .match-options-confirm{display:inline-block;font-size:8vmin;border:2vmin solid var(--game-color-2);width:auto;padding:2vmin 4vmin;margin-top:2vmin}}