<div class="board  loaded">
  <div class="home"></div>  
  <div class="base r ">
     <div class="inner sparks"> 
        <div class="token red animate__animated animate__tada"> </div>  
     </div>
  </div>
  <div class="base g">
     <div class="inner ">  
        <div class="token green animate__animated animate__tada"> </div>
        <div class="token green animate__animated animate__tada"> </div>
        <div class="token green animate__animated animate__tada"> </div> 
     </div>
  </div>
  <div class="base y">
     <div class="inner  "> 
        <div class="token yellow animate__animated animate__tada"> </div> 
        <div class="token yellow animate__animated animate__tada"> </div>
        <div class="token yellow animate__animated animate__tada"> </div> 
     </div>
  </div>
  <div class="base b">
     <div class="inner "> 
        <div class="token blue animate__animated animate__tada"> </div>
        <div class="token blue animate__animated animate__tada"> </div> 
     </div>
  </div>
     
  <div class="cell race-1 safe-zone start-r " title="1"> 
    <div class="inner"><div class="token red animate__animated animate__tada"> </div> </div>
   
   </div>
   <div class="cell race-2" title="2"></div>
  <div class="cell race-3" title="3"></div>
  <div class="cell race-4" title="4">
    <div class="inner">
      <div class="token red animate__animated animate__tada"> </div> 
    <div class="token red animate__animated animate__tada"> </div> 
    </div>
    
  </div>
  <div class="cell race-5" title="5"></div>
  <div class="cell race-6" title="6"></div>
  <div class="cell race-7" title="7"></div>
  <div class="cell race-8" title="8"></div>
  <div class="cell race-9 safe-zone " title="9"></div>
  <div class="cell race-10" title="10"></div>
  <div class="cell race-11" title="11"></div>
  <div class="cell race-12   end-g" title="12"></div>
  <div class="cell race-13" title="13"></div>
  <div class="cell race-14 safe-zone start-g " title="14"></div>
  <div class="cell race-15" title="15"></div>
  <div class="cell race-16" title="16"></div>
  <div class="cell race-17" title="17"></div>
  <div class="cell race-18" title="18"></div>
  <div class="cell race-19" title="19"></div>
  <div class="cell race-20" title="20"></div>
  <div class="cell race-21" title="21"></div>
  <div class="cell race-22 safe-zone " title="22"></div>
  <div class="cell race-23" title="23"></div>
  <div class="cell race-24" title="24"></div>
  <div class="cell race-25   end-y" title="25"></div>
  <div class="cell race-26" title="26">
    <div class="inner">
      <div class="ficha green animate__animated animate__tada"> </div>
    </div>
  </div>
  <div class="cell race-27 safe-zone start-y " title="27"></div>
  <div class="cell race-28" title="28"></div>
  <div class="cell race-29" title="29"></div>
  <div class="cell race-30" title="30"></div>
  <div class="cell race-31" title="31"></div>
  <div class="cell race-32" title="32"></div>
  <div class="cell race-33" title="33"></div>
  <div class="cell race-34" title="34">
    <div class="inner">
      <div class="token yellow animate__animated animate__tada"></div> 
     </div>
  </div>
  <div class="cell race-35 safe-zone " title="35"></div>
  <div class="cell race-36" title="36"></div>
  <div class="cell race-37" title="37"></div>
  <div class="cell race-38   end-b" title="38"></div>
  <div class="cell race-39" title="39"></div>
  <div class="cell race-40 safe-zone start-b " title="40"></div>
  <div class="cell race-41" title="41"></div>
  <div class="cell race-42" title="42"></div>
  <div class="cell race-43" title="43"></div>
  <div class="cell race-44" title="44"> </div>
  <div class="cell race-45" title="45"></div>
  <div class="cell race-46" title="46"></div>
  <div class="cell race-47" title="47"></div>
  <div class="cell race-48 safe-zone " title="48">
    <div class="inner">
      <div class="token blue animate__animated animate__tada"> </div>
      <div class="token blue animate__animated animate__tada"> </div>
      <div class="token green animate__animated animate__tada"> </div>
     </div>
  </div>
  <div class="cell race-49" title="49"></div>
  <div class="cell race-50" title="50"></div>
  <div class="cell race-51   end-r" title="51"></div>
  <div class="cell race-52" title="52"></div>  
       
  <div class="r final">  
    <div  class="cell r-f-1 "> </div>
    <div  class="cell r-f-2 "> </div>
    <div  class="cell r-f-3 "> </div>
    <div  class="cell r-f-4 "> </div>
    <div  class="cell r-f-5 "> </div>
    <div  class="cell r-f-6 transparent "> </div>
  </div>
  <div class="g final">  
    <div  class="cell g-f-1 "> </div>
    <div  class="cell g-f-2 "> </div>
    <div  class="cell g-f-3 "> </div>
    <div  class="cell g-f-4 "> </div>
    <div  class="cell g-f-5 "> </div>
    <div  class="cell g-f-6 transparent "> </div>
  </div>
  <div class="y final">  
    <div  class="cell y-f-6 transparent "> </div>
    <div  class="cell y-f-5 "> </div>
    <div  class="cell y-f-4 "> </div>
    <div  class="cell y-f-3 "> </div>
    <div  class="cell y-f-2 "> </div>
    <div  class="cell y-f-1 "> </div>
  </div>
  <div class="b final">  
    <div  class="cell b-f-6 transparent "> </div>
    <div  class="cell b-f-5 "> </div>
    <div  class="cell b-f-4 "> </div>
    <div  class="cell b-f-3 "> </div>
    <div  class="cell b-f-2 "> </div>
    <div  class="cell b-f-1 "> </div>
  </div> 
</div>

<div  class="dice dice-r animate__animated "  >
  <div class="face-1 show">
    <span class="pip"></span>
  </div>
  <div class="face-2 ">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class=" face-3 ">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="face-4 ">
    <div class="col">
      <span class="pip"></span>
      <span class="pip"></span>
    </div>
    <div class="col">
      <span class="pip"></span>
      <span class="pip"></span>
    </div>
  </div>
  <div class="face-5 ">
    <div class="col">
      <span class="pip"></span>
      <span class="pip"></span>
    </div>
    <div class="col">
      <span class="pip"></span>
    </div>
    <div class="col">
      <span class="pip"></span>
      <span class="pip"></span>
    </div>
  </div>
  <div class="face-6 ">
    <div class="col">
      <span class="pip"></span>
      <span class="pip"></span>
      <span class="pip"></span>
    </div>
    <div class="col">
      <span class="pip"></span>
      <span class="pip"></span>
      <span class="pip"></span>
    </div>
  </div>
</div>

$red : #ea4330 ;
$green : #34a853 ;
$yellow : #fbbc05 ;
$blue :  #4285f4 ;
$gate-color : #fff ;
$base-color : #ddd ;
$border : #aaa ; 

$break-sm : 800px;

@mixin box-shadow($settings) {
    -moz-box-shadow: $settings;
    -webkit-box-shadow: $settings; 
    box-shadow: $settings;
} 
  
@mixin simbolo($color) {
      position: absolute;
      top: 5px;
      left:0; 
      right:0; 
      text-align:center; 
      color:  $color ;
      font-size: 30px ;
      line-height:30px; 
  
    @media (max-width: $break-sm) {

      top: 2px;
      font-size: 22px ;
      line-height:22px; 

    }
} 
  

@mixin create-token-color($color ){
    background: darken($color, 20%);  
    &::before {  
     background: darken($color, 10%);  
    }
    &:hover, &:hover::before{
      background: darken($color, 10%);  
    } 
}
  @mixin create-token($size, $margin ){
     position: relative;
    display:inline-block;
    height: $size ;
    width: $size ;
    background: gray;
    border-radius: $size/2;
    margin: $margin;   
    cursor: pointer;
    border: 2px solid transparent;
    
    &::before { 
       content: "";
       position: absolute;
       bottom:1px;
       left:1px;
       top:1px;
       right:1px;
       border-radius: $size ; 
    } 
    
    &.active{
      border: 2px solid $border;
    }
     
    &.red{
      @include create-token-color($red);
    }
    &.green{
       @include create-token-color($green);
    }
    &.blue{
       @include create-token-color($blue);
    }
    &.yellow{
      @include create-token-color($yellow);
    }
  }
  
@mixin gradient-circle($a, $b) {
   background-color: $a;
background: -moz-radial-gradient(circle, $a 0%,$b 100%);
background: -webkit-radial-gradient(circle, $a 0%,$b 100%);
background: radial-gradient(circle,$a 0%, $b 100%);
 
} 

* {
    padding: 0px;
    margin: 0px;
    font-family: Arial;
    box-sizing: border-box;
} 


html, body{   
  height: 100%; 
  width: 100%; 
}
html{  
  @include gradient-circle(#0b51c5, #001435); 
}

body{
  flex:1; 
  display:flex; 
  flex-wrap: wrap;
  align-items:center;
  justify-content: center; 
}

.board { 
  display: none;
  
  height: 600px; 
  width: 600px;  
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  gap: 0px 0px;
  //border: 1px solid $border;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
   transform:  perspective(1000px) rotateX(30deg);
   transition: all .4s ease 0s;
  
   @include box-shadow((0 20px 50px -6px rgba(0,0,0,0.4)));
   &:hover , &.static{
    transform: perspective(2000px) rotateX(0deg);
    @include box-shadow((0 0 60px -6px rgba(0,0,0,0.4)));
   }
  
  &.loaded{
    display: grid;
  } 
  
   & * { 
    position: relative;
  } 
 
  .base{
    display: block;   
    
    z-index:2;  
    .inner{
      background-color: #fff;
      position: absolute; 
      top: 40px;
      left: 40px;
      right: 40px;
      bottom: 40px;
      border-radius: .8rem; 
      
      flex-wrap: wrap;
      display:flex; 
      align-items: space-between;
      justify-content: space-between;
      flex:1; 
      
      .token{
         @include create-token(36px,20px ); 
      } 
    }
    
    &.r  {  
      grid-area: 1 / 1 / 7 / 7;  
      background: $red; 
    }

    &.g{  
      grid-area: 1 / 10 / 7 / 16; 
      background: $green; 
    }  

    &.b {   
      grid-area: 10 / 1 / 16 / 7;  
     background: $blue; 
    }

    &.y {  
      grid-area: 10 / 10 / 16 / 16;  
     background: $yellow; 
    }
     
  }


 
.race-1 { grid-area: 7 / 2 / span 1 / span 1; }  
.race-2 { grid-area: 7 / 3 / span 1 / span 1; }  
.race-3 { grid-area: 7 / 4 / span 1 / span 1; }  
.race-4 { grid-area: 7 / 5 / span 1 / span 1; } 
.race-5 { grid-area: 7 / 6 / span 1 / span 1; }  
.race-6 { grid-area: 6 / 7 / span 1 / span 1; } 
.race-7 { grid-area: 5 / 7 / span 1 / span 1; } 
.race-8 { grid-area: 4 / 7 / span 1 / span 1; } 
.race-9 { grid-area: 3 / 7 / span 1 / span 1; } 
.race-10 { grid-area: 2 / 7 / span 1 / span 1; } 
.race-11 { grid-area: 1 / 7 / span 1 / span 1; } 
.race-12 { grid-area: 1 / 8 / span 1 / span 1; } 
.race-13 { grid-area: 1 / 9 / span 1 / span 1; } 
.race-10 { grid-area: 2 / 7 / span 1 / span 1; } 
.race-14 { grid-area: 2 / 9 / span 1 / span 1; }
.race-15 { grid-area: 3 / 9 / span 1 / span 1; }
.race-16 { grid-area: 4 / 9 / span 1 / span 1; }
.race-17 { grid-area: 5 / 9 / span 1 / span 1; }
.race-18 { grid-area: 6 / 9 / span 1 / span 1; } 
.race-19 { grid-area: 7 / 10 / span 1 / span 1; }
.race-20 { grid-area: 7 / 11 / span 1 / span 1; }
.race-21 { grid-area: 7 / 12 / span 1 / span 1; }
.race-22 { grid-area: 7 / 13 / span 1 / span 1; }
.race-23 { grid-area: 7 / 14 / span 1 / span 1; }
.race-24 { grid-area: 7 / 15 / span 1 / span 1; }
.race-25 { grid-area: 8 / 15 / span 1 / span 1; }
.race-26 { grid-area: 9 / 15 / span 1 / span 1; }
.race-27 { grid-area: 9 / 14 / span 1 / span 1; }
.race-28 { grid-area: 9 / 13 / span 1 / span 1; }
.race-29 { grid-area: 9 / 12 / span 1 / span 1; }
.race-30 { grid-area: 9 / 11 / span 1 / span 1; }
.race-31 { grid-area: 9 / 10 / span 1 / span 1; }
.race-32 { grid-area: 10 / 9 / span 1 / span 1; }
.race-33 { grid-area: 11 / 9 / span 1 / span 1; } 
.race-34 { grid-area: 12 / 9 / span 1 / span 1; }
.race-35 { grid-area: 13 / 9 / span 1 / span 1; }
.race-36 { grid-area: 14 / 9 / span 1 / span 1; } 
.race-37 { grid-area: 15 / 9 / span 1 / span 1; } 
.race-38 { grid-area: 15 / 8 / span 1 / span 1; } 
.race-39 { grid-area: 15 / 7 / span 1 / span 1; } 
.race-40 { grid-area: 14 / 7 / span 1 / span 1; } 
.race-41 { grid-area: 13 / 7 / span 1 / span 1; } 
.race-42 { grid-area: 12 / 7 / span 1 / span 1; } 
.race-43 { grid-area: 11 / 7 / span 1 / span 1; } 
.race-44 { grid-area: 10 / 7 / span 1 / span 1; } 
.race-45 { grid-area: 9 / 6 / span 1 / span 1; }  
.race-46 { grid-area: 9 / 5 / span 1 / span 1;  }
.race-47 { grid-area: 9 / 4 / span 1 / span 1; }
.race-48 { grid-area: 9 / 3 / span 1 / span 1; }
.race-49 { grid-area: 9 / 2 / span 1 / span 1; }
.race-50 { grid-area: 9 / 1 / span 1 / span 1; }
.race-51 { grid-area: 8 / 1 / span 1 / span 1; }
.race-52 { grid-area: 7 / 1 / span 1 / span 1; }


.home { 
  grid-area: 7 / 7 / 10 / 10; 
  border: 60px solid $border   ;
  border-left-color: $red;
  border-top-color: $green;
  border-right-color: $yellow;
  border-bottom-color: $blue; 
  z-index: 1;
 }
  
.r.final,.y.final {
  grid-area: 8 / 2 / 9 / 8; 
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows:   1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: $red;
}   
  .y.final {
    grid-area: 8 / 9 / 9 / 15; 
   background-color: $yellow;
  }
   
 
 .b.final, .g.final {
  grid-area: 9 / 8 / 15 / 9; 
  display: grid;
  grid-template-columns:1fr ;
  grid-template-rows:  repeat(6, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: $blue;
}   
.g.final {
  grid-area: 2 / 8 / 8 / 9; 
  background-color: $green;
} 

  
.cell{  
  border: 1px solid $border;   
  z-index: 2;  
  flex-wrap: wrap;
  display:flex; 
  align-items: center;
  justify-content: center;
  flex:1  ;  
  
  .inner{
    flex-wrap: wrap;
    display:flex; 
    align-items: center;
    justify-content: center;
    flex:1 ; 
    position: absolute;
     top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    
    .token{
      @include create-token(13px, 1px );
      z-index:10;
    }
  }
   
  &.transparent{
    border: 1px solid transparent; 
    background: transparent;
  }
  
  &.safe-zone{  
    &::before {
       content:  "★";
      @include simbolo((darken($base-color , 10%)));
    }
  }  
  
  &.start-r {
    background: $red;
    &::before { color:  lighten($red , 10%); }
  }
  &.start-b {
    background: $blue;
    &::before { color:  lighten($blue , 10%); }
  }
  &.start-g {
    background: $green;
    &::before { color:  lighten($green , 10%); }
  }
  &.start-y {
    background: $yellow;
    &::before { color:  lighten($yellow , 10%); }
  }
  
  
  &.end-r {  
    &::before { 
       content:  "\1F846";
      @include simbolo($red); 
    }
  }
  &.end-b {
   &::before { 
       content:  "\1F845";
      @include simbolo($blue); 
    }
  }
  &.end-g {
    &::before { 
       content:  "\1F847";
      @include simbolo($green); 
    }
  }
  &.end-y {
    &::before { 
       content:  "\1F844";
      @include simbolo($yellow); 
    }
  }
   
 }
  
}


$particles: 80;
$width: 600;
$height: 600; 
// Create the explosion...
$box-shadow: ();
$box-shadow2: ();
@for $i from 0 through $particles {
  $box-shadow: $box-shadow,
               random($width)-$width / 2 + px
               random($height)-$height / 1.2 + px
               hsl(random(360), 100, 50);
  $box-shadow2: $box-shadow2, 0 0 #fff600
}
@mixin keyframes ($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    } 
    @-moz-keyframes #{$animationName} {
        @content;
    } 
    @-o-keyframes #{$animationName} {
        @content;
    } 
    @-ms-keyframes #{$animationName} {
        @content;
    }  
    @keyframes #{$animationName} {
        @content;
    }
}

@mixin animation-delay ($settings) {
    -moz-animation-delay: $settings;
    -webkit-animation-delay: $settings;
    -o-animation-delay: $settings;
    -ms-animation-delay: $settings;
    animation-delay: $settings;
}

@mixin animation-duration ($settings) {
    -moz-animation-duration: $settings;
    -webkit-animation-duration: $settings;
    -o-animation-duration: $settings;
    -ms-animation-duration: $settings;
    animation-duration: $settings;
}

@mixin animation ($settings) {
    -moz-animation: $settings;
    -webkit-animation: $settings;
    -o-animation: $settings;
    -ms-animation: $settings;
    animation: $settings;
}

@mixin transform ($settings) {
    transform: $settings;
    -moz-transform: $settings;
    -webkit-transform: $settings;
    -o-transform: $settings;
    -ms-transform: $settings;
}

 

.sparks::before, .sparks::after {
  content:'';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: $box-shadow2;
  @include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
}
    
.sparks::after {
  @include animation-delay((1.25s, 1.25s, 1.25s));
  @include animation-duration((1.25s, 1.25s, 6.25s));
}
        
@include keyframes(bang) {
  to {
    box-shadow:$box-shadow;
  }
}
    
@include keyframes(gravity)  {
  to {
    @include transform(translateY(200px));
    opacity: 0;
  }
}
    
@include keyframes(position) {
  0%, 19.9% {
    margin-top: 50%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 60%;
    margin-left: 30%;
  }
  40%, 59.9% {  
    margin-top: 30%;
    margin-left: 70%
  }
  60%, 79.9% {  
    margin-top: 50%;
    margin-left: 20%;
  }
  80%, 99.9% {  
    margin-top: 80%;
    margin-left: 80%;
  }
}

//DICE 

.dice {
  position: fixed;   
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  flex-wrap: wrap;
  align-content: center; 
  background: linear-gradient(top, #222, #333); 
  cursor: pointer;  
  
  &.dice-r, &.dice-g{
      top: 50px; 
  } 
  &.dice-r, &.dice-b{
      left: 50px; 
  } 
  &.dice-g, &.dice-y{
      right: 50px; 
  }
  &.dice-b, &.dice-y{
      bottom: 50px; 
  }  

  .face-1, .face-2, .face-3, .face-4, .face-5, .face-6{ 
    padding: 5px; 
    background-color: #fff;
    width: 60px;
    height: 60px;
    object-fit: contain;  
    border-radius: 10%;
    display: none;  
    @include box-shadow((0 0 40px -10px rgba(0,0,0,0.4)));
    
    &.show, .col{ 
      display: flex;
    } 
    .pip {
      display: block;
      width: 14px;
      height: 14px;
      border-radius: 7px; 
      background-color: #333; 
    } 
  }
  
   &.dice-r .pip {
      background-color: $red; 
  }
   &.dice-g .pip {
      background-color: $green; 
  }
   &.dice-y .pip {
      background-color: $yellow; 
  }
   &.dice-b .pip {
      background-color: $blue; 
  }
  
  
  .face-1 { 
    justify-content: center;
    align-items: center;
  }

  .face-2 { 
    justify-content: space-between;
  }

  .face-2 .pip:nth-of-type(2) {
    align-self: flex-end;
  }

  .face-3 { 
    justify-content: space-between;
  }

  .face-3 .pip:nth-of-type(2) {
    align-self: center;
  }

  .face-3 .pip:nth-of-type(3) {
    align-self: flex-end;
  }

  .face-4, .face-6 { 
    justify-content: space-between;
  }

  .face-4 .col, .face-6 .col { 
    flex-direction: column;
    justify-content: space-between;
  }

  .face-5 { 
    justify-content: space-between;
  }

  .face-5 .col { 
    flex-direction: column;
    justify-content: space-between;
  }

  .face-5 .col:nth-of-type(2) {
    justify-content: center;
  }
  
} 

 
/* Tamaño del scroll */
::-webkit-scrollbar {
  width: 8px;
}

 /* Estilos barra (thumb) de scroll */
::-webkit-scrollbar-thumb {
  background: #111;
  border-radius: 4px;
  
  &:active {
    background-color: #333;
  } 
  &:hover {
    background-color: #222;
  }
}



 /* Estilos track de scroll */
::-webkit-scrollbar-track {
  background: white;  
  &:hover,  &:active {
    background:white;
  }

}



@media (max-width: $break-sm) {
  .board {
     width: 400px;
     height: 400px; 
     .base .inner{ 
      top: 25px;
      left: 25px;
      right: 25px;
      bottom: 25px; 
      .token{
         @include create-token(30px,12px ); 
      } 
       
    }
    .cell .inner .token{
         @include create-token(10px,1px);  
    }
    .home{
      border-width:40px;
    }
  }
}