Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                // checkboxes to control states and variables
- var n = 1;
  while n < 5
    input(type="radio", name="players", id="players"+n, checked=(n == 1), value=(n++))
- var n = 1;
  while n < 5
    input(type="radio", name="turn", id="turn"+n, checked=(n==1), value=(n++))
- var n = 1;
  while n < 5
    input(type="radio", name="colors", checked=(n == 1), id="colors"+(n++))
input(type="checkbox", id="game-time", class="game-time", name="game-time")
input(type="checkbox", name="show-info", id="show-info")
- var n = 1;
  while n < 6
    input(type="radio", id="show-instructions-"+(n++), class="game-time", name="show-instructions")

// inputs and labels that control the piece position for player 1
each players in [1,2,3,4]
  - var n = 0;
  while n < 107
    input(type="radio", name="cb-player"+players, id="cb-pl"+players+"-"+n, class="cb", checked=(n==0))
    label.dice(for="cb-pl"+players+"-"+(n++))
  
// game settings menu (# of players, colors) 
#options.scrim
  .box
    h1 Harry Potter CSS Game
    div
      h2 Number of players
      div.flex.option-players
        - var n = 1;
        while n < 5
          label(for="players"+n) #{n++}
      h2 Characters
      div.option-colors
        - var n = 1;
        while n < 5
          label.flex(for="colors"+(n++))
            span
            span
            span
            span
            span
      div
        label.option-start(for="show-instructions-1") START GAME
        
// pop-up with information about the game and the author
#info.scrim
  .box
    h1 About
    div
      p This Harry Potter game is based on Snakes and Ladders, an ancient Indian board game regarded today as a worldwide classic. The ladders have been replaced with flying brooms and the snakes are basilisks. The object of the game is to navigate one's game piece, according to die rolls, from the start (bottom square) to the finish (top square), helped or hindered by brooms and basilisks respectively.
        sup
          a(href="https://en.wikipedia.org/wiki/Snakes_and_Ladders", target="_blank") [1]
      p This version was developed by 
        a(href="https://alvaromontoro.com", target="_blank") Alvaro Montoro 
        | using HTML and CSS, to practice Pug and Sass (for simplicity, they compile to standard HTML and CSS), and without any line of JavaScript code.
      p The idea behind this project is that many classic board games are actually Finite-State Machines (FSM), so they can be recreated simulating the states of the automaton with radio buttons, labels, and some CSS styling.
      p
        label#close-button(for="show-info") Close

// animated instructions section
#instructions
  label#go-to-game(for="game-time") SKIP INSTRUCTIONS &rsaquo;
  #step
    div 
      label(for="show-instructions-2")
      label(for="show-instructions-3")
      label(for="show-instructions-4")
      label(for="show-instructions-5")
      label(for="game-time") PLAY &rsaquo;
      
// the game section: board, dice, snakes, ladders, and all that jazz...
#game
  #player-info.tab
    span Player
  div#action.tab
    label#turn-changer1(for="turn1")
    label#turn-changer2(for="turn2")
    label#turn-changer3(for="turn3")
    label#turn-changer4(for="turn4")
  label#more-info.tab(for="show-info")
  // Board based on the one from codewars: https://www.codewars.com/kata/snakes-and-ladders-1 
  #board
    each val in [100,99,98,97,96,95,94,93,92,91,81,82,83,84,85,86,87,88,89,90,80,79,78,77,76,75,74,73,72,71,61,62,63,64,65,66,67,68,69,70,60,59,58,57,56,55,54,53,52,51,41,42,43,44,45,46,47,48,49,50,40,39,38,37,36,35,34,33,32,31,21,22,23,24,25,26,27,28,29,30,20,19,18,17,16,15,14,13,12,11,1,2,3,4,5,6,7,8,9,10]
      div(class="tile tile"+val, data-index=val)
    svg#snakeladders(viewBox="0 0 600 600", preserveAspectRatio="none")
      g.ladders-big
        path(d="M89,574 140,392 M388,581 385,508 M449,552 554,395 M320,516 333,444 M24,436 74,329 M430,458 210,99  M264,393 214,339  M563,284 391,203 M570,149 559,31 M142,158 155,40 M397,101 379,30")
      g.ladders-small
        path(d="M88,567 94,585 M91.5,568 87,584 M90,569 80,584 M94,568 77,583 M90,569 83,586 M90,569 91,587 \
        M384,575 396,589 M388,575 391.5,590 M388,575 388,592 M387,575 385,591 M392,575 381,590 \
        M450,546 450,565 M452,546 446,564 M452,546 442,562 M455,546 438,561 M456,548 436,558 \
        M318,510 325,528 M322,510 320,529 M322,510 316,529 M322,510 312,528 M325,510 308,527 \
        M263,387 266,405 M259,388 273,407 M259,388 278,406 M257,392 287,405 \
        M24,430 27,456 M27,430 23,455 M26,430 18,456 M27,431 12,454 M30,431 8,451 M26,431 15,453 \
        M423,454 444,467 M427,453 438,470 M427,453 443,471 M427,453 436,472 M431,453 432,473 \
        M140,152 150,170 M143,152 145,171 M143,152 141,170 M142,152 137,171 M146,152 133,170 \
        M393,95 408,112 M396,95 404,113 M396,95 400,115 M396,95 396,114.5 M399,95 393,112 \
        M567,143 580,162 M570,143 576,164 M569,143 572,163 M569,143 569,165 M572,143 565,164 \
        M555,283 577,280 M556,282 579,284 M556,282 576,288 M555,282 577,292 M556,277 571.6,295")
      path(d="M20,42 28,42 28,35 32,35 32,42 40,42 40,32 45,32 30,20 15,32 20,32 Z M20,578 30,578 30,583 40,570 30,557 30,562 20, 562Z", fill="rgba(0,0,0,0.25)")
      path.snake(d="M 90,226 C 98,257 69,322 128,332 187,342 181,381 120,382 59,383 53,425 54,433 56,450 87,467 87,481 87,495 76,506 76,512 84,505 95,496 96,480 97,464 60,447 64,425 68,403 99,392 134,391 169,390 219,344 131,322 94,313 100,279 101,256 102,233 101,229 100,225 105,223.62 106,214 96,210 86,205 65.75,211 83,223 85.88,225 88,226 90,226 Z", fill="#73880A")
      circle.eye(cx=97, cy=212, r=5)
      path.snake(d="M 22,282 C 35,271 58,266 81,273 104,280 144,278 145,253 146,228 175,208 193,213 204,198 220,210 220,216 220,222 201,229 193,221 182,222 157,229 156,252 155,275 139,297 86,281 33,268 22,283 22,283 Z", fill="#D15600")
      circle.eye(cx=203, cy=210, r=5)
      path.snake(d="M 453,271 C 433,285 396,289 400,261 405,233 394,223 369,223 343,224 319,167 376,161 379,168 401,168 402,156 403,143 376,143 375,152 300,162 333,233 366,233 402,233 388,258 389,266 390,281 414,309 453,272 Z", fill="#6BBA70")
      circle.eye(cx=387, cy=148, r=5)
      path.snake(d="M 457,199 C 429,161 465,134 489,158 512,182 542,159 540,129 538,99 523,98 522,98 528,91 505,75 495,97 503,113 518,105 519,105 519,105 530,110 531,130 532,150 513,169 492,149 471,129 445,143 443,159 442,174 449,194 457,200 Z", fill="#C79810")
      circle.eye(cx=512, cy=90, r=5)
      path.snake(d="M 441,95 C 457,93 479,72 445,52 415,33 434,16 451,16 468,16 489,39 492,40 495,28 521,33 521,43 521,54 496,54 490,48 490,48 466,23 450,25 434,27 439,43 459,51 479,61 473,101 441,96 Z", fill="#356AA0")
      circle.eye(cx=504, cy=35, r=5)
      path.snake(d="M 278,457 C 291,438 262,428 247,444 230,464 193,450 231,420 256,400 300,425 335,395 349,381 334,338 334,338 334,338 348,325 325,324 301,322 306,341 326,340 334,358 346,401 285,401 231,401 205,416 205,446 206,472 244,462 250,452 258,441 281,435 278,458 Z", fill="#3F4C6B")
      circle.eye(cx=327, cy=325, r=5)
      path.snake(d="M 343,584 C 352,567 344,553 320,553 296,553 286,562 279,568 272,573 238,592 238,558 237,524 253,517 253,517 253,517 270,517 270,509 270,498 238,501 247,514 227,537 230,556 230,561 229,567 239,605 281,575 324,544 349,562 343,585 Z", fill="#008C00")
      circle.eye(cx=257, cy=503, r=5)
      path.snake(d="M 572,506 C 555,514 511,516 518,456 526,396 518,380 490,388 457,397 436,346 492,335 507,341 518,334 518,326 518,317 494,313 489,326 422,337 448,410 489,398 525,384 510,449 510,456 510,462 502,547 572,508 Z", fill="#D01F3C")
      circle.eye(cx=503, cy=320, r=5)
      path.snake(d="M 19,138 C 45,154 84,152 63,119 43,87 59,85 79,84 99,83 103,77 94,40 85,46 73,39 72,32 72,25 109,13 102,35 117,69 108,100 79,94 52,88 70,114 73,118 82,127 83,190 18,138 Z", fill="#2096cE")
      circle.eye(cx=89, cy=27, r=5)
      path.snake(d="M 322,152 C 302,168 282,153 285,137 287,120 287,121 275,110 263,99 295,79 291,62 287,45 297,30 318,38 324,51 346,48 346,39 347,30 327,20 320,31 295,18 274,33 280,57 286,82 252,86 262,111 265,118 280,122 275,137 271,148 291,185 322,154 Z", fill="#CC4444")
      circle.eye(cx=330, cy=30, r=5)
    each player in [1,2,3,4]
      div.piece(id="piece-player-"+player, viewBox="0 0 100 100")

#snake-popup.scrim 
  div.box
    h1 Basilisk!
    div Oh no! You were attacked by a monster from the Chamber of Secrets! You'll have to move your piece to the basilisk's tail.
      div
        each players in [1,2,3,4]
          each val, index in {16:6, 46:25, 49:11, 62:19, 64:60, 74:53, 89:68, 92:88, 95:75, 99:80}
            label(id="snake-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Move Down
    svg(viewBox="0 0 100 100")
      path(d="M1,32 4,32 M6,34 4,32 M4,32 10,20", stroke="black", stroke-width="1")
      path(d="M 30,70 C 49,56 60,84 33,92 -17,103 0,50 24,45 32,44 37,41 29,27 26,33 5,35 3,24 4,13 26,3 37,16 49,30 49,52 28,55 8,59 0,94 33,82 56,72 35,66 30,71 Z", fill="#73B80A", stroke-width="0")
      circle(cx=18, cy=15, r=5, fill="black", stroke="white", stroke-width=6)
      
    
#ladder-popup.scrim
  div.box
    h1 Broom!
    div Yay! You found a flying broom! Hop on and fly to the next tile now.
      div
        each players in [1,2,3,4]
          each val, index in {2:38, 7:14, 8:31, 15:26, 21:42, 28:84, 36:44, 51:67, 71:91, 78:98, 87:94}
            label(id="ladder-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Move Up
    svg(viewBox="0 0 100 100")
      path(d="M13,80 28,10", stroke="#8B4513", stroke-width="10", "stroke-linecap"="round")
      path(d="M16,80 18,100 M15,80 13,100 M14,78 9,99 M13,79 3,100 M10,80 -2,99", stroke="#aB6533", stroke-width="3", "stroke-linecap"="round")
      path(d="M8,81 17,82", stroke="#aB8533", stroke-width="3", "stroke-linecap"="round")
      
#home-popup.scrim
  div.box
    h1 Home
    div You made it to the end of the maze, but you didn't do it in an exact jump so you will bounce back the remaining tiles.
      div
        each players in [1,2,3,4]
          each val, index in {101:99, 102:98, 103:97, 104:96, 105:95, 106:94}
            label(id="home-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Bounce back
    svg(viewBox="0 0 100 100")
      path(d="M12,85 12,40 5,40 30,5 55,40 48,40 48,85 35,85 35,60 25,60 25,85 Z", fill="#8Ba5f3")
      path(d="M30,65 C 30,60 25,55 20,55 15,55 10,60 10,65 10,70 15,75 20,75 20,75 20,75 50,75 M40,65 50,75 40,85", stroke="#eeee60", stroke-width=6, fill="none")
      
#congratulations.scrim
  div.box
    h1 Congratulations!
    div You made it to the end of the maze! You won the TriWizard Cup!
    div Reload the page to play again.
    svg(viewBox="0 0 100 100")
      path(d="M5,10 C 5,10 65,10 65,10 65,10 65,40 65,40 65,50 55,70 35,70 15,70 5,50 5,40 Z", fill="#fede60")
      path(d="M35,40 35,85 M20,85 50,85", stroke="#fede60", stroke-width=12, fill="none", stroke-linecap="round")
!

CSS 

              
                // variables
$border-radius: 3px;
$bg-blue: #741;
$bg-green: #396;
$color-blue:
  linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30% / 30% 5%,
  linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30% / 30% 5%,
  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45% / 5% 5%,
  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45% / 5% 5%,
  radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50% / 20% 20%,
  radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50% / 20% 20%,
  repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100% / 100% 25%,
  linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat,
  radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70% / 90% 50%,
  radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70% / 90% 50%,
  linear-gradient(#f8d8b8 0 0)
  ;
$color-red: 
  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45% / 5% 5%,
  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45% / 5% 5%,
  radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50% / 20% 20%,
  radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50% / 20% 20%,
  repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100% / 100% 25%,
  linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat ,
  radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70% / 90% 50%,
  radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70% / 90% 50%,
  radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65% / 90% 50%,
  radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65% / 90% 50%,
  radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55% / 80% 48%,
  radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55% / 86% 47%,
  radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45% / 20% 10%,
  radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45% / 20% 10%,
  linear-gradient(#ffe8b8 0 0)
  ;
$color-green:
  linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20% / 10% 7%,
  conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27% / 10% 7%,
  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50% / 5% 5%,
  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50% / 5% 5%,
  radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55% / 20% 20%,
  radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55% / 20% 20%,
  linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52% / 100% 2.5%,
  radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52% / 100% 40%,
  radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52% / 100% 40%,
  repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100% / 100% 25%,
  linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat ,
  radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60% / 52% 60%,
  radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58% / 90% 56%,
  radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50% / 90% 55%,
  radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52% / 95% 55%,
  linear-gradient(#fca 0 0)
  
  ;
$color-yellow: 
  radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48% / 5% 5%,
    radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48% / 5% 5%,
    radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53% / 20% 20%,
    radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53% / 20% 20%,
    repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100% / 100% 25%,
    linear-gradient(#0000 73%, #000 0 90%, #0000 0),
    radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70% / 90% 50%,
    radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70% / 90% 50%,
    radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65% / 90% 50%,
    radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65% / 90% 50%,
    radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55% / 80% 48%,
    radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55% / 86% 47%,
    radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32% / 30% 10%,
    radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32% / 30% 10%,
    linear-gradient(#963 0 0)
  ;
$animation-time: 0.6s;
$ladders: (2, 7, 8, 15, 21, 28, 36, 51, 71, 78, 87);
$snakes: (16, 46, 49, 62, 64, 74, 89, 92, 95, 99);

/***** dice animation */
@keyframes changeOrder {
  from { z-index: 6;}
  to { z-index: 1; }
}

@-webkit-keyframes changeOrder {
  from { z-index: 6; }
  to { z-index: 1; }
}

// coment for testing 
input { display: none; }

// presentation
@import url('https://fonts.googleapis.com/css?family=Dosis|Roboto');
@import url('https://fonts.cdnfonts.com/css/harry-potter');

body {
  font-size: 16px;
  font-family: Dosis, Roboto, Arial, Verdana, sans-serif;
  padding: 0;
  margin: 0;
  border: 0;
  background: #8526; // rgba(128,200,255,0.8) /*rgba(128,200,255,0.8)*/;
}

.scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  z-index: 999;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background: white;
    border-radius: $border-radius;
    box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
    width: 70%;
    max-width: 375px;
    > div {
      padding:1rem;
    }
    h1 {
      font-family: 'Harry Potter';
      text-shadow: 
        0 -2px $bg-blue, 
        0 -1px $bg-blue,
        -1px -1px $bg-blue,
        1px -1px $bg-blue,
        -1px -2px $bg-blue, 
        1px -2px $bg-blue, 
        -2px -2px $bg-blue, 
        2px -2px $bg-blue,
        -4px -2px $bg-blue, 
        4px -2px $bg-blue;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 1.75rem;
      font-weight: 400;
      text-align: center;
      height: 2.5rem;
      line-height: 2.35rem;
      background: $bg-blue;
      color: white;
      border-radius: $border-radius $border-radius 0px 0px;
    }
    h2 {
      margin-top: 1rem;
      margin-bottom: 0.15rem;
      font-size: 1.3rem;
      &:first-child {
        margin-top: 0;
      }
    }
    p:first-child {
      margin-top: 0;
    }
    p:last-child {
      margin-bottom: 0;
    }
  }
}

.flex {
  display: flex;
  > label, > div {
    flex: 1;
    margin-left: 0.3rem;
    &:first-child {
      margin-left: 0;
    }
  }
}

/** start screen: configuration **/
#options {
  background: rgba(0,0,0,0);
  .option-players label, label.option-start {
    display: block;
    margin-top: 0.5rem;
    color: white;
    background: rgba(0,150,48,0.6);
    text-align: center;
    padding: 6px;
    transition: background 0.5s, color 0.5s;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: $border-radius;
    cursor: pointer;
    &:hover {
      background: rgba(220,220,0,0.7);
      color: black;
    }
    &:active {
      border: 2px solid rgba(0,0,0,0.1);
    }
    &.option-start {
      background: $bg-blue;
      color: white;
      margin-top: 2rem;
      &:hover {
        background: darken($bg-blue, 5%);
      }
    }
  }
  .option-colors label {
    height: 2rem;
    opacity: 0.6;
    margin-bottom: 0.3rem;
    cursor: pointer;
    transition: opacity 0.5s;
    &:hover {
      opacity: 0.8;
    }
    span {
      box-sizing: border-box;
      width: 2rem;
      margin-left: 0.3rem;
      border-radius: $border-radius;
      display: inline-block;
      padding: 3px;
      font-size: 0.7rem;
      border: 1px solid #222;
      &:first-child {
        width: 2rem;
        height: 2rem;
        border: 0;
        &::before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background: radial-gradient(farthest-side, #0000 40%, #321a 0 50%, #0000 0);
        }
      }
    }
    &:nth-child(1) span {
      &:nth-child(2) { background: $color-green; }
      &:nth-child(3) { background: $color-blue; }
      &:nth-child(4) { background: $color-red; }
      &:nth-child(5) { background: $color-yellow; }
    }
    &:nth-child(2) span {
      &:nth-child(2) { background: $color-blue; }
      &:nth-child(3) { background: $color-red; }
      &:nth-child(4) { background: $color-yellow; }
      &:nth-child(5) { background: $color-green; }
    }
    &:nth-child(3) span {
      &:nth-child(2) { background: $color-red; }
      &:nth-child(3) { background: $color-yellow; }
      &:nth-child(4) { background: $color-green; }
      &:nth-child(5) { background: $color-blue; }
    }
    &:nth-child(4) span {
      &:nth-child(2) { background: $color-yellow; }
      &:nth-child(3) { background: $color-green; }
      &:nth-child(4) { background: $color-blue; }
      &:nth-child(5) { background: $color-red; }
    }
  }
}

// hide the game settings when Start is pressed
#game-time:checked ~ #options,
[name=show-instructions]:checked ~ #options { display: none; }

// control active # of players and colors
@for $i from 1 to 5 {
  #players#{$i}:checked {
    ~ #options {
      label[for=players#{$i}] {
        background: rgba(0,150,48,1);
        border: 2px solid rgba(0,0,0,0.1);
        color: white;
      }
      @for $j from $i+1 to 5 {
        label[for^=colors] span:nth-child(#{$j+1}){
          display: none;
        }
      }
    }
  }
  #colors#{$i}:checked {
    ~ #options {
      label[for=colors#{$i}] {
        opacity: 1;
        border: 0;
        span {
          border: 1px solid #222;
          &:first-child {
            border: 2px solid transparent;
            &::before {
              background: 
                radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 35% 60% / 15% 15%,
                radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 65% 60% / 15% 15%,
                radial-gradient(farthest-side at 50% 0, black 99%, #0000 0) no-repeat 50% 80% / 20% 10%,
                conic-gradient(at 50% -20%, #0000 162deg, indianred 0 198deg, #0000 0) no-repeat 50% 0% / 100% 85%,
                radial-gradient(farthest-side, indianred 99%, #0000 0) no-repeat 0% 100% / 100% 20%,
                // radial-gradient(farthest-side, #0000 60%, #321 0 75%, #0000 0) no-repeat 0 0 / 100% 90%
                ;
            }
          }
        }
      }
    }
  }
}

// assign colors to the game pieces according to the color scheme selected
// TODO: this probably can be reduced with SASS as well as the code above
#colors1:checked ~ #game #piece-player-1 { background: $color-green; }
#colors1:checked ~ #game #piece-player-2 { background: $color-blue; }
#colors1:checked ~ #game #piece-player-3 { background: $color-red; }
#colors1:checked ~ #game #piece-player-4 { background: $color-yellow; }
#colors2:checked ~ #game #piece-player-1 { background: $color-blue; }
#colors2:checked ~ #game #piece-player-2 { background: $color-red; }
#colors2:checked ~ #game #piece-player-3 { background: $color-yellow; }
#colors2:checked ~ #game #piece-player-4 { background: $color-green; }
#colors3:checked ~ #game #piece-player-1 { background: $color-red; }
#colors3:checked ~ #game #piece-player-2 { background: $color-yellow; }
#colors3:checked ~ #game #piece-player-3 { background: $color-green; }
#colors3:checked ~ #game #piece-player-4 { background: $color-blue; }
#colors4:checked ~ #game #piece-player-1 { background: $color-yellow; }
#colors4:checked ~ #game #piece-player-2 { background: $color-green; }
#colors4:checked ~ #game #piece-player-3 { background: $color-blue; }
#colors4:checked ~ #game #piece-player-4 { background: $color-red; }

/** info pop-up **/
#info { 
  display: none;
  .box {
    width: 75%;
    max-width: none;
    p:last-child {
      text-align: right;
    }
    #close-button {
      display: inline-block;
      background: $bg-green;
      border-radius: $border-radius;
      color: white;
      padding: 6px 1rem;
      cursor: pointer;
      transition: background 0.5s;
      &:hover {
        background: darken($bg-green, 5%);
      }
    }
  }
}
#show-info:checked {
  ~ #info { display: block; }
}


/** Instructions **/
#instructions {
  position: fixed;
  z-index: 9999;
  background-color: rgba(0,0,0,0.01);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  #go-to-game {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 1rem;
    z-index: 3;
    color: white;
    cursor: pointer;
  }
  #step {
    display: none;
    position: absolute;
    box-shadow: 0 0 50px calc(200vmax) rgba(0,0,0,0.85), inset 0 0 4px 0 rgba(0,0,0,1);
    transform: translate(-1rem, -1rem);
    border-radius: 100%;
    z-index: 1;
    top: 0;
    left: 1rem;
    width: calc(100px + 2rem);
    height: calc(6rem);
    transition: all 0.75s;
    div {
      position: absolute;
      bottom: -0.5rem;
      line-height: 1.1rem;
      font-size: 1rem;
      color: rgba(255,255,255,0.8);
      left: 1rem;
      width: 80vmin;
      transform: translate(0, 100%);
      -webkit-transform: translate(0, 100%);
      label {
        display: none;
        font-weight: bold;
        cursor: pointer;
        text-decoration: underline;
        &:hover {
          text-decoration: none;
        }
        &:not([for=game-time])::before {
          content: "Next \203A"
        }
      }
    }
  }
}

[name=show-instructions] {
  &:checked ~ {
    #instructions, #game, #action, #instructions #step {
      display: block;
    }
  }
}

@for $i from 1 to 5 {
  #show-instructions-#{$i}:checked ~ #instructions label[for=show-instructions-#{$i+1}] {
    display: inline-block;
  }
}
#show-instructions-5:checked ~ #instructions label[for=game-time] {
  display: inline-block;
}

#show-instructions-1:checked ~ #instructions #step {
  top: 0;
  left: 1rem;
  width: calc(100px + 2rem);
  height: calc(6rem);
  div::before {
    content: "This area indicates whose turn it is at any given moment.";
  }
}
#show-instructions-2:checked ~ #instructions #step {
  top:6rem;
  left: 1rem;
  width: 5rem;
  height: 5rem;
  div::before {
    content: "The active player clicks here to roll the dice.";
  }
}
#show-instructions-3:checked ~ #instructions #step {
  top: 50%;
  left: 50%;
  width: 30vw;
  height: 30vw;
  max-width: 500px;
  max-height: 500px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  div {
    transform: translate(-20vmin, 100%);
    -webkit-transform: translate(-20vmin, 100%);
    left: 0;
    &::before {
      content: "The player's piece will advance on the board once the dice is rolled. If the piece falls on a tile with a basilisk's head, it will fall down to the basilisk's tail. If it falls on a broom's bottom, it will go up to the top.";
    }
  }
}
#show-instructions-4:checked ~ #instructions #step {
  top: 0;
  left: calc(100px + 2rem);
  width: calc(100px + 2rem);
  height: calc(6rem);
  div::before {
    content: "After that, click on the button to go to the next player's turn.";
  }
}
#show-instructions-5:checked ~ #instructions #step {
  top: 0;
  left: calc(100vw - 100px - 1rem);
  width: calc(100px + 2rem);
  height: calc(6rem);
  div {
    left: auto;
    right: 0rem;
    &::before {
      content: "If you want more information during the game, click on this button."
    }
  }
}

#game-time:checked ~ #instructions {
  display: none;
}

/** game screen: board, dice, messages **/
.dice {
  position: absolute;
  display: none;
  visibility: visible;
  top: 6rem;
  left: 1rem;
  width: 3rem;
  height: 3rem;
  background: white;
  border-radius: $border-radius;
  box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.042);
  z-index:1;
  &::before {
    content: "";
    display: block; 
    height: 100%; 
    width: 100%;
    font-size: 0.8rem;
    box-sizing: border-box;
    cursor: pointer;
    padding-top: 0.5rem;
    background-repeat: no-repeat;
    background-position: center center;
  }
}


@for $i from 1 to 5 {
  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label,
  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label, 
  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label,
  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label,
  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label,
  #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
    display: block;
    left: 1rem;
    text-align: center;
    animation: changeOrder $animation-time infinite;
    -webkit-animation: changeOrder $animation-time infinite;
  }
}

@for $i from 1 to 5 {
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label { animation-delay: 0s !important; }
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label { animation-delay: -$animation-time/6 !important; }
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label { animation-delay: -2*$animation-time/6 !important; }
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label { animation-delay: -3*$animation-time/6 !important; }
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label { animation-delay: -4*$animation-time/6 !important; }
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label { animation-delay: -5*$animation-time/6 !important; }
}

@for $i from 1 to 5 {
  
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label::before { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='8' /></svg>");
       }
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label::before { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /></svg>"); }
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label::before { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='77' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='50' cy='50' r='8' /></svg>"); }
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label::before { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /></svg>"); }
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label::before { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='50' cy='50' r='8' /></svg>"); }
  #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label::before { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='23' cy='23' r='8' /><circle cx='77' cy='23' r='8' /><circle cx='77' cy='77' r='8' /><circle cx='23' cy='77' r='8' /><circle cx='23' cy='50' r='8' /><circle cx='77' cy='50' r='8' /></svg>"); }
  
}


// label:active adapted from solution by Temani Afif. Ref: https://stackoverflow.com/a/51451218/3695983 
label.dice:active {
  position:static !important; 
  margin-left: 50px !important;
  background: none !important;
  font-size: 0;
  &::before {
    content:"";
    position:absolute;
    top:0;
    right:-50px;
    left:0;
    bottom:0;
    z-index:200;
  }
}
  
#game {
  display: none;
  .tab {
    position: absolute;
    top: 0;
    background: white;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
    z-index: 9;
    float:left;
    margin-left: 1rem;
    &::before {
      text-align: center;
      display: block;
      padding: 6px 16px;
      color: white;
      background: $bg-blue;
      height: 0.7rem;
      line-height: 0.7rem;
      font-size: 0.75rem;
      font-weight: bold;
      white-space: nowrap;
      text-transform: uppercase;
      font-size: 0.95rem; 
    }
    &::after, &#player-info span {
      display: block;
      text-align: center;
      padding: 6px 16px;
      height: 2rem;
      line-height: 1.9rem;
      white-space: nowrap;
    }
    &#player-info {
      min-width: 100px;
      &::before { content: "Turn"; }
      span { 
        font-weight: bolder;
        &::before {
          content: "\25CF\00A0";
        }
        &::after {
          content: " 1"; 
          font-weight: bolder; 
        }
      }
    }
    &#dice {
      cursor: pointer;
      &::before { content: "Dice"; }
      &::after { 
        content: "Roll"; 
      }
    }
    &#more-info {
      cursor: pointer;
      left: auto;
      right: 1rem;
      width: 100px;
      z-index: 1;
      &::before { content: "About"; }
      &::after { content: "More info" }
    }
    &#action {
      cursor: pointer;
      left: calc(100px + 1rem);
      width: 100px;
      &::before { content: "Action"; }
      &::after { content: "Next player" }
      label {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        cursor: pointer;
      }
    }
  }
  #board {
    width: 70%;
    max-width: 500px;
    border: 3px solid $bg-blue;
    border-radius: $border-radius * 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background: white;
    margin-top: 2.5rem;
    box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
    .tile {
      float: left;
      width: 10%;
      position: relative;
      height: 0;
      padding-top: 10%;
      box-sizing: border-box;
      border-left: 1px solid rgba(0,0,0,0.1);
      border-right: 1px solid rgba(0,0,0,0.1);
      border-top: 1px solid rgba(0,0,0,1);
      border-bottom: 1px solid rgba(0,0,0,1);
      background: lighten(#9ad0ac,15%);
      &::before {
        content: attr(data-index);
        position: absolute;
        top: 0rem;
        left: 0.15rem;
        font-size: 0.66rem;
      }
      &.tile6, &.tile12, &.tile18, &.tile22, &.tile23, &.tile28, &.tile30, &.tile34, &.tile36, &.tile39, &.tile55, &.tile79 {
        &::before {
          left: auto;
          right: 0.15rem;
        }
      }
      &.tile52::before {
        top:auto;
        bottom:0rem;
      }
      &.tile76::before {
        left: 0.6rem;
      }
    }
    @for $i from 1 to 11 {
      .tile#{$i} { border-bottom: 1px solid transparent; }
      .tile#{$i+90} { border-top: 1px solid transparent; }
      .tile#{$i*10} { border-top: 1px solid rgba(0,0,0,0.1); }
      .tile#{$i*10+1} { border-bottom: 1px solid rgba(0,0,0,0.1); }
    }
    .tile1, .tile15, .tile24, .tile38, .tile49, .tile55, .tile65, .tile76, .tile86, .tile94 {
      background: lighten(#f198b4, 15%);
    }

    .tile2, .tile16, .tile23, .tile35, .tile42, .tile56, .tile64, .tile79, .tile87, .tile93 {
      background: lighten(#C3D9FF, 8%);
    }

    .tile3, .tile18, .tile26, .tile33, .tile41, .tile58, .tile68, .tile78, .tile81, .tile96 {
      background: lighten(#f89448, 30%);
    }

    .tile4, .tile11, .tile29, .tile40, .tile47, .tile51, .tile61, .tile77, .tile88, .tile99 {
      background: lighten(#c297c5, 23%);
    }

    .tile5, .tile19, .tile27, .tile32, .tile44, .tile59, .tile69, .tile80, .tile89, .tile97 {
      background: lighten(#68caef, 18%);
    }

    .tile6, .tile20, .tile28, .tile31, .tile45, .tile60, .tile70, .tile75, .tile85, .tile98 {
      background: lighten(#fef471, 21%);
    }

    .tile7, .tile13, .tile21, .tile36, .tile50, .tile53, .tile63, .tile74, .tile84, .tile91 {
      background: lighten(#b9e6fd, 5%);
    }

    .tile8, .tile12, .tile30, .tile39, .tile46, .tile52, .tile62, .tile73, .tile90, .tile100 {
      background: lighten(#e5b75f,19%);
    }

    .tile9, .tile14, .tile22, .tile37, .tile48, .tile54, .tile66, .tile72, .tile83, .tile96 {
      background: lighten(#f37859,20%);
    }
  }
}

#action label { display: none; }
#players1:checked ~ #turn1:checked ~ #game-time:checked ~ #game #action { display:none; }
#players1:checked ~ #turn1:checked ~ #game #turn-changer1 { display: block; }
#players2:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
#players3:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
#players4:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
#players2:checked ~ #turn2:checked ~ #game #turn-changer1 { display: block; }
#players3:checked ~ #turn2:checked ~ #game #turn-changer3 { display: block; }
#players4:checked ~ #turn2:checked ~ #game #turn-changer3 { display: block; }
#players3:checked ~ #turn3:checked ~ #game #turn-changer1 { display: block; }
#players4:checked ~ #turn3:checked ~ #game #turn-changer4 { display: block; }
#players4:checked ~ #turn4:checked ~ #game #turn-changer1 { display: block; }

// assign colors to the game pieces according to the color scheme selected
// TODO: this probably can be reduced with SASS as well as the code above for piece colors
#turn1:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-green; }
#turn2:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-blue; }
#turn3:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-red; }
#turn4:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-yellow; }
#turn1:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-blue; }
#turn2:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-red; }
#turn3:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-yellow; }
#turn4:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-green; }
#turn1:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-red; }
#turn2:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-yellow; }
#turn3:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-green; }
#turn4:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-blue; }
#turn1:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-yellow; }
#turn2:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-green; }
#turn3:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-blue; }
#turn4:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-red; }

@for $i from 1 to 5 {
  #turn#{$i}:checked ~ #game .tab#player-info span::after{
    content: " #{$i}";
  }
}

// show the game board when Start is pressed
#game-time:checked ~ #game {
  display: block;
}

svg {
  &#snakeladders{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    g {
      &.ladders-big {
        stroke: #8B4513;
        stroke-width: 4;
        stroke-linecap: round;
      }
      &.ladders-small {
        stroke: #bB8523;
        stroke-width: 2;
        stroke-linecap: round;
      }
    }
  }
  .snake {
    stroke: none;
  }
  .eye {
    fill: black;
    stroke: white;
    stroke-width: 6;
  }
}

.piece {
  position: absolute;
  border-radius: 12%;
  box-sizing: border-box;
  border: 1px solid #222;
  width: 7%;
  height: 7%;
  bottom: 0;
  left: 0;
  transform: translate(-2%, -2%);
  -webkit-transform: translate(-2%, -2%);
  transition: bottom 0.5s, left 0.5s;
  box-shadow: 0 0.25rem 0.5rem #0004;
  &#piece-player-1 {
    transform: translate(-5%, -3%);
    -webkit-transform: translate(-5%, -3%);
    z-index:44;
  }
  &#piece-player-2 {
    transform: translate(40%, -40%);
    -webkit-transform: translate(40%, -40%);
    z-index: 41;
  }
  &#piece-player-3 {
    transform: translate(42%, -7%);
    -webkit-transform: translate(42%, -7%);
    z-index: 43;
  }
  &#piece-player-4 {
    transform: translate(-3%, -41%);
    -webkit-transform: translate(-3%, -41%);
    z-index: 42;
  }
}

// generate the different positions on each tile
$positions: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0;
@for $i from 1 through 4 {
  #cb-pl#{$i+"-0"}:checked ~ #game #piece-player-#{$i} {
    left: -10%;
    bottom: 0;
  }
  @for $j from 1 to 101 {
    #cb-pl#{$i}-#{$j}:checked {
      ~ #game #piece-player-#{$i} { 
        left: nth($positions, (($j - 1) % 20) + 1) * 1%; 
        bottom: nth($positions, floor(($j - 1) / 10) + 1) * 1%; 
      }  
    }
  }
  @for $j from 101 to 107 {
    #cb-pl#{$i}-#{$j}:checked {
      ~ #game #piece-player-#{$i} { 
        left: 0;
        bottom: 90%;
      }
    }
  }
}

// hide the players that are not active
@for $i from 1 to 5 {
  @for $j from $i+1 to 5 {
    #players#{$i}:checked ~ #game #piece-player-#{$j} { 
      display: none !important; 
    }
  }
}


// all these popups have a similar code below that could be reduced with a mixin (TODO)
#snake-popup, #ladder-popup, #home-popup, #congratulations {
  opacity: 0;
  z-index: -1;
  transition: opacity 0s;
  label {
    display: none;
  }
  svg {
    height:100%;
    position:absolute;
    right:0;
    top:0;
    transform:translate(80%, 0);
  }
}

// when we fall in a ladder, show the ladder popup
@each $l in $ladders {
  .cb[id$='-#{$l}'] {
    &:checked {
      ~ .dice { 
        display: none !important; 
      }
      ~ #ladder-popup {
        opacity: 1;
        z-index: 99999;
        transition: opacity 0.15s;
        transition-delay: 0.5s;
        -webkit-transition-delay: 0.5s;
        label {
          background: $bg-green;
          border-radius: $border-radius;
          color: white;
          padding: 6px 1rem;
          cursor: pointer;
          transition: background 0.5s;
          margin-top: 1rem;
          &:hover {
            background: darken($bg-green, 5%);
          }
        }
      }
    }
  }
}

// when we fall in a ladder, show the ladder popup
@each $s in $snakes {
  .cb[id$='-#{$s}'] {
    &:checked {
      ~ .dice { 
        display: none !important; 
      }
      ~ #snake-popup {
        opacity: 1;
        z-index: 99999;
        transition: opacity 0.15s;
        transition-delay: 0.5s;
        -webkit-transition-delay: 0.5s;
        label {
          background: $bg-green;
          border-radius: $border-radius;
          color: white;
          padding: 6px 1rem;
          cursor: pointer;
          transition: background 0.5s;
          margin-top: 1rem;
          &:hover {
            background: darken($bg-green, 5%);
          }
        }
      }
    }
  }
}

// when we fall in a ladder, show the ladder popup
@for $s from 101 to 107 {
  .cb[id$='-#{$s}'] {
    &:checked {
      ~ .dice { 
        display: none !important; 
      }
      ~ #home-popup {
        opacity: 1;
        z-index: 99999;
        transition: opacity 0.15s;
        transition-delay: 0.5s;
        -webkit-transition-delay: 0.5s;
        label {
          background: $bg-green;
          border-radius: $border-radius;
          color: white;
          padding: 6px 1rem;
          cursor: pointer;
          transition: background 0.5s;
          margin-top: 1rem;
          &:hover {
            background: darken($bg-green, 5%);
          }
        }
      }
    }
  }
}

// show the right button in the ladder/snake popup
@for $i from 1 to 5 {
  @each $l in $ladders {
    #cb-pl#{$i}-#{$l}:checked ~ #ladder-popup #ladder-pl#{$i}-#{$l} { display: inline-block; }
  }
  @each $s in $snakes {
    #cb-pl#{$i}-#{$s}:checked ~ #snake-popup #snake-pl#{$i}-#{$s} { display: inline-block; }
  }
  @for $j from 101 to 107 {
    #cb-pl#{$i}-#{$j}:checked ~ #home-popup #home-pl#{$i}-#{$j} { display: inline-block; }
  }
}

.cb[id$='-100']:checked {
  ~ #congratulations {
    opacity: 1;
    z-index: 99999;
    transition: opacity 0.15s;
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
  }
}

@media (max-width: 400px) {
  #game {
    #board .tile::before {
      font-size: 0.4rem;
    }
    .tab {
      &::before {
        font-size: 0.65rem;
      }
      &::after, &#player-info span {
        font-size: 0.9rem;
        height: 1.5rem;
        line-height: 1.4rem;
      }
    }
  }
}
!

JS 

              
                // no JavaScript
!
999px

Console