├── .gitignore
├── README.md
├── index.pug
├── animated-dice
    ├── index.pug
    ├── styles.scss
    └── index.html
└── styles.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Snakes and Ladders
 2 | 
 3 | Snakes and Ladders is an ancient Indian board game regarded today as a worldwide classic. A number of 'ladders' and 'snakes' are pictured on the board, each connecting two specific board squares. 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 ladders and snakes respectively.<sup>[1](https://en.wikipedia.org/wiki/Snakes_and_Ladders)</sup>
 4 | 
 5 | This is a multiplayer version (1-4 players) developed using HTML and CSS **without any JavaScript**. It is based on the idea 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... without any other scripting/imperative language.
 6 | 
 7 | ## How it works
 8 | 
 9 | ### Simulation of states
10 | 
11 | In theory, the number of states/radio buttons for this game could be up to 100<sup>4</sup> = 100,000,000, just to represent the different positions of the 4 game pieces on the board. And we would need to multiply that number by 4 so we could also track the player's turn. Making it a 400,000,000-state automaton.
12 |   
13 | That would be an insane number of radio buttons to maintain and render by the browser, so we only keep track of 100 positions for each player (400 radio buttons) and an additional set of 4 radio buttons to keep track of the player's turn. This reduction helps ease the rendering of the page, but it brings an usability problem: we need the "Next Player" button to jump from one player to the next one.
14 | 
15 | Each of the 400 position radio buttons will have label associated to it that will be used as part of the dice (see below) to move from one state/position into another.
16 | 
17 | ### Game Logic
18 | 
19 | There are many parts moving, but the logic in itself is simple: the labels for a player's next six available positions are shown (in the form of a dice), the user clicks on one of them activating the radio button associated to it, and that triggers a series of events: the player's piece moves on the board, a sound plays, the next six available position `label`s are shown...
20 | 
21 | The trick for doing this is using the general sibling selector (`~`) and the `:checked` pseudo class. The radio buttons will be at a global level, and the board, pieces, sounds, etc. will be in different containers. To activate the action of a radio button, we will need to verify that it has been activated (with `:checked`), and then proceed to select the element that will go through a change.
22 | 
23 | For example, when the radio button por position 18 is activated, we can select the player's piece by doing something like this in CSS (just for demo, not the actual code from the game):
24 | 
25 |     #radio-18:checked ~ #board #player1-piece {
26 |        ...
27 |     }
28 |     
29 | And inside that CSS rule, we would add the coordinates of the 18<sup>th</sup> tile using `top` and `left`. Easily animating the move by having `transition` set up.
30 | 
31 | ### Dice
32 | 
33 | The dice is an interesting part of the game: how to develop a random number generator using HTML and CSS without JavaScript? The answer is you can't. There is no real way to do it, because both HTML and CSS are languages that describe the content of the page, but none of them have the capability to generate random content. So a random dice is out of the question.
34 | 
35 | ...but you can develop a pseudo-random one!
36 | 
37 | By having a set of stacked `label` elements that change their position on top every few milliseconds, you can create a random effect... it is not really random, but it looks like it, and that's more than enough in this case, as humans would need really good time-control in order to take advantage of that pseudo-randomness.
38 | 
39 | This was a bit more challenging to develop than expected (in fact, it required some [help from our friends at StackOverflow](https://stackoverflow.com/q/51449737/3695983)) because the click effect (on the `label`) is only effective if the active element when the mouse button goes down is the same as when the mouse button goes up. And as the `label`s are part of an animation, sometimes the mouse button up moment happened after the `label` was no longer the active one. A workaround for this (as explained on the linked question) is to use CSS pseudo-elements and different positioning.
40 | 
41 | ### Sound
42 | 
43 | > Notice: The sound **only works on Chrome**. On other browsers, the sounds may play once when the page is loaded (and then never play again), or not play at all.
44 | 
45 | Instead of using an `audio` tag for the sound, we used `embed`. The `embed` element can be used to embed/import external content to our page (in this case, an MP3 file). This `embed` element is contained in a hidden section that is only made visible for a fraction of a second when an action that triggers the sound happens. 
46 | 
47 |     <div id="fx-sound">
48 |       <embed src="/path/to/sound.mp3" />
49 |     </div>
50 | 
51 | According to the [definition of the `embed` element in the living HTML standard](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element): "_Whenever an `embed` element that was not potentially active becomes potentially active [...] the user agent must queue a task using the embed task source to run the embed element setup steps for that element_". So by making the `embed` container visible for a little time, we are actually triggering the rendering of the `embed` element, and the sound should play.
52 | 
53 | So, at least in theory, Chrome's behavior should actually be the expected one in this case.
54 | 
55 | ## Potential improvements
56 | 
57 | Apart from visual changes to make it look nicer, there are other things that could be added/changed to improve the game usability without impacting the general dynamics of the game (and still without using any JavaScript):
58 | 
59 | - Have the max number of players as a variable (in Pug and SCSS). Right now 4 is used as a "magic number" to generate the radio buttons and elements on the page, if it was saved as a variable, the game could be done even more generic and add more players easily (just by updating the value of the variable).
60 | - Have more combinations of colors. Right now there are only 4 possibilities to pick from, but potentially there could be all of them, either by directly listing them or by changing the way it is designed so each user picks the color they want.
61 | - Add international versions. This would be a simple change that would put the instructions and text copies in different languages. One radio button by language would be required, and then the text could be specified by hiding/showing repeated elements, or by having the texts in pseudo-elements.
62 | 
63 | ## Other versions
64 | 
65 | Current and older versions playable on CodePen: 
66 | 
67 | - [Current 1-4 player version](https://codepen.io/alvaromontoro/details/gjWPNW/)
68 | - [Current 1-4 player version (with animated dice)](https://codepen.io/alvaromontoro/pen/OwwQMm/)
69 | - [Simplified two-player version](https://codepen.io/alvaromontoro/details/zLNdZQ/)
70 | - [One-player version](https://codepen.io/alvaromontoro/pen/ejzJBJ/)
71 | 
72 | ## Bibliography and Reference
73 | 
74 | - [Wikipedia's article on Snakes and Ladders](https://en.wikipedia.org/wiki/Snakes_and_Ladders)
75 | - [Wikipedia's article on Finite State Machines](https://en.wikipedia.org/wiki/Finite-state_machine)
76 | - [HTML Living Standard: The `embed` element](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element)
77 | - [MDN's article on `label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
78 | - [MDN's article on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
79 | - [MDN's article on General Sibling Selectors (`~`)](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors)
80 | 


--------------------------------------------------------------------------------
/index.pug:
--------------------------------------------------------------------------------
  1 | // checkboxes to control states and variables
  2 | - var n = 1;
  3 |   while n < 5
  4 |     input(type="radio", name="players", id="players"+n, checked=(n == 1), value=(n++))
  5 | - var n = 1;
  6 |   while n < 5
  7 |     input(type="radio", name="turn", id="turn"+n, checked=(n==1), value=(n++))
  8 | - var n = 1;
  9 |   while n < 5
 10 |     input(type="radio", name="colors", checked=(n == 1), id="colors"+(n++))
 11 | input(type="checkbox", id="game-time", class="game-time", name="game-time")
 12 | input(type="checkbox", name="show-info", id="show-info")
 13 | input(type="checkbox", name="play-fx", id="play-fx")
 14 | - var n = 1;
 15 |   while n < 6
 16 |     input(type="radio", id="show-instructions-"+(n++), class="game-time", name="show-instructions")
 17 | 
 18 | // inputs and labels that control the piece position for player 1
 19 | each players in [1,2,3,4]
 20 |   - var n = 0;
 21 |   while n < 107
 22 |     input(type="radio", name="cb-player"+players, id="cb-pl"+players+"-"+n, class="cb", checked=(n==0))
 23 |     label.dice(for="cb-pl"+players+"-"+(n++))
 24 |   
 25 | // game settings menu (# of players, colors) 
 26 | #options.scrim
 27 |   .box
 28 |     h1 Game Settings
 29 |     div
 30 |       h2 Number of players
 31 |       div.flex.option-players
 32 |         - var n = 1;
 33 |         while n < 5
 34 |           label(for="players"+n) #{n++}
 35 |       h2 Piece colors
 36 |       div.option-colors
 37 |         - var n = 1;
 38 |         while n < 5
 39 |           label.flex(for="colors"+(n++))
 40 |             span
 41 |             span
 42 |             span
 43 |             span
 44 |             span
 45 |       h2 Sound options
 46 |       label#activate-fx(for="play-fx") FX Sound
 47 |       div
 48 |         label.option-start(for="show-instructions-1") START GAME
 49 |         
 50 | // pop-up with information about the game and the author
 51 | #info.scrim
 52 |   .box
 53 |     h1 About
 54 |     div
 55 |       p Snakes and Ladders is an ancient Indian board game regarded today as a worldwide classic. A number of 'ladders' and 'snakes' are pictured on the board, each connecting two specific board squares. 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 ladders and snakes respectively.
 56 |         sup
 57 |           a(href="https://en.wikipedia.org/wiki/Snakes_and_Ladders", target="_blank") [1]
 58 |       p This version was developed by 
 59 |         a(href="https://github.com/alvaromontoro", target="_blank") Alvaro Montoro 
 60 |         | using HTML and CSS, to practice Pug and Sass, and without any JavaScript line of code.
 61 |       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.
 62 |       p
 63 |         label#close-button(for="show-info") Close
 64 | 
 65 | // animated instructions section
 66 | #instructions
 67 |   label#go-to-game(for="game-time") SKIP INSTRUCTIONS &rsaquo;
 68 |   #step
 69 |     div 
 70 |       label(for="show-instructions-2")
 71 |       label(for="show-instructions-3")
 72 |       label(for="show-instructions-4")
 73 |       label(for="show-instructions-5")
 74 |       label(for="game-time") PLAY &rsaquo;
 75 |       
 76 | // the game section: board, dice, snakes, ladders, and all that jazz...
 77 | #game
 78 |   #player-info.tab
 79 |     span Player
 80 |   //label#dice.tab
 81 |   div#action.tab
 82 |     label#turn-changer1(for="turn1")
 83 |     label#turn-changer2(for="turn2")
 84 |     label#turn-changer3(for="turn3")
 85 |     label#turn-changer4(for="turn4")
 86 |     div#fx-click-action.fx-sound
 87 |       embed(src="https://studiokah.com/tests/click2.mp3")
 88 |   label#more-info.tab(for="show-info")
 89 |   div#fx-click-more-info.fx-sound
 90 |     embed(src="https://studiokah.com/tests/click2.mp3")
 91 |   // Board based on the one from codewars: https://www.codewars.com/kata/snakes-and-ladders-1 
 92 |   #board
 93 |     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]
 94 |       div(class="tile tile"+val, data-index=val)
 95 |     svg#snakeladders(viewBox="0 0 600 600", preserveAspectRatio="none")
 96 |       g.ladders-big
 97 |         path(d="M89,574 140,392 M102,578 153,396 M388,581 385,508 M402,580 399,507 M449,552 554,395 M460,560 565,403 M320,516 333,444 M334,518 347,446 M24,436 74,329 M36,442 87,334 M430,458 210,99 M441,450 222,93 M264,393 214,339 M273,384 224,330 M563,284 391,203 M568,271 396,190 M570,149 559,31 M584,148 573,30 M142,158 155,40 M156,160 169,42 M397,101 379,30 M411,97 392,26")
 98 |       g.ladders-small
 99 |         path(d="M91,568 104,573 M94,556 105,561 M97,544 108,549 M100,532 111,537 M103,520 114,525 M107,508 118,513 M111,496 122,501 M114,484 125,489 M117,472 128,477 M121,460 132,465 M124,448 135,453 M128,436 139,441 M131,424 142,429 M134,412 145,417 M138,400 149,405 M388,575 401,574 M388,563 401,562 M388,552 401,551 M388,541 401,540 M388,530 400,529 M388,518 400,517 M452,546 464,555 M459,536 470,544 M466,526 476,533 M473,516 482,522 M479,508 490,515 M485,498 496,506 M492,488 502,495 M498,479 509,486 M504,469 515,477 M512,459 522,467 M517,449 528,457 M523,440 534,448 M530,430 541,438 M536,421 548,429 M542,412 554,419 M549,402 560,409 M322,510 335,512 M324,498 337,500 M326,486 339,488 M328,475 341,477 M330,463 343,465 M332,452 345,454 M258,388 268,378 M250,379 260,369 M243,370 252,361 M235,362 245,352 M227,353 236,344 M219,345 229,335 M27,430 40,436 M32,419 45,425 M37,408 49,414 M42,398 54,404 M47,388 59,394 M51,377 64,383 M56,366 69,372 M61,356 75,362 M66,345 79,351 M71,335 84,341 M427,453 438,444 M420,443 432,434 M414,433 426,424 M408,423 420,414 M402,413 413,404 M395,402 407,393 M388,391 400,382 M381,379 393,370 M374,368 386,359 M367,356 378,347 M359,344 371,336 M352,332 364,324 M345,320 357,312 M338,308 350,300 M330,296 342,288 M323,284 335,276 M316,272 328,264 M308,260 320,252 M301,248 313,240 M294,236 305,228 M287,224 298,216 M280,212 291,205 M273,200 284,193 M267,188 277,181 M259,175 269,168 M251,163 261,156 M244,151 254,144 M236,139 246,132 M229,127 239,120 M222,115 232,108 M215,103 225,96 M143,152 157,154 M144,140 158,142 M145,128 159,130 M146,116 160,118 M147,104 161,106 M149,92 163,94 M150,80 164,82 M151,68 165,70 M153,56 167,58 M154,44 168,46 M396,95 409,91 M393,84 406,80 M390,73 403,69 M387,62 400,58 M384,51 397,47 M381,40 394,36 M570,143 583,142 M568,130 582,129 M566,117 580,116 M565,104 577,103 M564,91 576,90 M563,78 575,77 M562,65 574,64 M561,52 573,51 M560,38 572,37 M556,281 562,268 M546,276 552,263 M536,271 542,258 M526,266 532,254 M516,261 522,249 M506,255 512,244 M496,250 502,239 M486,245 492,235 M476,240 482,230 M466,236 472,225 M456,231 462,220 M446,226 451,216 M436,221 441,211 M425,218 431,206 M415,213 421,201 M405,208 411,196 M395,204 401,192")
100 |       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)")
101 |       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")
102 |       circle.eye(cx=97, cy=212, r=5)
103 |       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")
104 |       circle.eye(cx=203, cy=210, r=5)
105 |       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")
106 |       circle.eye(cx=387, cy=148, r=5)
107 |       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")
108 |       circle.eye(cx=512, cy=90, r=5)
109 |       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")
110 |       circle.eye(cx=504, cy=35, r=5)
111 |       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")
112 |       circle.eye(cx=327, cy=325, r=5)
113 |       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")
114 |       circle.eye(cx=257, cy=503, r=5)
115 |       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")
116 |       circle.eye(cx=503, cy=320, r=5)
117 |       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")
118 |       circle.eye(cx=89, cy=27, r=5)
119 |       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")
120 |       circle.eye(cx=330, cy=30, r=5)
121 |     each player in [1,2,3,4]
122 |       svg.piece(id="piece-player-"+player, viewBox="0 0 100 100")
123 |         g
124 |           path(d="M 50,1 C 50,1 80,85 80,85 70,96 60,99 50,99 40,99 30,96 20,85 20,85 50,1 50,1 Z")
125 |           circle(cx=50, cy=21, r=20)
126 |           rect(x=44, y=25, width=12, height=22, stroke="none")
127 | 
128 | #snake-popup.scrim 
129 |   div.box
130 |     h1 Snake!!!
131 |     div Oh no! The snake bit you! You'll have to move your piece to the snake's tail.
132 |       div
133 |         each players in [1,2,3,4]
134 |           each val, index in {16:6, 46:25, 49:11, 62:19, 64:60, 74:53, 89:68, 92:88, 95:75, 99:80}
135 |             label(id="snake-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Move Down
136 |     svg(viewBox="0 0 100 100")
137 |       path(d="M1,32 4,32 M6,34 4,32 M4,32 10,20", stroke="black", stroke-width="1")
138 |       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")
139 |       circle(cx=18, cy=15, r=5, fill="black", stroke="white", stroke-width=6)
140 |       
141 |     
142 | #ladder-popup.scrim
143 |   div.box
144 |     h1 Ladder!
145 |     div Yay! You found a ladder! You can climb up now.
146 |       div
147 |         each players in [1,2,3,4]
148 |           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}
149 |             label(id="ladder-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Move Up
150 |     svg(viewBox="0 0 100 100")
151 |       path(d="M5,85 20,10", stroke="#8B4513", stroke-width="10", "stroke-linecap"="round")
152 |       path(d="M10,67 30,71 M15,45 35,49 M20,23 40,27", stroke="#aB6533", stroke-width="5", "stroke-linecap"="round")
153 |       path(d="M30,90 45,15", stroke="#8B4513", stroke-width="10", "stroke-linecap"="round")
154 |       
155 | #home-popup.scrim
156 |   div.box
157 |     h1 Home
158 |     div You made it home, but you didn't do it in an exact jump so you will bounce back the remaining tiles.
159 |       div
160 |         each players in [1,2,3,4]
161 |           each val, index in {101:99, 102:98, 103:97, 104:96, 105:95, 106:94}
162 |             label(id="home-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Bounce back
163 |     svg(viewBox="0 0 100 100")
164 |       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")
165 |       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")
166 |       
167 | #congratulations.scrim
168 |   div.box
169 |     h1 Congratulations!
170 |     div You made it home safely! You won!
171 |     div Reload the page to play again.
172 |     svg(viewBox="0 0 100 100")
173 |       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")
174 |       path(d="M35,40 35,85 M20,85 50,85", stroke="#fede60", stroke-width=12, fill="none", stroke-linecap="round")
175 |     
176 | div#fx-dice.fx-sound
177 |   embed(src="https://studiokah.com/tests/dice.mp3")
178 | div#fx-click.fx-sound
179 |   // Click sound by Sebastian. Source: http://soundbible.com/1705-Click2.html
180 |   embed(src="https://studiokah.com/tests/click2.mp3")


--------------------------------------------------------------------------------
/animated-dice/index.pug:
--------------------------------------------------------------------------------
  1 | // checkboxes to control states and variables
  2 | - var n = 1;
  3 |   while n < 5
  4 |     input(type="radio", name="players", id="players"+n, checked=(n == 1), value=(n++))
  5 | - var n = 1;
  6 |   while n < 5
  7 |     input(type="radio", name="turn", id="turn"+n, checked=(n==1), value=(n++))
  8 | - var n = 1;
  9 |   while n < 5
 10 |     input(type="radio", name="colors", checked=(n == 1), id="colors"+(n++))
 11 | input(type="checkbox", id="game-time", class="game-time", name="game-time")
 12 | input(type="checkbox", name="show-info", id="show-info")
 13 | input(type="checkbox", name="play-fx", id="play-fx")
 14 | - var n = 1;
 15 |   while n < 6
 16 |     input(type="radio", id="show-instructions-"+(n++), class="game-time", name="show-instructions")
 17 | 
 18 | // inputs and labels that control the piece position for player 1
 19 | each players in [1,2,3,4]
 20 |   - var n = 0;
 21 |   while n < 107
 22 |     input(type="radio", name="cb-player"+players, id="cb-pl"+players+"-"+n, class="cb", checked=(n==0))
 23 |     label.dice(for="cb-pl"+players+"-"+(n++))
 24 |   
 25 | // game settings menu (# of players, colors) 
 26 | #options.scrim
 27 |   .box
 28 |     h1 Game Settings
 29 |     div
 30 |       h2 Number of players
 31 |       div.flex.option-players
 32 |         - var n = 1;
 33 |         while n < 5
 34 |           label(for="players"+n) #{n++}
 35 |       h2 Piece colors
 36 |       div.option-colors
 37 |         - var n = 1;
 38 |         while n < 5
 39 |           label.flex(for="colors"+(n++))
 40 |             span
 41 |             span
 42 |             span
 43 |             span
 44 |             span
 45 |       h2 Sound options
 46 |       label#activate-fx(for="play-fx") FX Sound
 47 |       div
 48 |         label.option-start(for="show-instructions-1") START GAME
 49 |         
 50 | // pop-up with information about the game and the author
 51 | #info.scrim
 52 |   .box
 53 |     h1 About
 54 |     div
 55 |       p Snakes and Ladders is an ancient Indian board game regarded today as a worldwide classic. A number of 'ladders' and 'snakes' are pictured on the board, each connecting two specific board squares. 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 ladders and snakes respectively.
 56 |         sup
 57 |           a(href="https://en.wikipedia.org/wiki/Snakes_and_Ladders", target="_blank") [1]
 58 |       p This version was developed by 
 59 |         a(href="https://github.com/alvaromontoro", target="_blank") Alvaro Montoro 
 60 |         | using HTML and CSS, to practice Pug and Sass, and without any JavaScript line of code.
 61 |       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.
 62 |       p
 63 |         label#close-button(for="show-info") Close
 64 | 
 65 | // animated instructions section
 66 | #instructions
 67 |   label#go-to-game(for="game-time") SKIP INSTRUCTIONS &rsaquo;
 68 |   #step
 69 |     div 
 70 |       label(for="show-instructions-2")
 71 |       label(for="show-instructions-3")
 72 |       label(for="show-instructions-4")
 73 |       label(for="show-instructions-5")
 74 |       label(for="game-time") PLAY &rsaquo;
 75 |       
 76 | // the game section: board, dice, snakes, ladders, and all that jazz...
 77 | #game
 78 |   #player-info.tab
 79 |     span Player
 80 |   //label#dice.tab
 81 |   div#action.tab
 82 |     label#turn-changer1(for="turn1")
 83 |     label#turn-changer2(for="turn2")
 84 |     label#turn-changer3(for="turn3")
 85 |     label#turn-changer4(for="turn4")
 86 |     div#fx-click-action.fx-sound
 87 |       embed(src="https://studiokah.com/tests/click2.mp3")
 88 |   label#more-info.tab(for="show-info")
 89 |   div#fx-click-more-info.fx-sound
 90 |     embed(src="https://studiokah.com/tests/click2.mp3")
 91 |   // Board based on the one from codewars: https://www.codewars.com/kata/snakes-and-ladders-1 
 92 |   #board
 93 |     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]
 94 |       div(class="tile tile"+val, data-index=val)
 95 |     svg#snakeladders(viewBox="0 0 600 600", preserveAspectRatio="none")
 96 |       g.ladders-big
 97 |         path(d="M89,574 140,392 M102,578 153,396 M388,581 385,508 M402,580 399,507 M449,552 554,395 M460,560 565,403 M320,516 333,444 M334,518 347,446 M24,436 74,329 M36,442 87,334 M430,458 210,99 M441,450 222,93 M264,393 214,339 M273,384 224,330 M563,284 391,203 M568,271 396,190 M570,149 559,31 M584,148 573,30 M142,158 155,40 M156,160 169,42 M397,101 379,30 M411,97 392,26")
 98 |       g.ladders-small
 99 |         path(d="M91,568 104,573 M94,556 105,561 M97,544 108,549 M100,532 111,537 M103,520 114,525 M107,508 118,513 M111,496 122,501 M114,484 125,489 M117,472 128,477 M121,460 132,465 M124,448 135,453 M128,436 139,441 M131,424 142,429 M134,412 145,417 M138,400 149,405 M388,575 401,574 M388,563 401,562 M388,552 401,551 M388,541 401,540 M388,530 400,529 M388,518 400,517 M452,546 464,555 M459,536 470,544 M466,526 476,533 M473,516 482,522 M479,508 490,515 M485,498 496,506 M492,488 502,495 M498,479 509,486 M504,469 515,477 M512,459 522,467 M517,449 528,457 M523,440 534,448 M530,430 541,438 M536,421 548,429 M542,412 554,419 M549,402 560,409 M322,510 335,512 M324,498 337,500 M326,486 339,488 M328,475 341,477 M330,463 343,465 M332,452 345,454 M258,388 268,378 M250,379 260,369 M243,370 252,361 M235,362 245,352 M227,353 236,344 M219,345 229,335 M27,430 40,436 M32,419 45,425 M37,408 49,414 M42,398 54,404 M47,388 59,394 M51,377 64,383 M56,366 69,372 M61,356 75,362 M66,345 79,351 M71,335 84,341 M427,453 438,444 M420,443 432,434 M414,433 426,424 M408,423 420,414 M402,413 413,404 M395,402 407,393 M388,391 400,382 M381,379 393,370 M374,368 386,359 M367,356 378,347 M359,344 371,336 M352,332 364,324 M345,320 357,312 M338,308 350,300 M330,296 342,288 M323,284 335,276 M316,272 328,264 M308,260 320,252 M301,248 313,240 M294,236 305,228 M287,224 298,216 M280,212 291,205 M273,200 284,193 M267,188 277,181 M259,175 269,168 M251,163 261,156 M244,151 254,144 M236,139 246,132 M229,127 239,120 M222,115 232,108 M215,103 225,96 M143,152 157,154 M144,140 158,142 M145,128 159,130 M146,116 160,118 M147,104 161,106 M149,92 163,94 M150,80 164,82 M151,68 165,70 M153,56 167,58 M154,44 168,46 M396,95 409,91 M393,84 406,80 M390,73 403,69 M387,62 400,58 M384,51 397,47 M381,40 394,36 M570,143 583,142 M568,130 582,129 M566,117 580,116 M565,104 577,103 M564,91 576,90 M563,78 575,77 M562,65 574,64 M561,52 573,51 M560,38 572,37 M556,281 562,268 M546,276 552,263 M536,271 542,258 M526,266 532,254 M516,261 522,249 M506,255 512,244 M496,250 502,239 M486,245 492,235 M476,240 482,230 M466,236 472,225 M456,231 462,220 M446,226 451,216 M436,221 441,211 M425,218 431,206 M415,213 421,201 M405,208 411,196 M395,204 401,192")
100 |       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)")
101 |       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")
102 |       circle.eye(cx=97, cy=212, r=5)
103 |       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")
104 |       circle.eye(cx=203, cy=210, r=5)
105 |       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")
106 |       circle.eye(cx=387, cy=148, r=5)
107 |       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")
108 |       circle.eye(cx=512, cy=90, r=5)
109 |       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")
110 |       circle.eye(cx=504, cy=35, r=5)
111 |       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")
112 |       circle.eye(cx=327, cy=325, r=5)
113 |       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")
114 |       circle.eye(cx=257, cy=503, r=5)
115 |       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")
116 |       circle.eye(cx=503, cy=320, r=5)
117 |       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")
118 |       circle.eye(cx=89, cy=27, r=5)
119 |       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")
120 |       circle.eye(cx=330, cy=30, r=5)
121 |     each player in [1,2,3,4]
122 |       svg.piece(id="piece-player-"+player, viewBox="0 0 100 100")
123 |         g
124 |           path(d="M 50,1 C 50,1 80,85 80,85 70,96 60,99 50,99 40,99 30,96 20,85 20,85 50,1 50,1 Z")
125 |           circle(cx=50, cy=21, r=20)
126 |           rect(x=44, y=25, width=12, height=22, stroke="none")
127 | 
128 | #snake-popup.scrim 
129 |   div.box
130 |     h1 Snake!!!
131 |     div Oh no! The snake bit you! You'll have to move your piece to the snake's tail.
132 |       div
133 |         each players in [1,2,3,4]
134 |           each val, index in {16:6, 46:25, 49:11, 62:19, 64:60, 74:53, 89:68, 92:88, 95:75, 99:80}
135 |             label(id="snake-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Move Down
136 |     svg(viewBox="0 0 100 100")
137 |       path(d="M1,32 4,32 M6,34 4,32 M4,32 10,20", stroke="black", stroke-width="1")
138 |       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")
139 |       circle(cx=18, cy=15, r=5, fill="black", stroke="white", stroke-width=6)
140 |       
141 |     
142 | #ladder-popup.scrim
143 |   div.box
144 |     h1 Ladder!
145 |     div Yay! You found a ladder! You can climb up now.
146 |       div
147 |         each players in [1,2,3,4]
148 |           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}
149 |             label(id="ladder-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Move Up
150 |     svg(viewBox="0 0 100 100")
151 |       path(d="M5,85 20,10", stroke="#8B4513", stroke-width="10", "stroke-linecap"="round")
152 |       path(d="M10,67 30,71 M15,45 35,49 M20,23 40,27", stroke="#aB6533", stroke-width="5", "stroke-linecap"="round")
153 |       path(d="M30,90 45,15", stroke="#8B4513", stroke-width="10", "stroke-linecap"="round")
154 |       
155 | #home-popup.scrim
156 |   div.box
157 |     h1 Home
158 |     div You made it home, but you didn't do it in an exact jump so you will bounce back the remaining tiles.
159 |       div
160 |         each players in [1,2,3,4]
161 |           each val, index in {101:99, 102:98, 103:97, 104:96, 105:95, 106:94}
162 |             label(id="home-pl"+players+"-"+index, for="cb-pl"+players+"-"+val) Bounce back
163 |     svg(viewBox="0 0 100 100")
164 |       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")
165 |       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")
166 |       
167 | #congratulations.scrim
168 |   div.box
169 |     h1 Congratulations!
170 |     div You made it home safely! You won!
171 |     div Reload the page to play again.
172 |     svg(viewBox="0 0 100 100")
173 |       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")
174 |       path(d="M35,40 35,85 M20,85 50,85", stroke="#fede60", stroke-width=12, fill="none", stroke-linecap="round")
175 |     
176 | div#fx-dice.fx-sound
177 |   embed(src="https://studiokah.com/tests/dice.mp3")
178 | div#fx-click.fx-sound
179 |   // Click sound by Sebastian. Source: http://soundbible.com/1705-Click2.html
180 |   embed(src="https://studiokah.com/tests/click2.mp3")


--------------------------------------------------------------------------------
/styles.scss:
--------------------------------------------------------------------------------
  1 | // variables
  2 | $border-radius: 3px;
  3 | $color-blue: #48c;
  4 | $color-red: #f55;
  5 | $color-green: #4a5;
  6 | $color-yellow: #dd5;
  7 | $animation-time: 0.6s;
  8 | $ladders: (2, 7, 8, 15, 21, 28, 36, 51, 71, 78, 87);
  9 | $snakes: (16, 46, 49, 62, 64, 74, 89, 92, 95, 99);
 10 | 
 11 | /***** dice animation */
 12 | @keyframes changeOrder {
 13 |   from { z-index: 6;}
 14 |   to { z-index: 1; }
 15 | }
 16 | 
 17 | @-webkit-keyframes changeOrder {
 18 |   from { z-index: 6; }
 19 |   to { z-index: 1; }
 20 | }
 21 | 
 22 | // coment for testing 
 23 | input { display: none; }
 24 | 
 25 | .fx-sound { 
 26 |   display: none; 
 27 |   position: absolute;
 28 |   top: -1000px;
 29 |   left: -1000px;
 30 |   height: 0px;
 31 |   width: 0px;
 32 |   overflow: hidden;
 33 | }
 34 | #play-fx:checked ~ {
 35 |   label.dice:active ~ #fx-dice { display: block; }
 36 |   #game label:active ~ .fx-sound { display: block; }
 37 | }
 38 | 
 39 | 
 40 | // presentation
 41 | @import url('https://fonts.googleapis.com/css?family=Dosis|Roboto');
 42 | 
 43 | body {
 44 |   font-size: 16px;
 45 |   font-family: Dosis, Roboto, Arial, Verdana, sans-serif;
 46 |   padding: 0;
 47 |   margin: 0;
 48 |   border: 0;
 49 |   background: rgba(128,200,255,0.8) /*rgba(128,200,255,0.8)*/;
 50 | }
 51 | 
 52 | .scrim {
 53 |   position: fixed;
 54 |   top: 0;
 55 |   left: 0;
 56 |   width: 100%;
 57 |   height: 100%;
 58 |   background: rgba(0,0,0,0.75);
 59 |   z-index: 999;
 60 |   .box {
 61 |     position: absolute;
 62 |     top: 50%;
 63 |     left: 50%;
 64 |     transform: translate(-50%, -50%);
 65 |     -webkit-transform: translate(-50%, -50%);
 66 |     background: white;
 67 |     border-radius: $border-radius;
 68 |     box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
 69 |     width: 70%;
 70 |     max-width: 375px;
 71 |     > div {
 72 |       padding:1rem;
 73 |     }
 74 |     h1 {
 75 |       margin-top: 0;
 76 |       margin-bottom: 0;
 77 |       font-size: 1.75rem;
 78 |       text-align: center;
 79 |       height: 2.5rem;
 80 |       line-height: 2.35rem;
 81 |       background: $color-blue;
 82 |       color: white;
 83 |       border-radius: $border-radius $border-radius 0px 0px;
 84 |     }
 85 |     h2 {
 86 |       margin-top: 1rem;
 87 |       margin-bottom: 0.15rem;
 88 |       font-size: 1.3rem;
 89 |       &:first-child {
 90 |         margin-top: 0;
 91 |       }
 92 |     }
 93 |     p:first-child {
 94 |       margin-top: 0;
 95 |     }
 96 |     p:last-child {
 97 |       margin-bottom: 0;
 98 |     }
 99 |   }
100 | }
101 | 
102 | .flex {
103 |   display: flex;
104 |   > label, > div {
105 |     flex: 1;
106 |     margin-left: 0.3rem;
107 |     &:first-child {
108 |       margin-left: 0;
109 |     }
110 |   }
111 | }
112 | 
113 | /** start screen: configuration **/
114 | #options {
115 |   background: rgba(0,0,0,0);
116 |   .option-players label, label.option-start {
117 |     display: block;
118 |     margin-top: 0.5rem;
119 |     color: white;
120 |     background: rgba(0,150,48,0.6);
121 |     text-align: center;
122 |     padding: 6px;
123 |     transition: background 0.5s, color 0.5s;
124 |     box-sizing: border-box;
125 |     border: 2px solid transparent;
126 |     border-radius: $border-radius;
127 |     cursor: pointer;
128 |     &:hover {
129 |       background: rgba(220,220,0,0.7);
130 |       color: black;
131 |     }
132 |     &:active {
133 |       border: 2px solid rgba(0,0,0,0.1);
134 |     }
135 |     &.option-start {
136 |       background: $color-blue;
137 |       color: white;
138 |       margin-top: 2rem;
139 |       &:hover {
140 |         background: darken($color-blue, 5%);
141 |       }
142 |     }
143 |   }
144 |   .option-colors label {
145 |     opacity: 0.6;
146 |     margin-bottom: 0.3rem;
147 |     cursor: pointer;
148 |     //transition: opacity 0.5s; // commented as it creates weird jump
149 |     &:hover {
150 |       opacity: 0.8;
151 |     }
152 |     span {
153 |       flex: 1;
154 |       margin-left: 0.3rem;
155 |       border-radius: $border-radius;
156 |       display: inline-block;
157 |       padding: 3px;
158 |       font-size: 0.7rem;
159 |       border: 2px solid transparent;
160 |       &:first-child {
161 |         flex: 0;
162 |         margin-left: 0;
163 |         background: none;
164 |         font-size: 1rem;
165 |         &::before {
166 |           content: "\2610";
167 |         }
168 |       }
169 |     }
170 |     &:nth-child(1) span {
171 |       &:nth-child(2) { background: $color-green; }
172 |       &:nth-child(3) { background: $color-blue; }
173 |       &:nth-child(4) { background: $color-red; }
174 |       &:nth-child(5) { background: $color-yellow; }
175 |     }
176 |     &:nth-child(2) span {
177 |       &:nth-child(2) { background: $color-blue; }
178 |       &:nth-child(3) { background: $color-red; }
179 |       &:nth-child(4) { background: $color-yellow; }
180 |       &:nth-child(5) { background: $color-green; }
181 |     }
182 |     &:nth-child(3) span {
183 |       &:nth-child(2) { background: $color-red; }
184 |       &:nth-child(3) { background: $color-yellow; }
185 |       &:nth-child(4) { background: $color-green; }
186 |       &:nth-child(5) { background: $color-blue; }
187 |     }
188 |     &:nth-child(4) span {
189 |       &:nth-child(2) { background: $color-yellow; }
190 |       &:nth-child(3) { background: $color-green; }
191 |       &:nth-child(4) { background: $color-blue; }
192 |       &:nth-child(5) { background: $color-red; }
193 |     }
194 |   }
195 |   #activate-fx {
196 |     cursor: pointer;
197 |     &::before {
198 |       content: "\2610\00a0";
199 |     }
200 |   }
201 | }
202 | 
203 | // hide the game settings when Start is pressed
204 | #game-time:checked ~ #options,
205 | [name=show-instructions]:checked ~ #options { display: none; }
206 | #play-fx:checked ~ #options #activate-fx::before { content: "\2612\00a0" }
207 | 
208 | // control active # of players and colors
209 | @for $i from 1 to 5 {
210 |   #players#{$i}:checked {
211 |     ~ #options {
212 |       label[for=players#{$i}] {
213 |         background: rgba(0,150,48,1);
214 |         border: 2px solid rgba(0,0,0,0.1);
215 |         color: white;
216 |       }
217 |       @for $j from $i+1 to 5 {
218 |         label[for^=colors] span:nth-child(#{$j+1}){
219 |           display: none;
220 |         }
221 |       }
222 |     }
223 |   }
224 |   #colors#{$i}:checked {
225 |     ~ #options {
226 |       label[for=colors#{$i}] {
227 |         opacity: 1;
228 |         border: 0;
229 |         span {
230 |           border: 2px solid rgba(0,0,0,0.1);
231 |           &:first-child {
232 |             border: 2px solid transparent;
233 |             &::before {
234 |               content:"\2612";
235 |             }
236 |           }
237 |         }
238 |       }
239 |     }
240 |   }
241 | }
242 | 
243 | // assign colors to the game pieces according to the color scheme selected
244 | // TODO: this probably can be reduced with SASS as well as the code above
245 | #colors1:checked ~ #game #piece-player-1 g { fill: $color-green; }
246 | #colors1:checked ~ #game #piece-player-2 g { fill: $color-blue; }
247 | #colors1:checked ~ #game #piece-player-3 g { fill: $color-red; }
248 | #colors1:checked ~ #game #piece-player-4 g { fill: $color-yellow; }
249 | #colors2:checked ~ #game #piece-player-1 g { fill: $color-blue; }
250 | #colors2:checked ~ #game #piece-player-2 g { fill: $color-red; }
251 | #colors2:checked ~ #game #piece-player-3 g { fill: $color-yellow; }
252 | #colors2:checked ~ #game #piece-player-4 g { fill: $color-green; }
253 | #colors3:checked ~ #game #piece-player-1 g { fill: $color-red; }
254 | #colors3:checked ~ #game #piece-player-2 g { fill: $color-yellow; }
255 | #colors3:checked ~ #game #piece-player-3 g { fill: $color-green; }
256 | #colors3:checked ~ #game #piece-player-4 g { fill: $color-blue; }
257 | #colors4:checked ~ #game #piece-player-1 g { fill: $color-yellow; }
258 | #colors4:checked ~ #game #piece-player-2 g { fill: $color-green; }
259 | #colors4:checked ~ #game #piece-player-3 g { fill: $color-blue; }
260 | #colors4:checked ~ #game #piece-player-4 g { fill: $color-red; }
261 | 
262 | /** info pop-up **/
263 | #info { 
264 |   display: none;
265 |   .box {
266 |     width: 75%;
267 |     max-width: none;
268 |     p:last-child {
269 |       text-align: right;
270 |     }
271 |     #close-button {
272 |       display: inline-block;
273 |       background: $color-green;
274 |       border-radius: $border-radius;
275 |       color: white;
276 |       padding: 6px 1rem;
277 |       cursor: pointer;
278 |       transition: background 0.5s;
279 |       &:hover {
280 |         background: darken($color-green, 5%);
281 |       }
282 |     }
283 |   }
284 | }
285 | #show-info:checked {
286 |   ~ #info { display: block; }
287 | }
288 | 
289 | 
290 | /** Instructions **/
291 | #instructions {
292 |   position: fixed;
293 |   z-index: 9999;
294 |   background-color: rgba(0,0,0,0.01);
295 |   top: 0;
296 |   left: 0;
297 |   width: 100%;
298 |   height: 100%;
299 |   display: none;
300 |   #go-to-game {
301 |     position: absolute;
302 |     bottom: 1rem;
303 |     right: 1rem;
304 |     font-size: 1rem;
305 |     z-index: 3;
306 |     color: white;
307 |     cursor: pointer;
308 |   }
309 |   #step {
310 |     display: none;
311 |     position: absolute;
312 |     box-shadow: 0 0 50px calc(200vmax) rgba(0,0,0,0.85), inset 0 0 4px 0 rgba(0,0,0,1);
313 |     transform: translate(-1rem, -1rem);
314 |     border-radius: 100%;
315 |     z-index: 1;
316 |     top: 0;
317 |     left: 1rem;
318 |     width: calc(100px + 2rem);
319 |     height: calc(6rem);
320 |     transition: all 0.75s;
321 |     div {
322 |       position: absolute;
323 |       bottom: -0.5rem;
324 |       line-height: 1.1rem;
325 |       font-size: 1rem;
326 |       color: rgba(255,255,255,0.8);
327 |       left: 1rem;
328 |       width: 80vmin;
329 |       transform: translate(0, 100%);
330 |       -webkit-transform: translate(0, 100%);
331 |       label {
332 |         display: none;
333 |         font-weight: bold;
334 |         cursor: pointer;
335 |         text-decoration: underline;
336 |         &:hover {
337 |           text-decoration: none;
338 |         }
339 |         &:not([for=game-time])::before {
340 |           content: "Next \203A"
341 |         }
342 |       }
343 |     }
344 |   }
345 | }
346 | 
347 | [name=show-instructions] {
348 |   &:checked ~ {
349 |     #instructions, #game, #action, #instructions #step {
350 |       display: block;
351 |     }
352 |   }
353 | }
354 | 
355 | @for $i from 1 to 5 {
356 |   #show-instructions-#{$i}:checked ~ #instructions label[for=show-instructions-#{$i+1}] {
357 |     display: inline-block;
358 |   }
359 | }
360 | #show-instructions-5:checked ~ #instructions label[for=game-time] {
361 |   display: inline-block;
362 | }
363 | 
364 | #show-instructions-1:checked ~ #instructions #step {
365 |   top: 0;
366 |   left: 1rem;
367 |   width: calc(100px + 2rem);
368 |   height: calc(6rem);
369 |   div::before {
370 |     content: "This area indicates whose turn it is at any given moment.";
371 |   }
372 | }
373 | #show-instructions-2:checked ~ #instructions #step {
374 |   top:6rem;
375 |   left: 1rem;
376 |   width: 5rem;
377 |   height: 5rem;
378 |   div::before {
379 |     content: "The active player clicks here to roll the dice.";
380 |   }
381 | }
382 | #show-instructions-3:checked ~ #instructions #step {
383 |   top: 50%;
384 |   left: 50%;
385 |   width: 30vw;
386 |   height: 30vw;
387 |   max-width: 500px;
388 |   max-height: 500px;
389 |   transform: translate(-50%, -50%);
390 |   -webkit-transform: translate(-50%, -50%);
391 |   div {
392 |     transform: translate(-20vmin, 100%);
393 |     -webkit-transform: translate(-20vmin, 100%);
394 |     left: 0;
395 |     &::before {
396 |       content: "The player's piece will advance on the board once the dice is rolled. If the piece falls on a tile with a snake's head, it will fall down to the snake's tail. If it falls on a ladder's bottom, it will go up to the top.";
397 |     }
398 |   }
399 | }
400 | #show-instructions-4:checked ~ #instructions #step {
401 |   top: 0;
402 |   left: calc(100px + 2rem);
403 |   width: calc(100px + 2rem);
404 |   height: calc(6rem);
405 |   div::before {
406 |     content: "After that, click on the button to go to the next player's turn.";
407 |   }
408 | }
409 | #show-instructions-5:checked ~ #instructions #step {
410 |   top: 0;
411 |   left: calc(100vw - 100px - 1rem);
412 |   width: calc(100px + 2rem);
413 |   height: calc(6rem);
414 |   div {
415 |     left: auto;
416 |     right: 0rem;
417 |     &::before {
418 |       content: "If you want more information during the game, click on this button."
419 |     }
420 |   }
421 | }
422 | 
423 | #game-time:checked ~ #instructions {
424 |   display: none;
425 | }
426 | 
427 | /** game screen: board, dice, messages **/
428 | .dice {
429 |   position: absolute;
430 |   display: none;
431 |   visibility: visible;
432 |   top: 6rem;
433 |   left: 1rem;
434 |   width: 3rem;
435 |   height: 3rem;
436 |   background: white;
437 |   border-radius: $border-radius;
438 |   box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.042);
439 |   z-index:1;
440 |   &::before {
441 |     content: "Roll the Dice";
442 |     display: block; 
443 |     height: 100%; 
444 |     width: 100%;
445 |     font-size: 0.8rem;
446 |     box-sizing: border-box;
447 |     cursor: pointer;
448 |     padding-top: 0.5rem;
449 |   }
450 | }
451 | 
452 | 
453 | @for $i from 1 to 5 {
454 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label,
455 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label, 
456 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label,
457 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label,
458 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label,
459 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
460 |     display: block;
461 |     left: 1rem;
462 |     text-align: center;
463 |     animation: changeOrder $animation-time infinite;
464 |     -webkit-animation: changeOrder $animation-time infinite;
465 |   }
466 | }
467 | 
468 | @for $i from 1 to 5 {
469 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label { animation-delay: 0s !important; }
470 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label { animation-delay: -$animation-time/6 !important; }
471 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label { animation-delay: -2*$animation-time/6 !important; }
472 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label { animation-delay: -3*$animation-time/6 !important; }
473 |   #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; }
474 |   #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; }
475 | }
476 | 
477 | @for $i from 1 to 5 {
478 |   /*
479 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label::before { background-image: 
480 |         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>");
481 |        }
482 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label::before { background-image: 
483 |         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>"); }
484 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label::before { background-image: 
485 |         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>"); }
486 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label::before { background-image: 
487 |         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>"); }
488 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label::before { background-image: 
489 |         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>"); }
490 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label::before { background-image: 
491 |         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>"); }
492 |   */
493 | }
494 | 
495 | 
496 | // label:active adapted from solution by Temani Afif. Ref: https://stackoverflow.com/a/51451218/3695983 
497 | label.dice:active {
498 |   position:static !important; 
499 |   margin-left: 50px !important;
500 |   background: none !important;
501 |   font-size: 0;
502 |   &::before {
503 |     content:"";
504 |     position:absolute;
505 |     top:0;
506 |     right:-50px;
507 |     left:0;
508 |     bottom:0;
509 |     z-index:200;
510 |   }
511 | }
512 |   
513 | #game {
514 |   display: none;
515 |   .tab {
516 |     position: absolute;
517 |     top: 0;
518 |     background: white;
519 |     border-radius: 0 0 3px 3px;
520 |     box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
521 |     z-index: 9;
522 |     float:left;
523 |     margin-left: 1rem;
524 |     &::before {
525 |       text-align: center;
526 |       display: block;
527 |       padding: 6px 16px;
528 |       color: white;
529 |       background: $color-blue;
530 |       height: 0.7rem;
531 |       line-height: 0.7rem;
532 |       font-size: 0.75rem;
533 |       font-weight: bold;
534 |       white-space: nowrap;
535 |       text-transform: uppercase;
536 |       font-size: 0.95rem; 
537 |     }
538 |     &::after, &#player-info span {
539 |       display: block;
540 |       text-align: center;
541 |       padding: 6px 16px;
542 |       height: 2rem;
543 |       line-height: 1.9rem;
544 |       white-space: nowrap;
545 |     }
546 |     &#player-info {
547 |       min-width: 100px;
548 |       &::before { content: "Turn"; }
549 |       span { 
550 |         font-weight: bolder;
551 |         &::before {
552 |           content: "\25CF\00A0";
553 |         }
554 |         &::after {
555 |           content: " 1"; 
556 |           font-weight: bolder; 
557 |         }
558 |       }
559 |     }
560 |     &#dice {
561 |       cursor: pointer;
562 |       &::before { content: "Dice"; }
563 |       &::after { 
564 |         content: "Roll"; 
565 |       }
566 |     }
567 |     &#more-info {
568 |       cursor: pointer;
569 |       left: auto;
570 |       right: 1rem;
571 |       width: 100px;
572 |       z-index: 1;
573 |       &::before { content: "About"; }
574 |       &::after { content: "More info" }
575 |     }
576 |     &#action {
577 |       cursor: pointer;
578 |       left: calc(100px + 1rem);
579 |       width: 100px;
580 |       &::before { content: "Action"; }
581 |       &::after { content: "Next player" }
582 |       label {
583 |         position: absolute;
584 |         top: 0;
585 |         left: 0;
586 |         bottom: 0;
587 |         right: 0;
588 |         cursor: pointer;
589 |       }
590 |     }
591 |   }
592 |   #board {
593 |     width: 70%;
594 |     max-width: 500px;
595 |     border: 3px solid $color-blue;
596 |     border-radius: $border-radius * 2;
597 |     position: absolute;
598 |     top: 50%;
599 |     left: 50%;
600 |     transform: translate(-50%, -50%);
601 |     -webkit-transform: translate(-50%, -50%);
602 |     background: white;
603 |     margin-top: 2.5rem;
604 |     box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
605 |     .tile {
606 |       float: left;
607 |       width: 10%;
608 |       position: relative;
609 |       height: 0;
610 |       padding-top: 10%;
611 |       box-sizing: border-box;
612 |       border-left: 1px solid rgba(0,0,0,0.1);
613 |       border-right: 1px solid rgba(0,0,0,0.1);
614 |       border-top: 1px solid rgba(0,0,0,1);
615 |       border-bottom: 1px solid rgba(0,0,0,1);
616 |       background: lighten(#9ad0ac,15%);
617 |       &::before {
618 |         content: attr(data-index);
619 |         position: absolute;
620 |         top: 0rem;
621 |         left: 0.15rem;
622 |         font-size: 0.66rem;
623 |       }
624 |       &.tile6, &.tile12, &.tile18, &.tile22, &.tile23, &.tile28, &.tile30, &.tile34, &.tile36, &.tile39, &.tile55, &.tile79 {
625 |         &::before {
626 |           left: auto;
627 |           right: 0.15rem;
628 |         }
629 |       }
630 |       &.tile52::before {
631 |         top:auto;
632 |         bottom:0rem;
633 |       }
634 |       &.tile76::before {
635 |         left: 0.6rem;
636 |       }
637 |     }
638 |     @for $i from 1 to 11 {
639 |       .tile#{$i} { border-bottom: 1px solid transparent; }
640 |       .tile#{$i+90} { border-top: 1px solid transparent; }
641 |       .tile#{$i*10} { border-top: 1px solid rgba(0,0,0,0.1); }
642 |       .tile#{$i*10+1} { border-bottom: 1px solid rgba(0,0,0,0.1); }
643 |     }
644 |     .tile1, .tile15, .tile24, .tile38, .tile49, .tile55, .tile65, .tile76, .tile86, .tile94 {
645 |       background: lighten(#f198b4, 15%);
646 |     }
647 | 
648 |     .tile2, .tile16, .tile23, .tile35, .tile42, .tile56, .tile64, .tile79, .tile87, .tile93 {
649 |       background: lighten(#C3D9FF, 8%);
650 |     }
651 | 
652 |     .tile3, .tile18, .tile26, .tile33, .tile41, .tile58, .tile68, .tile78, .tile81, .tile96 {
653 |       background: lighten(#f89448, 30%);
654 |     }
655 | 
656 |     .tile4, .tile11, .tile29, .tile40, .tile47, .tile51, .tile61, .tile77, .tile88, .tile99 {
657 |       background: lighten(#c297c5, 23%);
658 |     }
659 | 
660 |     .tile5, .tile19, .tile27, .tile32, .tile44, .tile59, .tile69, .tile80, .tile89, .tile97 {
661 |       background: lighten(#68caef, 18%);
662 |     }
663 | 
664 |     .tile6, .tile20, .tile28, .tile31, .tile45, .tile60, .tile70, .tile75, .tile85, .tile98 {
665 |       background: lighten(#fef471, 21%);
666 |     }
667 | 
668 |     .tile7, .tile13, .tile21, .tile36, .tile50, .tile53, .tile63, .tile74, .tile84, .tile91 {
669 |       background: lighten(#b9e6fd, 5%);
670 |     }
671 | 
672 |     .tile8, .tile12, .tile30, .tile39, .tile46, .tile52, .tile62, .tile73, .tile90, .tile100 {
673 |       background: lighten(#e5b75f,19%);
674 |     }
675 | 
676 |     .tile9, .tile14, .tile22, .tile37, .tile48, .tile54, .tile66, .tile72, .tile83, .tile96 {
677 |       background: lighten(#f37859,20%);
678 |     }
679 |   }
680 | }
681 | 
682 | #action label { display: none; }
683 | #players1:checked ~ #turn1:checked ~ #game-time:checked ~ #game #action { display:none; }
684 | #players1:checked ~ #turn1:checked ~ #game #turn-changer1 { display: block; }
685 | #players2:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
686 | #players3:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
687 | #players4:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
688 | #players2:checked ~ #turn2:checked ~ #game #turn-changer1 { display: block; }
689 | #players3:checked ~ #turn2:checked ~ #game #turn-changer3 { display: block; }
690 | #players4:checked ~ #turn2:checked ~ #game #turn-changer3 { display: block; }
691 | #players3:checked ~ #turn3:checked ~ #game #turn-changer1 { display: block; }
692 | #players4:checked ~ #turn3:checked ~ #game #turn-changer4 { display: block; }
693 | #players4:checked ~ #turn4:checked ~ #game #turn-changer1 { display: block; }
694 | 
695 | // assign colors to the game pieces according to the color scheme selected
696 | // TODO: this probably can be reduced with SASS as well as the code above for piece colors
697 | #turn1:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-green; }
698 | #turn2:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-blue; }
699 | #turn3:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-red; }
700 | #turn4:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-yellow; }
701 | #turn1:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-blue; }
702 | #turn2:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-red; }
703 | #turn3:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-yellow; }
704 | #turn4:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-green; }
705 | #turn1:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-red; }
706 | #turn2:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-yellow; }
707 | #turn3:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-green; }
708 | #turn4:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-blue; }
709 | #turn1:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-yellow; }
710 | #turn2:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-green; }
711 | #turn3:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-blue; }
712 | #turn4:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-red; }
713 | 
714 | @for $i from 1 to 5 {
715 |   #turn#{$i}:checked ~ #game .tab#player-info span::after{
716 |     content: " #{$i}";
717 |   }
718 | }
719 | 
720 | // show the game board when Start is pressed
721 | #game-time:checked ~ #game {
722 |   display: block;
723 | }
724 | 
725 | svg {
726 |   &#snakeladders{
727 |     position: absolute;
728 |     top: 0;
729 |     left: 0;
730 |     width: 100%;
731 |     height: 100%;
732 |     g {
733 |       &.ladders-big {
734 |         stroke: #8B4513;
735 |         stroke-width: 4;
736 |         stroke-linecap: round;
737 |       }
738 |       &.ladders-small {
739 |         stroke: #8B4513;
740 |         stroke-width: 2.5;
741 |         stroke-linecap: round;
742 |       }
743 |     }
744 |   }
745 |   .snake {
746 |     stroke: none;
747 |   }
748 |   .eye {
749 |     fill: black;
750 |     stroke: white;
751 |     stroke-width: 6;
752 |   }
753 |   &.piece {
754 |     position: absolute;
755 |     width: 8%;
756 |     bottom: 0;
757 |     left: 0;
758 |     transform: translate(-2%, -2%);
759 |     -webkit-transform: translate(-2%, -2%);
760 |     transition: bottom 0.5s, left 0.5s;
761 |     g {
762 |       fill: $color-red;
763 |       stroke-width: 4;
764 |       stroke: rgba(0,0,0,0.3);
765 |     }
766 |     &#piece-player-1 {
767 |       transform: translate(-5%, -3%);
768 |       -webkit-transform: translate(-5%, -3%);
769 |       z-index:44;
770 |       g {
771 |         fill: $color-red;
772 |       }
773 |     }
774 |     &#piece-player-2 {
775 |       transform: translate(40%, -40%);
776 |       -webkit-transform: translate(40%, -40%);
777 |       z-index: 41;
778 |       g {
779 |         fill: $color-blue;
780 |       }
781 |     }
782 |     &#piece-player-3 {
783 |       transform: translate(42%, -7%);
784 |       -webkit-transform: translate(42%, -7%);
785 |       z-index: 43;
786 |       g {
787 |         fill: $color-green;
788 |       }
789 |     }
790 |     &#piece-player-4 {
791 |       transform: translate(-3%, -41%);
792 |       -webkit-transform: translate(-3%, -41%);
793 |       z-index: 42;
794 |       g {
795 |         fill: $color-yellow;
796 |       }
797 |     }
798 |   }
799 | }
800 | 
801 | // generate the different positions on each tile
802 | $positions: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0;
803 | @for $i from 1 through 4 {
804 |   #cb-pl#{$i+"-0"}:checked ~ #game #piece-player-#{$i} {
805 |     left: -10%;
806 |     bottom: 0;
807 |   }
808 |   @for $j from 1 to 101 {
809 |     #cb-pl#{$i}-#{$j}:checked {
810 |       ~ #game #piece-player-#{$i} { 
811 |         left: nth($positions, (($j - 1) % 20) + 1) * 1%; 
812 |         bottom: nth($positions, floor(($j - 1) / 10) + 1) * 1%; 
813 |       }  
814 |     }
815 |   }
816 |   @for $j from 101 to 107 {
817 |     #cb-pl#{$i}-#{$j}:checked {
818 |       ~ #game #piece-player-#{$i} { 
819 |         left: 0;
820 |         bottom: 90%;
821 |       }
822 |     }
823 |   }
824 | }
825 | 
826 | // hide the players that are not active
827 | @for $i from 1 to 5 {
828 |   @for $j from $i+1 to 5 {
829 |     #players#{$i}:checked ~ #game #piece-player-#{$j} { 
830 |       display: none !important; 
831 |     }
832 |   }
833 | }
834 | 
835 | 
836 | // all these popups have a similar code below that could be reduced with a mixin (TODO)
837 | #snake-popup, #ladder-popup, #home-popup, #congratulations {
838 |   opacity: 0;
839 |   z-index: -1;
840 |   transition: opacity 0s;
841 |   label {
842 |     display: none;
843 |   }
844 |   svg {
845 |     height:100%;
846 |     position:absolute;
847 |     right:0;
848 |     top:0;
849 |     transform:translate(80%, 0);
850 |   }
851 | }
852 | 
853 | // when we fall in a ladder, show the ladder popup
854 | @each $l in $ladders {
855 |   .cb[id$='-#{$l}'] {
856 |     &:checked {
857 |       ~ .dice { 
858 |         display: none !important; 
859 |       }
860 |       ~ #ladder-popup {
861 |         opacity: 1;
862 |         z-index: 99999;
863 |         transition: opacity 0.15s;
864 |         transition-delay: 0.5s;
865 |         -webkit-transition-delay: 0.5s;
866 |         label {
867 |           background: $color-green;
868 |           border-radius: $border-radius;
869 |           color: white;
870 |           padding: 6px 1rem;
871 |           cursor: pointer;
872 |           transition: background 0.5s;
873 |           margin-top: 1rem;
874 |           &:hover {
875 |             background: darken($color-green, 5%);
876 |           }
877 |         }
878 |       }
879 |     }
880 |   }
881 | }
882 | 
883 | // when we fall in a ladder, show the ladder popup
884 | @each $s in $snakes {
885 |   .cb[id$='-#{$s}'] {
886 |     &:checked {
887 |       ~ .dice { 
888 |         display: none !important; 
889 |       }
890 |       ~ #snake-popup {
891 |         opacity: 1;
892 |         z-index: 99999;
893 |         transition: opacity 0.15s;
894 |         transition-delay: 0.5s;
895 |         -webkit-transition-delay: 0.5s;
896 |         label {
897 |           background: $color-green;
898 |           border-radius: $border-radius;
899 |           color: white;
900 |           padding: 6px 1rem;
901 |           cursor: pointer;
902 |           transition: background 0.5s;
903 |           margin-top: 1rem;
904 |           &:hover {
905 |             background: darken($color-green, 5%);
906 |           }
907 |         }
908 |       }
909 |     }
910 |   }
911 | }
912 | 
913 | // when we fall in a ladder, show the ladder popup
914 | @for $s from 101 to 107 {
915 |   .cb[id$='-#{$s}'] {
916 |     &:checked {
917 |       ~ .dice { 
918 |         display: none !important; 
919 |       }
920 |       ~ #home-popup {
921 |         opacity: 1;
922 |         z-index: 99999;
923 |         transition: opacity 0.15s;
924 |         transition-delay: 0.5s;
925 |         -webkit-transition-delay: 0.5s;
926 |         label {
927 |           background: $color-green;
928 |           border-radius: $border-radius;
929 |           color: white;
930 |           padding: 6px 1rem;
931 |           cursor: pointer;
932 |           transition: background 0.5s;
933 |           margin-top: 1rem;
934 |           &:hover {
935 |             background: darken($color-green, 5%);
936 |           }
937 |         }
938 |       }
939 |     }
940 |   }
941 | }
942 | 
943 | // show the right button in the ladder/snake popup
944 | @for $i from 1 to 5 {
945 |   @each $l in $ladders {
946 |     #cb-pl#{$i}-#{$l}:checked ~ #ladder-popup #ladder-pl#{$i}-#{$l} { display: inline-block; }
947 |   }
948 |   @each $s in $snakes {
949 |     #cb-pl#{$i}-#{$s}:checked ~ #snake-popup #snake-pl#{$i}-#{$s} { display: inline-block; }
950 |   }
951 |   @for $j from 101 to 107 {
952 |     #cb-pl#{$i}-#{$j}:checked ~ #home-popup #home-pl#{$i}-#{$j} { display: inline-block; }
953 |   }
954 | }
955 | 
956 | .cb[id$='-100']:checked {
957 |   ~ #congratulations {
958 |     opacity: 1;
959 |     z-index: 99999;
960 |     transition: opacity 0.15s;
961 |     transition-delay: 0.5s;
962 |     -webkit-transition-delay: 0.5s;
963 |   }
964 | }
965 | 
966 | @media (max-width: 400px) {
967 |   #game {
968 |     #board .tile::before {
969 |       font-size: 0.4rem;
970 |     }
971 |     .tab {
972 |       &::before {
973 |         font-size: 0.65rem;
974 |       }
975 |       &::after, &#player-info span {
976 |         font-size: 0.9rem;
977 |         height: 1.5rem;
978 |         line-height: 1.4rem;
979 |       }
980 |     }
981 |   }
982 | }
983 | 


--------------------------------------------------------------------------------
/animated-dice/styles.scss:
--------------------------------------------------------------------------------
  1 | // variables
  2 | $border-radius: 3px;
  3 | $color-blue: #48c;
  4 | $color-red: #f55;
  5 | $color-green: #4a5;
  6 | $color-yellow: #dd5;
  7 | $animation-time: 0.6s;
  8 | $ladders: (2, 7, 8, 15, 21, 28, 36, 51, 71, 78, 87);
  9 | $snakes: (16, 46, 49, 62, 64, 74, 89, 92, 95, 99);
 10 | 
 11 | /***** dice animation */
 12 | @keyframes changeOrder {
 13 |   from { z-index: 6;}
 14 |   to { z-index: 1; }
 15 | }
 16 | 
 17 | @-webkit-keyframes changeOrder {
 18 |   from { z-index: 6; }
 19 |   to { z-index: 1; }
 20 | }
 21 | 
 22 | // coment for testing 
 23 | input { display: none; }
 24 | 
 25 | .fx-sound { 
 26 |   display: none; 
 27 |   position: absolute;
 28 |   top: -1000px;
 29 |   left: -1000px;
 30 |   height: 0px;
 31 |   width: 0px;
 32 |   overflow: hidden;
 33 | }
 34 | #play-fx:checked ~ {
 35 |   label.dice:active ~ #fx-dice { display: block; }
 36 |   #game label:active ~ .fx-sound { display: block; }
 37 | }
 38 | 
 39 | 
 40 | // presentation
 41 | @import url('https://fonts.googleapis.com/css?family=Dosis|Roboto');
 42 | 
 43 | body {
 44 |   font-size: 16px;
 45 |   font-family: Dosis, Roboto, Arial, Verdana, sans-serif;
 46 |   padding: 0;
 47 |   margin: 0;
 48 |   border: 0;
 49 |   background: rgba(128,200,255,0.8) /*rgba(128,200,255,0.8)*/;
 50 | }
 51 | 
 52 | .scrim {
 53 |   position: fixed;
 54 |   top: 0;
 55 |   left: 0;
 56 |   width: 100%;
 57 |   height: 100%;
 58 |   background: rgba(0,0,0,0.75);
 59 |   z-index: 999;
 60 |   .box {
 61 |     position: absolute;
 62 |     top: 50%;
 63 |     left: 50%;
 64 |     transform: translate(-50%, -50%);
 65 |     -webkit-transform: translate(-50%, -50%);
 66 |     background: white;
 67 |     border-radius: $border-radius;
 68 |     box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
 69 |     width: 70%;
 70 |     max-width: 375px;
 71 |     > div {
 72 |       padding:1rem;
 73 |     }
 74 |     h1 {
 75 |       margin-top: 0;
 76 |       margin-bottom: 0;
 77 |       font-size: 1.75rem;
 78 |       text-align: center;
 79 |       height: 2.5rem;
 80 |       line-height: 2.35rem;
 81 |       background: $color-blue;
 82 |       color: white;
 83 |       border-radius: $border-radius $border-radius 0px 0px;
 84 |     }
 85 |     h2 {
 86 |       margin-top: 1rem;
 87 |       margin-bottom: 0.15rem;
 88 |       font-size: 1.3rem;
 89 |       &:first-child {
 90 |         margin-top: 0;
 91 |       }
 92 |     }
 93 |     p:first-child {
 94 |       margin-top: 0;
 95 |     }
 96 |     p:last-child {
 97 |       margin-bottom: 0;
 98 |     }
 99 |   }
100 | }
101 | 
102 | .flex {
103 |   display: flex;
104 |   > label, > div {
105 |     flex: 1;
106 |     margin-left: 0.3rem;
107 |     &:first-child {
108 |       margin-left: 0;
109 |     }
110 |   }
111 | }
112 | 
113 | /** start screen: configuration **/
114 | #options {
115 |   background: rgba(0,0,0,0);
116 |   .option-players label, label.option-start {
117 |     display: block;
118 |     margin-top: 0.5rem;
119 |     color: white;
120 |     background: rgba(0,150,48,0.6);
121 |     text-align: center;
122 |     padding: 6px;
123 |     transition: background 0.5s, color 0.5s;
124 |     box-sizing: border-box;
125 |     border: 2px solid transparent;
126 |     border-radius: $border-radius;
127 |     cursor: pointer;
128 |     &:hover {
129 |       background: rgba(220,220,0,0.7);
130 |       color: black;
131 |     }
132 |     &:active {
133 |       border: 2px solid rgba(0,0,0,0.1);
134 |     }
135 |     &.option-start {
136 |       background: $color-blue;
137 |       color: white;
138 |       margin-top: 2rem;
139 |       &:hover {
140 |         background: darken($color-blue, 5%);
141 |       }
142 |     }
143 |   }
144 |   .option-colors label {
145 |     opacity: 0.6;
146 |     margin-bottom: 0.3rem;
147 |     cursor: pointer;
148 |     //transition: opacity 0.5s; // commented as it creates weird jump
149 |     &:hover {
150 |       opacity: 0.8;
151 |     }
152 |     span {
153 |       flex: 1;
154 |       margin-left: 0.3rem;
155 |       border-radius: $border-radius;
156 |       display: inline-block;
157 |       padding: 3px;
158 |       font-size: 0.7rem;
159 |       border: 2px solid transparent;
160 |       &:first-child {
161 |         flex: 0;
162 |         margin-left: 0;
163 |         background: none;
164 |         font-size: 1rem;
165 |         &::before {
166 |           content: "\2610";
167 |         }
168 |       }
169 |     }
170 |     &:nth-child(1) span {
171 |       &:nth-child(2) { background: $color-green; }
172 |       &:nth-child(3) { background: $color-blue; }
173 |       &:nth-child(4) { background: $color-red; }
174 |       &:nth-child(5) { background: $color-yellow; }
175 |     }
176 |     &:nth-child(2) span {
177 |       &:nth-child(2) { background: $color-blue; }
178 |       &:nth-child(3) { background: $color-red; }
179 |       &:nth-child(4) { background: $color-yellow; }
180 |       &:nth-child(5) { background: $color-green; }
181 |     }
182 |     &:nth-child(3) span {
183 |       &:nth-child(2) { background: $color-red; }
184 |       &:nth-child(3) { background: $color-yellow; }
185 |       &:nth-child(4) { background: $color-green; }
186 |       &:nth-child(5) { background: $color-blue; }
187 |     }
188 |     &:nth-child(4) span {
189 |       &:nth-child(2) { background: $color-yellow; }
190 |       &:nth-child(3) { background: $color-green; }
191 |       &:nth-child(4) { background: $color-blue; }
192 |       &:nth-child(5) { background: $color-red; }
193 |     }
194 |   }
195 |   #activate-fx {
196 |     cursor: pointer;
197 |     &::before {
198 |       content: "\2610\00a0";
199 |     }
200 |   }
201 | }
202 | 
203 | // hide the game settings when Start is pressed
204 | #game-time:checked ~ #options,
205 | [name=show-instructions]:checked ~ #options { display: none; }
206 | #play-fx:checked ~ #options #activate-fx::before { content: "\2612\00a0" }
207 | 
208 | // control active # of players and colors
209 | @for $i from 1 to 5 {
210 |   #players#{$i}:checked {
211 |     ~ #options {
212 |       label[for=players#{$i}] {
213 |         background: rgba(0,150,48,1);
214 |         border: 2px solid rgba(0,0,0,0.1);
215 |         color: white;
216 |       }
217 |       @for $j from $i+1 to 5 {
218 |         label[for^=colors] span:nth-child(#{$j+1}){
219 |           display: none;
220 |         }
221 |       }
222 |     }
223 |   }
224 |   #colors#{$i}:checked {
225 |     ~ #options {
226 |       label[for=colors#{$i}] {
227 |         opacity: 1;
228 |         border: 0;
229 |         span {
230 |           border: 2px solid rgba(0,0,0,0.1);
231 |           &:first-child {
232 |             border: 2px solid transparent;
233 |             &::before {
234 |               content:"\2612";
235 |             }
236 |           }
237 |         }
238 |       }
239 |     }
240 |   }
241 | }
242 | 
243 | // assign colors to the game pieces according to the color scheme selected
244 | // TODO: this probably can be reduced with SASS as well as the code above
245 | #colors1:checked ~ #game #piece-player-1 g { fill: $color-green; }
246 | #colors1:checked ~ #game #piece-player-2 g { fill: $color-blue; }
247 | #colors1:checked ~ #game #piece-player-3 g { fill: $color-red; }
248 | #colors1:checked ~ #game #piece-player-4 g { fill: $color-yellow; }
249 | #colors2:checked ~ #game #piece-player-1 g { fill: $color-blue; }
250 | #colors2:checked ~ #game #piece-player-2 g { fill: $color-red; }
251 | #colors2:checked ~ #game #piece-player-3 g { fill: $color-yellow; }
252 | #colors2:checked ~ #game #piece-player-4 g { fill: $color-green; }
253 | #colors3:checked ~ #game #piece-player-1 g { fill: $color-red; }
254 | #colors3:checked ~ #game #piece-player-2 g { fill: $color-yellow; }
255 | #colors3:checked ~ #game #piece-player-3 g { fill: $color-green; }
256 | #colors3:checked ~ #game #piece-player-4 g { fill: $color-blue; }
257 | #colors4:checked ~ #game #piece-player-1 g { fill: $color-yellow; }
258 | #colors4:checked ~ #game #piece-player-2 g { fill: $color-green; }
259 | #colors4:checked ~ #game #piece-player-3 g { fill: $color-blue; }
260 | #colors4:checked ~ #game #piece-player-4 g { fill: $color-red; }
261 | 
262 | /** info pop-up **/
263 | #info { 
264 |   display: none;
265 |   .box {
266 |     width: 75%;
267 |     max-width: none;
268 |     p:last-child {
269 |       text-align: right;
270 |     }
271 |     #close-button {
272 |       display: inline-block;
273 |       background: $color-green;
274 |       border-radius: $border-radius;
275 |       color: white;
276 |       padding: 6px 1rem;
277 |       cursor: pointer;
278 |       transition: background 0.5s;
279 |       &:hover {
280 |         background: darken($color-green, 5%);
281 |       }
282 |     }
283 |   }
284 | }
285 | #show-info:checked {
286 |   ~ #info { display: block; }
287 | }
288 | 
289 | 
290 | /** Instructions **/
291 | #instructions {
292 |   position: fixed;
293 |   z-index: 9999;
294 |   background-color: rgba(0,0,0,0.01);
295 |   top: 0;
296 |   left: 0;
297 |   width: 100%;
298 |   height: 100%;
299 |   display: none;
300 |   #go-to-game {
301 |     position: absolute;
302 |     bottom: 1rem;
303 |     right: 1rem;
304 |     font-size: 1rem;
305 |     z-index: 3;
306 |     color: white;
307 |     cursor: pointer;
308 |   }
309 |   #step {
310 |     display: none;
311 |     position: absolute;
312 |     box-shadow: 0 0 50px calc(200vmax) rgba(0,0,0,0.85), inset 0 0 4px 0 rgba(0,0,0,1);
313 |     transform: translate(-1rem, -1rem);
314 |     border-radius: 100%;
315 |     z-index: 1;
316 |     top: 0;
317 |     left: 1rem;
318 |     width: calc(100px + 2rem);
319 |     height: calc(6rem);
320 |     transition: all 0.75s;
321 |     div {
322 |       position: absolute;
323 |       bottom: -0.5rem;
324 |       line-height: 1.1rem;
325 |       font-size: 1rem;
326 |       color: rgba(255,255,255,0.8);
327 |       left: 1rem;
328 |       width: 80vmin;
329 |       transform: translate(0, 100%);
330 |       -webkit-transform: translate(0, 100%);
331 |       label {
332 |         display: none;
333 |         font-weight: bold;
334 |         cursor: pointer;
335 |         text-decoration: underline;
336 |         &:hover {
337 |           text-decoration: none;
338 |         }
339 |         &:not([for=game-time])::before {
340 |           content: "Next \203A"
341 |         }
342 |       }
343 |     }
344 |   }
345 | }
346 | 
347 | [name=show-instructions] {
348 |   &:checked ~ {
349 |     #instructions, #game, #action, #instructions #step {
350 |       display: block;
351 |     }
352 |   }
353 | }
354 | 
355 | @for $i from 1 to 5 {
356 |   #show-instructions-#{$i}:checked ~ #instructions label[for=show-instructions-#{$i+1}] {
357 |     display: inline-block;
358 |   }
359 | }
360 | #show-instructions-5:checked ~ #instructions label[for=game-time] {
361 |   display: inline-block;
362 | }
363 | 
364 | #show-instructions-1:checked ~ #instructions #step {
365 |   top: 0;
366 |   left: 1rem;
367 |   width: calc(100px + 2rem);
368 |   height: calc(6rem);
369 |   div::before {
370 |     content: "This area indicates whose turn it is at any given moment.";
371 |   }
372 | }
373 | #show-instructions-2:checked ~ #instructions #step {
374 |   top:6rem;
375 |   left: 1rem;
376 |   width: 5rem;
377 |   height: 5rem;
378 |   div::before {
379 |     content: "The active player clicks here to roll the dice.";
380 |   }
381 | }
382 | #show-instructions-3:checked ~ #instructions #step {
383 |   top: 50%;
384 |   left: 50%;
385 |   width: 30vw;
386 |   height: 30vw;
387 |   max-width: 500px;
388 |   max-height: 500px;
389 |   transform: translate(-50%, -50%);
390 |   -webkit-transform: translate(-50%, -50%);
391 |   div {
392 |     transform: translate(-20vmin, 100%);
393 |     -webkit-transform: translate(-20vmin, 100%);
394 |     left: 0;
395 |     &::before {
396 |       content: "The player's piece will advance on the board once the dice is rolled. If the piece falls on a tile with a snake's head, it will fall down to the snake's tail. If it falls on a ladder's bottom, it will go up to the top.";
397 |     }
398 |   }
399 | }
400 | #show-instructions-4:checked ~ #instructions #step {
401 |   top: 0;
402 |   left: calc(100px + 2rem);
403 |   width: calc(100px + 2rem);
404 |   height: calc(6rem);
405 |   div::before {
406 |     content: "After that, click on the button to go to the next player's turn.";
407 |   }
408 | }
409 | #show-instructions-5:checked ~ #instructions #step {
410 |   top: 0;
411 |   left: calc(100vw - 100px - 1rem);
412 |   width: calc(100px + 2rem);
413 |   height: calc(6rem);
414 |   div {
415 |     left: auto;
416 |     right: 0rem;
417 |     &::before {
418 |       content: "If you want more information during the game, click on this button."
419 |     }
420 |   }
421 | }
422 | 
423 | #game-time:checked ~ #instructions {
424 |   display: none;
425 | }
426 | 
427 | /** game screen: board, dice, messages **/
428 | .dice {
429 |   position: absolute;
430 |   display: none;
431 |   visibility: visible;
432 |   top: 6rem;
433 |   left: 1rem;
434 |   width: 3rem;
435 |   height: 3rem;
436 |   background: white;
437 |   border-radius: $border-radius;
438 |   box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.042);
439 |   z-index:1;
440 |   &::before {
441 |     content: "";
442 |     display: block; 
443 |     height: 100%; 
444 |     width: 100%;
445 |     font-size: 0.8rem;
446 |     box-sizing: border-box;
447 |     cursor: pointer;
448 |     padding-top: 0.5rem;
449 |     background-repeat: no-repeat;
450 |     background-position: center center;
451 |   }
452 | }
453 | 
454 | 
455 | @for $i from 1 to 5 {
456 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label,
457 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label, 
458 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label,
459 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label,
460 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label,
461 |   #turn#{$i}:checked ~ .game-time:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label {
462 |     display: block;
463 |     left: 1rem;
464 |     text-align: center;
465 |     animation: changeOrder $animation-time infinite;
466 |     -webkit-animation: changeOrder $animation-time infinite;
467 |   }
468 | }
469 | 
470 | @for $i from 1 to 5 {
471 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label { animation-delay: 0s !important; }
472 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label { animation-delay: -$animation-time/6 !important; }
473 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label { animation-delay: -2*$animation-time/6 !important; }
474 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label { animation-delay: -3*$animation-time/6 !important; }
475 |   #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; }
476 |   #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; }
477 | }
478 | 
479 | @for $i from 1 to 5 {
480 |   
481 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label::before { background-image: 
482 |         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>");
483 |        }
484 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label::before { background-image: 
485 |         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>"); }
486 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label::before { background-image: 
487 |         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>"); }
488 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label::before { background-image: 
489 |         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>"); }
490 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label::before { background-image: 
491 |         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>"); }
492 |   #turn#{$i}:checked ~ [name=cb-player#{$i}]:checked + label + input + label + input + label + input + label + input + label + input + label + input + label::before { background-image: 
493 |         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>"); }
494 |   
495 | }
496 | 
497 | 
498 | // label:active adapted from solution by Temani Afif. Ref: https://stackoverflow.com/a/51451218/3695983 
499 | label.dice:active {
500 |   position:static !important; 
501 |   margin-left: 50px !important;
502 |   background: none !important;
503 |   font-size: 0;
504 |   &::before {
505 |     content:"";
506 |     position:absolute;
507 |     top:0;
508 |     right:-50px;
509 |     left:0;
510 |     bottom:0;
511 |     z-index:200;
512 |   }
513 | }
514 |   
515 | #game {
516 |   display: none;
517 |   .tab {
518 |     position: absolute;
519 |     top: 0;
520 |     background: white;
521 |     border-radius: 0 0 3px 3px;
522 |     box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
523 |     z-index: 9;
524 |     float:left;
525 |     margin-left: 1rem;
526 |     &::before {
527 |       text-align: center;
528 |       display: block;
529 |       padding: 6px 16px;
530 |       color: white;
531 |       background: $color-blue;
532 |       height: 0.7rem;
533 |       line-height: 0.7rem;
534 |       font-size: 0.75rem;
535 |       font-weight: bold;
536 |       white-space: nowrap;
537 |       text-transform: uppercase;
538 |       font-size: 0.95rem; 
539 |     }
540 |     &::after, &#player-info span {
541 |       display: block;
542 |       text-align: center;
543 |       padding: 6px 16px;
544 |       height: 2rem;
545 |       line-height: 1.9rem;
546 |       white-space: nowrap;
547 |     }
548 |     &#player-info {
549 |       min-width: 100px;
550 |       &::before { content: "Turn"; }
551 |       span { 
552 |         font-weight: bolder;
553 |         &::before {
554 |           content: "\25CF\00A0";
555 |         }
556 |         &::after {
557 |           content: " 1"; 
558 |           font-weight: bolder; 
559 |         }
560 |       }
561 |     }
562 |     &#dice {
563 |       cursor: pointer;
564 |       &::before { content: "Dice"; }
565 |       &::after { 
566 |         content: "Roll"; 
567 |       }
568 |     }
569 |     &#more-info {
570 |       cursor: pointer;
571 |       left: auto;
572 |       right: 1rem;
573 |       width: 100px;
574 |       z-index: 1;
575 |       &::before { content: "About"; }
576 |       &::after { content: "More info" }
577 |     }
578 |     &#action {
579 |       cursor: pointer;
580 |       left: calc(100px + 1rem);
581 |       width: 100px;
582 |       &::before { content: "Action"; }
583 |       &::after { content: "Next player" }
584 |       label {
585 |         position: absolute;
586 |         top: 0;
587 |         left: 0;
588 |         bottom: 0;
589 |         right: 0;
590 |         cursor: pointer;
591 |       }
592 |     }
593 |   }
594 |   #board {
595 |     width: 70%;
596 |     max-width: 500px;
597 |     border: 3px solid $color-blue;
598 |     border-radius: $border-radius * 2;
599 |     position: absolute;
600 |     top: 50%;
601 |     left: 50%;
602 |     transform: translate(-50%, -50%);
603 |     -webkit-transform: translate(-50%, -50%);
604 |     background: white;
605 |     margin-top: 2.5rem;
606 |     box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
607 |     .tile {
608 |       float: left;
609 |       width: 10%;
610 |       position: relative;
611 |       height: 0;
612 |       padding-top: 10%;
613 |       box-sizing: border-box;
614 |       border-left: 1px solid rgba(0,0,0,0.1);
615 |       border-right: 1px solid rgba(0,0,0,0.1);
616 |       border-top: 1px solid rgba(0,0,0,1);
617 |       border-bottom: 1px solid rgba(0,0,0,1);
618 |       background: lighten(#9ad0ac,15%);
619 |       &::before {
620 |         content: attr(data-index);
621 |         position: absolute;
622 |         top: 0rem;
623 |         left: 0.15rem;
624 |         font-size: 0.66rem;
625 |       }
626 |       &.tile6, &.tile12, &.tile18, &.tile22, &.tile23, &.tile28, &.tile30, &.tile34, &.tile36, &.tile39, &.tile55, &.tile79 {
627 |         &::before {
628 |           left: auto;
629 |           right: 0.15rem;
630 |         }
631 |       }
632 |       &.tile52::before {
633 |         top:auto;
634 |         bottom:0rem;
635 |       }
636 |       &.tile76::before {
637 |         left: 0.6rem;
638 |       }
639 |     }
640 |     @for $i from 1 to 11 {
641 |       .tile#{$i} { border-bottom: 1px solid transparent; }
642 |       .tile#{$i+90} { border-top: 1px solid transparent; }
643 |       .tile#{$i*10} { border-top: 1px solid rgba(0,0,0,0.1); }
644 |       .tile#{$i*10+1} { border-bottom: 1px solid rgba(0,0,0,0.1); }
645 |     }
646 |     .tile1, .tile15, .tile24, .tile38, .tile49, .tile55, .tile65, .tile76, .tile86, .tile94 {
647 |       background: lighten(#f198b4, 15%);
648 |     }
649 | 
650 |     .tile2, .tile16, .tile23, .tile35, .tile42, .tile56, .tile64, .tile79, .tile87, .tile93 {
651 |       background: lighten(#C3D9FF, 8%);
652 |     }
653 | 
654 |     .tile3, .tile18, .tile26, .tile33, .tile41, .tile58, .tile68, .tile78, .tile81, .tile96 {
655 |       background: lighten(#f89448, 30%);
656 |     }
657 | 
658 |     .tile4, .tile11, .tile29, .tile40, .tile47, .tile51, .tile61, .tile77, .tile88, .tile99 {
659 |       background: lighten(#c297c5, 23%);
660 |     }
661 | 
662 |     .tile5, .tile19, .tile27, .tile32, .tile44, .tile59, .tile69, .tile80, .tile89, .tile97 {
663 |       background: lighten(#68caef, 18%);
664 |     }
665 | 
666 |     .tile6, .tile20, .tile28, .tile31, .tile45, .tile60, .tile70, .tile75, .tile85, .tile98 {
667 |       background: lighten(#fef471, 21%);
668 |     }
669 | 
670 |     .tile7, .tile13, .tile21, .tile36, .tile50, .tile53, .tile63, .tile74, .tile84, .tile91 {
671 |       background: lighten(#b9e6fd, 5%);
672 |     }
673 | 
674 |     .tile8, .tile12, .tile30, .tile39, .tile46, .tile52, .tile62, .tile73, .tile90, .tile100 {
675 |       background: lighten(#e5b75f,19%);
676 |     }
677 | 
678 |     .tile9, .tile14, .tile22, .tile37, .tile48, .tile54, .tile66, .tile72, .tile83, .tile96 {
679 |       background: lighten(#f37859,20%);
680 |     }
681 |   }
682 | }
683 | 
684 | #action label { display: none; }
685 | #players1:checked ~ #turn1:checked ~ #game-time:checked ~ #game #action { display:none; }
686 | #players1:checked ~ #turn1:checked ~ #game #turn-changer1 { display: block; }
687 | #players2:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
688 | #players3:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
689 | #players4:checked ~ #turn1:checked ~ #game #turn-changer2 { display: block; }
690 | #players2:checked ~ #turn2:checked ~ #game #turn-changer1 { display: block; }
691 | #players3:checked ~ #turn2:checked ~ #game #turn-changer3 { display: block; }
692 | #players4:checked ~ #turn2:checked ~ #game #turn-changer3 { display: block; }
693 | #players3:checked ~ #turn3:checked ~ #game #turn-changer1 { display: block; }
694 | #players4:checked ~ #turn3:checked ~ #game #turn-changer4 { display: block; }
695 | #players4:checked ~ #turn4:checked ~ #game #turn-changer1 { display: block; }
696 | 
697 | // assign colors to the game pieces according to the color scheme selected
698 | // TODO: this probably can be reduced with SASS as well as the code above for piece colors
699 | #turn1:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-green; }
700 | #turn2:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-blue; }
701 | #turn3:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-red; }
702 | #turn4:checked ~ #colors1:checked ~ #game #player-info span::before { color: $color-yellow; }
703 | #turn1:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-blue; }
704 | #turn2:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-red; }
705 | #turn3:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-yellow; }
706 | #turn4:checked ~ #colors2:checked ~ #game #player-info span::before { color: $color-green; }
707 | #turn1:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-red; }
708 | #turn2:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-yellow; }
709 | #turn3:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-green; }
710 | #turn4:checked ~ #colors3:checked ~ #game #player-info span::before { color: $color-blue; }
711 | #turn1:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-yellow; }
712 | #turn2:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-green; }
713 | #turn3:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-blue; }
714 | #turn4:checked ~ #colors4:checked ~ #game #player-info span::before { color: $color-red; }
715 | 
716 | @for $i from 1 to 5 {
717 |   #turn#{$i}:checked ~ #game .tab#player-info span::after{
718 |     content: " #{$i}";
719 |   }
720 | }
721 | 
722 | // show the game board when Start is pressed
723 | #game-time:checked ~ #game {
724 |   display: block;
725 | }
726 | 
727 | svg {
728 |   &#snakeladders{
729 |     position: absolute;
730 |     top: 0;
731 |     left: 0;
732 |     width: 100%;
733 |     height: 100%;
734 |     g {
735 |       &.ladders-big {
736 |         stroke: #8B4513;
737 |         stroke-width: 4;
738 |         stroke-linecap: round;
739 |       }
740 |       &.ladders-small {
741 |         stroke: #8B4513;
742 |         stroke-width: 2.5;
743 |         stroke-linecap: round;
744 |       }
745 |     }
746 |   }
747 |   .snake {
748 |     stroke: none;
749 |   }
750 |   .eye {
751 |     fill: black;
752 |     stroke: white;
753 |     stroke-width: 6;
754 |   }
755 |   &.piece {
756 |     position: absolute;
757 |     width: 8%;
758 |     bottom: 0;
759 |     left: 0;
760 |     transform: translate(-2%, -2%);
761 |     -webkit-transform: translate(-2%, -2%);
762 |     transition: bottom 0.5s, left 0.5s;
763 |     g {
764 |       fill: $color-red;
765 |       stroke-width: 4;
766 |       stroke: rgba(0,0,0,0.3);
767 |     }
768 |     &#piece-player-1 {
769 |       transform: translate(-5%, -3%);
770 |       -webkit-transform: translate(-5%, -3%);
771 |       z-index:44;
772 |       g {
773 |         fill: $color-red;
774 |       }
775 |     }
776 |     &#piece-player-2 {
777 |       transform: translate(40%, -40%);
778 |       -webkit-transform: translate(40%, -40%);
779 |       z-index: 41;
780 |       g {
781 |         fill: $color-blue;
782 |       }
783 |     }
784 |     &#piece-player-3 {
785 |       transform: translate(42%, -7%);
786 |       -webkit-transform: translate(42%, -7%);
787 |       z-index: 43;
788 |       g {
789 |         fill: $color-green;
790 |       }
791 |     }
792 |     &#piece-player-4 {
793 |       transform: translate(-3%, -41%);
794 |       -webkit-transform: translate(-3%, -41%);
795 |       z-index: 42;
796 |       g {
797 |         fill: $color-yellow;
798 |       }
799 |     }
800 |   }
801 | }
802 | 
803 | // generate the different positions on each tile
804 | $positions: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0;
805 | @for $i from 1 through 4 {
806 |   #cb-pl#{$i+"-0"}:checked ~ #game #piece-player-#{$i} {
807 |     left: -10%;
808 |     bottom: 0;
809 |   }
810 |   @for $j from 1 to 101 {
811 |     #cb-pl#{$i}-#{$j}:checked {
812 |       ~ #game #piece-player-#{$i} { 
813 |         left: nth($positions, (($j - 1) % 20) + 1) * 1%; 
814 |         bottom: nth($positions, floor(($j - 1) / 10) + 1) * 1%; 
815 |       }  
816 |     }
817 |   }
818 |   @for $j from 101 to 107 {
819 |     #cb-pl#{$i}-#{$j}:checked {
820 |       ~ #game #piece-player-#{$i} { 
821 |         left: 0;
822 |         bottom: 90%;
823 |       }
824 |     }
825 |   }
826 | }
827 | 
828 | // hide the players that are not active
829 | @for $i from 1 to 5 {
830 |   @for $j from $i+1 to 5 {
831 |     #players#{$i}:checked ~ #game #piece-player-#{$j} { 
832 |       display: none !important; 
833 |     }
834 |   }
835 | }
836 | 
837 | 
838 | // all these popups have a similar code below that could be reduced with a mixin (TODO)
839 | #snake-popup, #ladder-popup, #home-popup, #congratulations {
840 |   opacity: 0;
841 |   z-index: -1;
842 |   transition: opacity 0s;
843 |   label {
844 |     display: none;
845 |   }
846 |   svg {
847 |     height:100%;
848 |     position:absolute;
849 |     right:0;
850 |     top:0;
851 |     transform:translate(80%, 0);
852 |   }
853 | }
854 | 
855 | // when we fall in a ladder, show the ladder popup
856 | @each $l in $ladders {
857 |   .cb[id$='-#{$l}'] {
858 |     &:checked {
859 |       ~ .dice { 
860 |         display: none !important; 
861 |       }
862 |       ~ #ladder-popup {
863 |         opacity: 1;
864 |         z-index: 99999;
865 |         transition: opacity 0.15s;
866 |         transition-delay: 0.5s;
867 |         -webkit-transition-delay: 0.5s;
868 |         label {
869 |           background: $color-green;
870 |           border-radius: $border-radius;
871 |           color: white;
872 |           padding: 6px 1rem;
873 |           cursor: pointer;
874 |           transition: background 0.5s;
875 |           margin-top: 1rem;
876 |           &:hover {
877 |             background: darken($color-green, 5%);
878 |           }
879 |         }
880 |       }
881 |     }
882 |   }
883 | }
884 | 
885 | // when we fall in a ladder, show the ladder popup
886 | @each $s in $snakes {
887 |   .cb[id$='-#{$s}'] {
888 |     &:checked {
889 |       ~ .dice { 
890 |         display: none !important; 
891 |       }
892 |       ~ #snake-popup {
893 |         opacity: 1;
894 |         z-index: 99999;
895 |         transition: opacity 0.15s;
896 |         transition-delay: 0.5s;
897 |         -webkit-transition-delay: 0.5s;
898 |         label {
899 |           background: $color-green;
900 |           border-radius: $border-radius;
901 |           color: white;
902 |           padding: 6px 1rem;
903 |           cursor: pointer;
904 |           transition: background 0.5s;
905 |           margin-top: 1rem;
906 |           &:hover {
907 |             background: darken($color-green, 5%);
908 |           }
909 |         }
910 |       }
911 |     }
912 |   }
913 | }
914 | 
915 | // when we fall in a ladder, show the ladder popup
916 | @for $s from 101 to 107 {
917 |   .cb[id$='-#{$s}'] {
918 |     &:checked {
919 |       ~ .dice { 
920 |         display: none !important; 
921 |       }
922 |       ~ #home-popup {
923 |         opacity: 1;
924 |         z-index: 99999;
925 |         transition: opacity 0.15s;
926 |         transition-delay: 0.5s;
927 |         -webkit-transition-delay: 0.5s;
928 |         label {
929 |           background: $color-green;
930 |           border-radius: $border-radius;
931 |           color: white;
932 |           padding: 6px 1rem;
933 |           cursor: pointer;
934 |           transition: background 0.5s;
935 |           margin-top: 1rem;
936 |           &:hover {
937 |             background: darken($color-green, 5%);
938 |           }
939 |         }
940 |       }
941 |     }
942 |   }
943 | }
944 | 
945 | // show the right button in the ladder/snake popup
946 | @for $i from 1 to 5 {
947 |   @each $l in $ladders {
948 |     #cb-pl#{$i}-#{$l}:checked ~ #ladder-popup #ladder-pl#{$i}-#{$l} { display: inline-block; }
949 |   }
950 |   @each $s in $snakes {
951 |     #cb-pl#{$i}-#{$s}:checked ~ #snake-popup #snake-pl#{$i}-#{$s} { display: inline-block; }
952 |   }
953 |   @for $j from 101 to 107 {
954 |     #cb-pl#{$i}-#{$j}:checked ~ #home-popup #home-pl#{$i}-#{$j} { display: inline-block; }
955 |   }
956 | }
957 | 
958 | .cb[id$='-100']:checked {
959 |   ~ #congratulations {
960 |     opacity: 1;
961 |     z-index: 99999;
962 |     transition: opacity 0.15s;
963 |     transition-delay: 0.5s;
964 |     -webkit-transition-delay: 0.5s;
965 |   }
966 | }
967 | 
968 | @media (max-width: 400px) {
969 |   #game {
970 |     #board .tile::before {
971 |       font-size: 0.4rem;
972 |     }
973 |     .tab {
974 |       &::before {
975 |         font-size: 0.65rem;
976 |       }
977 |       &::after, &#player-info span {
978 |         font-size: 0.9rem;
979 |         height: 1.5rem;
980 |         line-height: 1.4rem;
981 |       }
982 |     }
983 |   }
984 | }
985 | 


--------------------------------------------------------------------------------
/animated-dice/index.html:
--------------------------------------------------------------------------------
   1 | <!doctype html>
   2 | <html lang="en">
   3 |     <head>
   4 |         <meta charset="utf-8" />
   5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
   7 |         <meta name="author" content="Alvaro Montoro" />
   8 |         <meta name="description" content="This version of Snakes and Ladders (aka Chutes and Ladders) is developed only in CSS and HTML, without a single line of JavaScript." />
   9 |         <link rel="author" href="https://github.com/alvaromontoro" />
  10 |         
  11 |         <title>Snakes and Ladders</title>
  12 | 
  13 |         <link rel="stylesheet" href="./styles.css" />
  14 |     </head>
  15 | 
  16 |     <body>
  17 | 
  18 |         <!-- checkboxes to control states and variables-->
  19 |         <input type="radio" name="players" id="players1" checked="checked" value="1"/>
  20 |         <input type="radio" name="players" id="players2" value="2"/>
  21 |         <input type="radio" name="players" id="players3" value="3"/>
  22 |         <input type="radio" name="players" id="players4" value="4"/>
  23 |         <input type="radio" name="turn" id="turn1" checked="checked" value="1"/>
  24 |         <input type="radio" name="turn" id="turn2" value="2"/>
  25 |         <input type="radio" name="turn" id="turn3" value="3"/>
  26 |         <input type="radio" name="turn" id="turn4" value="4"/>
  27 |         <input type="radio" name="colors" checked="checked" id="colors1"/>
  28 |         <input type="radio" name="colors" id="colors2"/>
  29 |         <input type="radio" name="colors" id="colors3"/>
  30 |         <input type="radio" name="colors" id="colors4"/>
  31 |         <input class="game-time" type="checkbox" id="game-time" name="game-time"/>
  32 |         <input type="checkbox" name="show-info" id="show-info"/>
  33 |         <input type="checkbox" name="play-fx" id="play-fx"/>
  34 |         <input class="game-time" type="radio" id="show-instructions-1" name="show-instructions"/>
  35 |         <input class="game-time" type="radio" id="show-instructions-2" name="show-instructions"/>
  36 |         <input class="game-time" type="radio" id="show-instructions-3" name="show-instructions"/>
  37 |         <input class="game-time" type="radio" id="show-instructions-4" name="show-instructions"/>
  38 |         <input class="game-time" type="radio" id="show-instructions-5" name="show-instructions"/>
  39 |         <!-- inputs and labels that control the piece position for player 1-->
  40 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-0" checked="checked"/>
  41 |         <label class="dice" for="cb-pl1-0"></label>
  42 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-1"/>
  43 |         <label class="dice" for="cb-pl1-1"></label>
  44 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-2"/>
  45 |         <label class="dice" for="cb-pl1-2"></label>
  46 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-3"/>
  47 |         <label class="dice" for="cb-pl1-3"></label>
  48 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-4"/>
  49 |         <label class="dice" for="cb-pl1-4"></label>
  50 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-5"/>
  51 |         <label class="dice" for="cb-pl1-5"></label>
  52 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-6"/>
  53 |         <label class="dice" for="cb-pl1-6"></label>
  54 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-7"/>
  55 |         <label class="dice" for="cb-pl1-7"></label>
  56 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-8"/>
  57 |         <label class="dice" for="cb-pl1-8"></label>
  58 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-9"/>
  59 |         <label class="dice" for="cb-pl1-9"></label>
  60 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-10"/>
  61 |         <label class="dice" for="cb-pl1-10"></label>
  62 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-11"/>
  63 |         <label class="dice" for="cb-pl1-11"></label>
  64 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-12"/>
  65 |         <label class="dice" for="cb-pl1-12"></label>
  66 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-13"/>
  67 |         <label class="dice" for="cb-pl1-13"></label>
  68 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-14"/>
  69 |         <label class="dice" for="cb-pl1-14"></label>
  70 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-15"/>
  71 |         <label class="dice" for="cb-pl1-15"></label>
  72 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-16"/>
  73 |         <label class="dice" for="cb-pl1-16"></label>
  74 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-17"/>
  75 |         <label class="dice" for="cb-pl1-17"></label>
  76 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-18"/>
  77 |         <label class="dice" for="cb-pl1-18"></label>
  78 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-19"/>
  79 |         <label class="dice" for="cb-pl1-19"></label>
  80 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-20"/>
  81 |         <label class="dice" for="cb-pl1-20"></label>
  82 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-21"/>
  83 |         <label class="dice" for="cb-pl1-21"></label>
  84 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-22"/>
  85 |         <label class="dice" for="cb-pl1-22"></label>
  86 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-23"/>
  87 |         <label class="dice" for="cb-pl1-23"></label>
  88 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-24"/>
  89 |         <label class="dice" for="cb-pl1-24"></label>
  90 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-25"/>
  91 |         <label class="dice" for="cb-pl1-25"></label>
  92 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-26"/>
  93 |         <label class="dice" for="cb-pl1-26"></label>
  94 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-27"/>
  95 |         <label class="dice" for="cb-pl1-27"></label>
  96 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-28"/>
  97 |         <label class="dice" for="cb-pl1-28"></label>
  98 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-29"/>
  99 |         <label class="dice" for="cb-pl1-29"></label>
 100 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-30"/>
 101 |         <label class="dice" for="cb-pl1-30"></label>
 102 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-31"/>
 103 |         <label class="dice" for="cb-pl1-31"></label>
 104 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-32"/>
 105 |         <label class="dice" for="cb-pl1-32"></label>
 106 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-33"/>
 107 |         <label class="dice" for="cb-pl1-33"></label>
 108 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-34"/>
 109 |         <label class="dice" for="cb-pl1-34"></label>
 110 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-35"/>
 111 |         <label class="dice" for="cb-pl1-35"></label>
 112 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-36"/>
 113 |         <label class="dice" for="cb-pl1-36"></label>
 114 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-37"/>
 115 |         <label class="dice" for="cb-pl1-37"></label>
 116 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-38"/>
 117 |         <label class="dice" for="cb-pl1-38"></label>
 118 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-39"/>
 119 |         <label class="dice" for="cb-pl1-39"></label>
 120 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-40"/>
 121 |         <label class="dice" for="cb-pl1-40"></label>
 122 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-41"/>
 123 |         <label class="dice" for="cb-pl1-41"></label>
 124 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-42"/>
 125 |         <label class="dice" for="cb-pl1-42"></label>
 126 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-43"/>
 127 |         <label class="dice" for="cb-pl1-43"></label>
 128 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-44"/>
 129 |         <label class="dice" for="cb-pl1-44"></label>
 130 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-45"/>
 131 |         <label class="dice" for="cb-pl1-45"></label>
 132 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-46"/>
 133 |         <label class="dice" for="cb-pl1-46"></label>
 134 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-47"/>
 135 |         <label class="dice" for="cb-pl1-47"></label>
 136 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-48"/>
 137 |         <label class="dice" for="cb-pl1-48"></label>
 138 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-49"/>
 139 |         <label class="dice" for="cb-pl1-49"></label>
 140 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-50"/>
 141 |         <label class="dice" for="cb-pl1-50"></label>
 142 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-51"/>
 143 |         <label class="dice" for="cb-pl1-51"></label>
 144 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-52"/>
 145 |         <label class="dice" for="cb-pl1-52"></label>
 146 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-53"/>
 147 |         <label class="dice" for="cb-pl1-53"></label>
 148 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-54"/>
 149 |         <label class="dice" for="cb-pl1-54"></label>
 150 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-55"/>
 151 |         <label class="dice" for="cb-pl1-55"></label>
 152 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-56"/>
 153 |         <label class="dice" for="cb-pl1-56"></label>
 154 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-57"/>
 155 |         <label class="dice" for="cb-pl1-57"></label>
 156 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-58"/>
 157 |         <label class="dice" for="cb-pl1-58"></label>
 158 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-59"/>
 159 |         <label class="dice" for="cb-pl1-59"></label>
 160 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-60"/>
 161 |         <label class="dice" for="cb-pl1-60"></label>
 162 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-61"/>
 163 |         <label class="dice" for="cb-pl1-61"></label>
 164 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-62"/>
 165 |         <label class="dice" for="cb-pl1-62"></label>
 166 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-63"/>
 167 |         <label class="dice" for="cb-pl1-63"></label>
 168 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-64"/>
 169 |         <label class="dice" for="cb-pl1-64"></label>
 170 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-65"/>
 171 |         <label class="dice" for="cb-pl1-65"></label>
 172 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-66"/>
 173 |         <label class="dice" for="cb-pl1-66"></label>
 174 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-67"/>
 175 |         <label class="dice" for="cb-pl1-67"></label>
 176 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-68"/>
 177 |         <label class="dice" for="cb-pl1-68"></label>
 178 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-69"/>
 179 |         <label class="dice" for="cb-pl1-69"></label>
 180 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-70"/>
 181 |         <label class="dice" for="cb-pl1-70"></label>
 182 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-71"/>
 183 |         <label class="dice" for="cb-pl1-71"></label>
 184 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-72"/>
 185 |         <label class="dice" for="cb-pl1-72"></label>
 186 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-73"/>
 187 |         <label class="dice" for="cb-pl1-73"></label>
 188 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-74"/>
 189 |         <label class="dice" for="cb-pl1-74"></label>
 190 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-75"/>
 191 |         <label class="dice" for="cb-pl1-75"></label>
 192 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-76"/>
 193 |         <label class="dice" for="cb-pl1-76"></label>
 194 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-77"/>
 195 |         <label class="dice" for="cb-pl1-77"></label>
 196 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-78"/>
 197 |         <label class="dice" for="cb-pl1-78"></label>
 198 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-79"/>
 199 |         <label class="dice" for="cb-pl1-79"></label>
 200 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-80"/>
 201 |         <label class="dice" for="cb-pl1-80"></label>
 202 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-81"/>
 203 |         <label class="dice" for="cb-pl1-81"></label>
 204 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-82"/>
 205 |         <label class="dice" for="cb-pl1-82"></label>
 206 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-83"/>
 207 |         <label class="dice" for="cb-pl1-83"></label>
 208 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-84"/>
 209 |         <label class="dice" for="cb-pl1-84"></label>
 210 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-85"/>
 211 |         <label class="dice" for="cb-pl1-85"></label>
 212 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-86"/>
 213 |         <label class="dice" for="cb-pl1-86"></label>
 214 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-87"/>
 215 |         <label class="dice" for="cb-pl1-87"></label>
 216 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-88"/>
 217 |         <label class="dice" for="cb-pl1-88"></label>
 218 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-89"/>
 219 |         <label class="dice" for="cb-pl1-89"></label>
 220 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-90"/>
 221 |         <label class="dice" for="cb-pl1-90"></label>
 222 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-91"/>
 223 |         <label class="dice" for="cb-pl1-91"></label>
 224 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-92"/>
 225 |         <label class="dice" for="cb-pl1-92"></label>
 226 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-93"/>
 227 |         <label class="dice" for="cb-pl1-93"></label>
 228 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-94"/>
 229 |         <label class="dice" for="cb-pl1-94"></label>
 230 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-95"/>
 231 |         <label class="dice" for="cb-pl1-95"></label>
 232 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-96"/>
 233 |         <label class="dice" for="cb-pl1-96"></label>
 234 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-97"/>
 235 |         <label class="dice" for="cb-pl1-97"></label>
 236 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-98"/>
 237 |         <label class="dice" for="cb-pl1-98"></label>
 238 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-99"/>
 239 |         <label class="dice" for="cb-pl1-99"></label>
 240 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-100"/>
 241 |         <label class="dice" for="cb-pl1-100"></label>
 242 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-101"/>
 243 |         <label class="dice" for="cb-pl1-101"></label>
 244 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-102"/>
 245 |         <label class="dice" for="cb-pl1-102"></label>
 246 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-103"/>
 247 |         <label class="dice" for="cb-pl1-103"></label>
 248 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-104"/>
 249 |         <label class="dice" for="cb-pl1-104"></label>
 250 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-105"/>
 251 |         <label class="dice" for="cb-pl1-105"></label>
 252 |         <input class="cb" type="radio" name="cb-player1" id="cb-pl1-106"/>
 253 |         <label class="dice" for="cb-pl1-106"></label>
 254 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-0" checked="checked"/>
 255 |         <label class="dice" for="cb-pl2-0"></label>
 256 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-1"/>
 257 |         <label class="dice" for="cb-pl2-1"></label>
 258 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-2"/>
 259 |         <label class="dice" for="cb-pl2-2"></label>
 260 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-3"/>
 261 |         <label class="dice" for="cb-pl2-3"></label>
 262 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-4"/>
 263 |         <label class="dice" for="cb-pl2-4"></label>
 264 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-5"/>
 265 |         <label class="dice" for="cb-pl2-5"></label>
 266 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-6"/>
 267 |         <label class="dice" for="cb-pl2-6"></label>
 268 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-7"/>
 269 |         <label class="dice" for="cb-pl2-7"></label>
 270 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-8"/>
 271 |         <label class="dice" for="cb-pl2-8"></label>
 272 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-9"/>
 273 |         <label class="dice" for="cb-pl2-9"></label>
 274 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-10"/>
 275 |         <label class="dice" for="cb-pl2-10"></label>
 276 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-11"/>
 277 |         <label class="dice" for="cb-pl2-11"></label>
 278 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-12"/>
 279 |         <label class="dice" for="cb-pl2-12"></label>
 280 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-13"/>
 281 |         <label class="dice" for="cb-pl2-13"></label>
 282 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-14"/>
 283 |         <label class="dice" for="cb-pl2-14"></label>
 284 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-15"/>
 285 |         <label class="dice" for="cb-pl2-15"></label>
 286 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-16"/>
 287 |         <label class="dice" for="cb-pl2-16"></label>
 288 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-17"/>
 289 |         <label class="dice" for="cb-pl2-17"></label>
 290 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-18"/>
 291 |         <label class="dice" for="cb-pl2-18"></label>
 292 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-19"/>
 293 |         <label class="dice" for="cb-pl2-19"></label>
 294 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-20"/>
 295 |         <label class="dice" for="cb-pl2-20"></label>
 296 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-21"/>
 297 |         <label class="dice" for="cb-pl2-21"></label>
 298 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-22"/>
 299 |         <label class="dice" for="cb-pl2-22"></label>
 300 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-23"/>
 301 |         <label class="dice" for="cb-pl2-23"></label>
 302 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-24"/>
 303 |         <label class="dice" for="cb-pl2-24"></label>
 304 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-25"/>
 305 |         <label class="dice" for="cb-pl2-25"></label>
 306 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-26"/>
 307 |         <label class="dice" for="cb-pl2-26"></label>
 308 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-27"/>
 309 |         <label class="dice" for="cb-pl2-27"></label>
 310 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-28"/>
 311 |         <label class="dice" for="cb-pl2-28"></label>
 312 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-29"/>
 313 |         <label class="dice" for="cb-pl2-29"></label>
 314 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-30"/>
 315 |         <label class="dice" for="cb-pl2-30"></label>
 316 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-31"/>
 317 |         <label class="dice" for="cb-pl2-31"></label>
 318 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-32"/>
 319 |         <label class="dice" for="cb-pl2-32"></label>
 320 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-33"/>
 321 |         <label class="dice" for="cb-pl2-33"></label>
 322 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-34"/>
 323 |         <label class="dice" for="cb-pl2-34"></label>
 324 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-35"/>
 325 |         <label class="dice" for="cb-pl2-35"></label>
 326 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-36"/>
 327 |         <label class="dice" for="cb-pl2-36"></label>
 328 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-37"/>
 329 |         <label class="dice" for="cb-pl2-37"></label>
 330 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-38"/>
 331 |         <label class="dice" for="cb-pl2-38"></label>
 332 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-39"/>
 333 |         <label class="dice" for="cb-pl2-39"></label>
 334 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-40"/>
 335 |         <label class="dice" for="cb-pl2-40"></label>
 336 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-41"/>
 337 |         <label class="dice" for="cb-pl2-41"></label>
 338 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-42"/>
 339 |         <label class="dice" for="cb-pl2-42"></label>
 340 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-43"/>
 341 |         <label class="dice" for="cb-pl2-43"></label>
 342 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-44"/>
 343 |         <label class="dice" for="cb-pl2-44"></label>
 344 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-45"/>
 345 |         <label class="dice" for="cb-pl2-45"></label>
 346 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-46"/>
 347 |         <label class="dice" for="cb-pl2-46"></label>
 348 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-47"/>
 349 |         <label class="dice" for="cb-pl2-47"></label>
 350 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-48"/>
 351 |         <label class="dice" for="cb-pl2-48"></label>
 352 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-49"/>
 353 |         <label class="dice" for="cb-pl2-49"></label>
 354 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-50"/>
 355 |         <label class="dice" for="cb-pl2-50"></label>
 356 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-51"/>
 357 |         <label class="dice" for="cb-pl2-51"></label>
 358 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-52"/>
 359 |         <label class="dice" for="cb-pl2-52"></label>
 360 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-53"/>
 361 |         <label class="dice" for="cb-pl2-53"></label>
 362 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-54"/>
 363 |         <label class="dice" for="cb-pl2-54"></label>
 364 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-55"/>
 365 |         <label class="dice" for="cb-pl2-55"></label>
 366 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-56"/>
 367 |         <label class="dice" for="cb-pl2-56"></label>
 368 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-57"/>
 369 |         <label class="dice" for="cb-pl2-57"></label>
 370 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-58"/>
 371 |         <label class="dice" for="cb-pl2-58"></label>
 372 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-59"/>
 373 |         <label class="dice" for="cb-pl2-59"></label>
 374 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-60"/>
 375 |         <label class="dice" for="cb-pl2-60"></label>
 376 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-61"/>
 377 |         <label class="dice" for="cb-pl2-61"></label>
 378 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-62"/>
 379 |         <label class="dice" for="cb-pl2-62"></label>
 380 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-63"/>
 381 |         <label class="dice" for="cb-pl2-63"></label>
 382 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-64"/>
 383 |         <label class="dice" for="cb-pl2-64"></label>
 384 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-65"/>
 385 |         <label class="dice" for="cb-pl2-65"></label>
 386 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-66"/>
 387 |         <label class="dice" for="cb-pl2-66"></label>
 388 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-67"/>
 389 |         <label class="dice" for="cb-pl2-67"></label>
 390 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-68"/>
 391 |         <label class="dice" for="cb-pl2-68"></label>
 392 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-69"/>
 393 |         <label class="dice" for="cb-pl2-69"></label>
 394 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-70"/>
 395 |         <label class="dice" for="cb-pl2-70"></label>
 396 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-71"/>
 397 |         <label class="dice" for="cb-pl2-71"></label>
 398 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-72"/>
 399 |         <label class="dice" for="cb-pl2-72"></label>
 400 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-73"/>
 401 |         <label class="dice" for="cb-pl2-73"></label>
 402 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-74"/>
 403 |         <label class="dice" for="cb-pl2-74"></label>
 404 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-75"/>
 405 |         <label class="dice" for="cb-pl2-75"></label>
 406 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-76"/>
 407 |         <label class="dice" for="cb-pl2-76"></label>
 408 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-77"/>
 409 |         <label class="dice" for="cb-pl2-77"></label>
 410 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-78"/>
 411 |         <label class="dice" for="cb-pl2-78"></label>
 412 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-79"/>
 413 |         <label class="dice" for="cb-pl2-79"></label>
 414 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-80"/>
 415 |         <label class="dice" for="cb-pl2-80"></label>
 416 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-81"/>
 417 |         <label class="dice" for="cb-pl2-81"></label>
 418 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-82"/>
 419 |         <label class="dice" for="cb-pl2-82"></label>
 420 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-83"/>
 421 |         <label class="dice" for="cb-pl2-83"></label>
 422 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-84"/>
 423 |         <label class="dice" for="cb-pl2-84"></label>
 424 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-85"/>
 425 |         <label class="dice" for="cb-pl2-85"></label>
 426 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-86"/>
 427 |         <label class="dice" for="cb-pl2-86"></label>
 428 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-87"/>
 429 |         <label class="dice" for="cb-pl2-87"></label>
 430 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-88"/>
 431 |         <label class="dice" for="cb-pl2-88"></label>
 432 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-89"/>
 433 |         <label class="dice" for="cb-pl2-89"></label>
 434 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-90"/>
 435 |         <label class="dice" for="cb-pl2-90"></label>
 436 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-91"/>
 437 |         <label class="dice" for="cb-pl2-91"></label>
 438 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-92"/>
 439 |         <label class="dice" for="cb-pl2-92"></label>
 440 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-93"/>
 441 |         <label class="dice" for="cb-pl2-93"></label>
 442 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-94"/>
 443 |         <label class="dice" for="cb-pl2-94"></label>
 444 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-95"/>
 445 |         <label class="dice" for="cb-pl2-95"></label>
 446 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-96"/>
 447 |         <label class="dice" for="cb-pl2-96"></label>
 448 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-97"/>
 449 |         <label class="dice" for="cb-pl2-97"></label>
 450 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-98"/>
 451 |         <label class="dice" for="cb-pl2-98"></label>
 452 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-99"/>
 453 |         <label class="dice" for="cb-pl2-99"></label>
 454 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-100"/>
 455 |         <label class="dice" for="cb-pl2-100"></label>
 456 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-101"/>
 457 |         <label class="dice" for="cb-pl2-101"></label>
 458 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-102"/>
 459 |         <label class="dice" for="cb-pl2-102"></label>
 460 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-103"/>
 461 |         <label class="dice" for="cb-pl2-103"></label>
 462 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-104"/>
 463 |         <label class="dice" for="cb-pl2-104"></label>
 464 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-105"/>
 465 |         <label class="dice" for="cb-pl2-105"></label>
 466 |         <input class="cb" type="radio" name="cb-player2" id="cb-pl2-106"/>
 467 |         <label class="dice" for="cb-pl2-106"></label>
 468 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-0" checked="checked"/>
 469 |         <label class="dice" for="cb-pl3-0"></label>
 470 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-1"/>
 471 |         <label class="dice" for="cb-pl3-1"></label>
 472 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-2"/>
 473 |         <label class="dice" for="cb-pl3-2"></label>
 474 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-3"/>
 475 |         <label class="dice" for="cb-pl3-3"></label>
 476 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-4"/>
 477 |         <label class="dice" for="cb-pl3-4"></label>
 478 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-5"/>
 479 |         <label class="dice" for="cb-pl3-5"></label>
 480 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-6"/>
 481 |         <label class="dice" for="cb-pl3-6"></label>
 482 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-7"/>
 483 |         <label class="dice" for="cb-pl3-7"></label>
 484 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-8"/>
 485 |         <label class="dice" for="cb-pl3-8"></label>
 486 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-9"/>
 487 |         <label class="dice" for="cb-pl3-9"></label>
 488 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-10"/>
 489 |         <label class="dice" for="cb-pl3-10"></label>
 490 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-11"/>
 491 |         <label class="dice" for="cb-pl3-11"></label>
 492 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-12"/>
 493 |         <label class="dice" for="cb-pl3-12"></label>
 494 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-13"/>
 495 |         <label class="dice" for="cb-pl3-13"></label>
 496 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-14"/>
 497 |         <label class="dice" for="cb-pl3-14"></label>
 498 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-15"/>
 499 |         <label class="dice" for="cb-pl3-15"></label>
 500 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-16"/>
 501 |         <label class="dice" for="cb-pl3-16"></label>
 502 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-17"/>
 503 |         <label class="dice" for="cb-pl3-17"></label>
 504 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-18"/>
 505 |         <label class="dice" for="cb-pl3-18"></label>
 506 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-19"/>
 507 |         <label class="dice" for="cb-pl3-19"></label>
 508 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-20"/>
 509 |         <label class="dice" for="cb-pl3-20"></label>
 510 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-21"/>
 511 |         <label class="dice" for="cb-pl3-21"></label>
 512 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-22"/>
 513 |         <label class="dice" for="cb-pl3-22"></label>
 514 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-23"/>
 515 |         <label class="dice" for="cb-pl3-23"></label>
 516 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-24"/>
 517 |         <label class="dice" for="cb-pl3-24"></label>
 518 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-25"/>
 519 |         <label class="dice" for="cb-pl3-25"></label>
 520 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-26"/>
 521 |         <label class="dice" for="cb-pl3-26"></label>
 522 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-27"/>
 523 |         <label class="dice" for="cb-pl3-27"></label>
 524 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-28"/>
 525 |         <label class="dice" for="cb-pl3-28"></label>
 526 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-29"/>
 527 |         <label class="dice" for="cb-pl3-29"></label>
 528 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-30"/>
 529 |         <label class="dice" for="cb-pl3-30"></label>
 530 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-31"/>
 531 |         <label class="dice" for="cb-pl3-31"></label>
 532 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-32"/>
 533 |         <label class="dice" for="cb-pl3-32"></label>
 534 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-33"/>
 535 |         <label class="dice" for="cb-pl3-33"></label>
 536 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-34"/>
 537 |         <label class="dice" for="cb-pl3-34"></label>
 538 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-35"/>
 539 |         <label class="dice" for="cb-pl3-35"></label>
 540 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-36"/>
 541 |         <label class="dice" for="cb-pl3-36"></label>
 542 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-37"/>
 543 |         <label class="dice" for="cb-pl3-37"></label>
 544 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-38"/>
 545 |         <label class="dice" for="cb-pl3-38"></label>
 546 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-39"/>
 547 |         <label class="dice" for="cb-pl3-39"></label>
 548 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-40"/>
 549 |         <label class="dice" for="cb-pl3-40"></label>
 550 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-41"/>
 551 |         <label class="dice" for="cb-pl3-41"></label>
 552 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-42"/>
 553 |         <label class="dice" for="cb-pl3-42"></label>
 554 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-43"/>
 555 |         <label class="dice" for="cb-pl3-43"></label>
 556 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-44"/>
 557 |         <label class="dice" for="cb-pl3-44"></label>
 558 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-45"/>
 559 |         <label class="dice" for="cb-pl3-45"></label>
 560 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-46"/>
 561 |         <label class="dice" for="cb-pl3-46"></label>
 562 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-47"/>
 563 |         <label class="dice" for="cb-pl3-47"></label>
 564 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-48"/>
 565 |         <label class="dice" for="cb-pl3-48"></label>
 566 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-49"/>
 567 |         <label class="dice" for="cb-pl3-49"></label>
 568 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-50"/>
 569 |         <label class="dice" for="cb-pl3-50"></label>
 570 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-51"/>
 571 |         <label class="dice" for="cb-pl3-51"></label>
 572 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-52"/>
 573 |         <label class="dice" for="cb-pl3-52"></label>
 574 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-53"/>
 575 |         <label class="dice" for="cb-pl3-53"></label>
 576 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-54"/>
 577 |         <label class="dice" for="cb-pl3-54"></label>
 578 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-55"/>
 579 |         <label class="dice" for="cb-pl3-55"></label>
 580 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-56"/>
 581 |         <label class="dice" for="cb-pl3-56"></label>
 582 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-57"/>
 583 |         <label class="dice" for="cb-pl3-57"></label>
 584 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-58"/>
 585 |         <label class="dice" for="cb-pl3-58"></label>
 586 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-59"/>
 587 |         <label class="dice" for="cb-pl3-59"></label>
 588 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-60"/>
 589 |         <label class="dice" for="cb-pl3-60"></label>
 590 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-61"/>
 591 |         <label class="dice" for="cb-pl3-61"></label>
 592 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-62"/>
 593 |         <label class="dice" for="cb-pl3-62"></label>
 594 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-63"/>
 595 |         <label class="dice" for="cb-pl3-63"></label>
 596 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-64"/>
 597 |         <label class="dice" for="cb-pl3-64"></label>
 598 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-65"/>
 599 |         <label class="dice" for="cb-pl3-65"></label>
 600 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-66"/>
 601 |         <label class="dice" for="cb-pl3-66"></label>
 602 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-67"/>
 603 |         <label class="dice" for="cb-pl3-67"></label>
 604 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-68"/>
 605 |         <label class="dice" for="cb-pl3-68"></label>
 606 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-69"/>
 607 |         <label class="dice" for="cb-pl3-69"></label>
 608 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-70"/>
 609 |         <label class="dice" for="cb-pl3-70"></label>
 610 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-71"/>
 611 |         <label class="dice" for="cb-pl3-71"></label>
 612 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-72"/>
 613 |         <label class="dice" for="cb-pl3-72"></label>
 614 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-73"/>
 615 |         <label class="dice" for="cb-pl3-73"></label>
 616 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-74"/>
 617 |         <label class="dice" for="cb-pl3-74"></label>
 618 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-75"/>
 619 |         <label class="dice" for="cb-pl3-75"></label>
 620 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-76"/>
 621 |         <label class="dice" for="cb-pl3-76"></label>
 622 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-77"/>
 623 |         <label class="dice" for="cb-pl3-77"></label>
 624 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-78"/>
 625 |         <label class="dice" for="cb-pl3-78"></label>
 626 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-79"/>
 627 |         <label class="dice" for="cb-pl3-79"></label>
 628 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-80"/>
 629 |         <label class="dice" for="cb-pl3-80"></label>
 630 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-81"/>
 631 |         <label class="dice" for="cb-pl3-81"></label>
 632 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-82"/>
 633 |         <label class="dice" for="cb-pl3-82"></label>
 634 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-83"/>
 635 |         <label class="dice" for="cb-pl3-83"></label>
 636 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-84"/>
 637 |         <label class="dice" for="cb-pl3-84"></label>
 638 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-85"/>
 639 |         <label class="dice" for="cb-pl3-85"></label>
 640 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-86"/>
 641 |         <label class="dice" for="cb-pl3-86"></label>
 642 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-87"/>
 643 |         <label class="dice" for="cb-pl3-87"></label>
 644 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-88"/>
 645 |         <label class="dice" for="cb-pl3-88"></label>
 646 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-89"/>
 647 |         <label class="dice" for="cb-pl3-89"></label>
 648 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-90"/>
 649 |         <label class="dice" for="cb-pl3-90"></label>
 650 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-91"/>
 651 |         <label class="dice" for="cb-pl3-91"></label>
 652 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-92"/>
 653 |         <label class="dice" for="cb-pl3-92"></label>
 654 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-93"/>
 655 |         <label class="dice" for="cb-pl3-93"></label>
 656 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-94"/>
 657 |         <label class="dice" for="cb-pl3-94"></label>
 658 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-95"/>
 659 |         <label class="dice" for="cb-pl3-95"></label>
 660 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-96"/>
 661 |         <label class="dice" for="cb-pl3-96"></label>
 662 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-97"/>
 663 |         <label class="dice" for="cb-pl3-97"></label>
 664 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-98"/>
 665 |         <label class="dice" for="cb-pl3-98"></label>
 666 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-99"/>
 667 |         <label class="dice" for="cb-pl3-99"></label>
 668 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-100"/>
 669 |         <label class="dice" for="cb-pl3-100"></label>
 670 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-101"/>
 671 |         <label class="dice" for="cb-pl3-101"></label>
 672 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-102"/>
 673 |         <label class="dice" for="cb-pl3-102"></label>
 674 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-103"/>
 675 |         <label class="dice" for="cb-pl3-103"></label>
 676 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-104"/>
 677 |         <label class="dice" for="cb-pl3-104"></label>
 678 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-105"/>
 679 |         <label class="dice" for="cb-pl3-105"></label>
 680 |         <input class="cb" type="radio" name="cb-player3" id="cb-pl3-106"/>
 681 |         <label class="dice" for="cb-pl3-106"></label>
 682 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-0" checked="checked"/>
 683 |         <label class="dice" for="cb-pl4-0"></label>
 684 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-1"/>
 685 |         <label class="dice" for="cb-pl4-1"></label>
 686 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-2"/>
 687 |         <label class="dice" for="cb-pl4-2"></label>
 688 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-3"/>
 689 |         <label class="dice" for="cb-pl4-3"></label>
 690 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-4"/>
 691 |         <label class="dice" for="cb-pl4-4"></label>
 692 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-5"/>
 693 |         <label class="dice" for="cb-pl4-5"></label>
 694 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-6"/>
 695 |         <label class="dice" for="cb-pl4-6"></label>
 696 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-7"/>
 697 |         <label class="dice" for="cb-pl4-7"></label>
 698 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-8"/>
 699 |         <label class="dice" for="cb-pl4-8"></label>
 700 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-9"/>
 701 |         <label class="dice" for="cb-pl4-9"></label>
 702 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-10"/>
 703 |         <label class="dice" for="cb-pl4-10"></label>
 704 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-11"/>
 705 |         <label class="dice" for="cb-pl4-11"></label>
 706 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-12"/>
 707 |         <label class="dice" for="cb-pl4-12"></label>
 708 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-13"/>
 709 |         <label class="dice" for="cb-pl4-13"></label>
 710 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-14"/>
 711 |         <label class="dice" for="cb-pl4-14"></label>
 712 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-15"/>
 713 |         <label class="dice" for="cb-pl4-15"></label>
 714 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-16"/>
 715 |         <label class="dice" for="cb-pl4-16"></label>
 716 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-17"/>
 717 |         <label class="dice" for="cb-pl4-17"></label>
 718 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-18"/>
 719 |         <label class="dice" for="cb-pl4-18"></label>
 720 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-19"/>
 721 |         <label class="dice" for="cb-pl4-19"></label>
 722 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-20"/>
 723 |         <label class="dice" for="cb-pl4-20"></label>
 724 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-21"/>
 725 |         <label class="dice" for="cb-pl4-21"></label>
 726 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-22"/>
 727 |         <label class="dice" for="cb-pl4-22"></label>
 728 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-23"/>
 729 |         <label class="dice" for="cb-pl4-23"></label>
 730 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-24"/>
 731 |         <label class="dice" for="cb-pl4-24"></label>
 732 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-25"/>
 733 |         <label class="dice" for="cb-pl4-25"></label>
 734 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-26"/>
 735 |         <label class="dice" for="cb-pl4-26"></label>
 736 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-27"/>
 737 |         <label class="dice" for="cb-pl4-27"></label>
 738 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-28"/>
 739 |         <label class="dice" for="cb-pl4-28"></label>
 740 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-29"/>
 741 |         <label class="dice" for="cb-pl4-29"></label>
 742 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-30"/>
 743 |         <label class="dice" for="cb-pl4-30"></label>
 744 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-31"/>
 745 |         <label class="dice" for="cb-pl4-31"></label>
 746 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-32"/>
 747 |         <label class="dice" for="cb-pl4-32"></label>
 748 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-33"/>
 749 |         <label class="dice" for="cb-pl4-33"></label>
 750 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-34"/>
 751 |         <label class="dice" for="cb-pl4-34"></label>
 752 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-35"/>
 753 |         <label class="dice" for="cb-pl4-35"></label>
 754 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-36"/>
 755 |         <label class="dice" for="cb-pl4-36"></label>
 756 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-37"/>
 757 |         <label class="dice" for="cb-pl4-37"></label>
 758 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-38"/>
 759 |         <label class="dice" for="cb-pl4-38"></label>
 760 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-39"/>
 761 |         <label class="dice" for="cb-pl4-39"></label>
 762 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-40"/>
 763 |         <label class="dice" for="cb-pl4-40"></label>
 764 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-41"/>
 765 |         <label class="dice" for="cb-pl4-41"></label>
 766 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-42"/>
 767 |         <label class="dice" for="cb-pl4-42"></label>
 768 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-43"/>
 769 |         <label class="dice" for="cb-pl4-43"></label>
 770 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-44"/>
 771 |         <label class="dice" for="cb-pl4-44"></label>
 772 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-45"/>
 773 |         <label class="dice" for="cb-pl4-45"></label>
 774 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-46"/>
 775 |         <label class="dice" for="cb-pl4-46"></label>
 776 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-47"/>
 777 |         <label class="dice" for="cb-pl4-47"></label>
 778 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-48"/>
 779 |         <label class="dice" for="cb-pl4-48"></label>
 780 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-49"/>
 781 |         <label class="dice" for="cb-pl4-49"></label>
 782 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-50"/>
 783 |         <label class="dice" for="cb-pl4-50"></label>
 784 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-51"/>
 785 |         <label class="dice" for="cb-pl4-51"></label>
 786 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-52"/>
 787 |         <label class="dice" for="cb-pl4-52"></label>
 788 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-53"/>
 789 |         <label class="dice" for="cb-pl4-53"></label>
 790 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-54"/>
 791 |         <label class="dice" for="cb-pl4-54"></label>
 792 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-55"/>
 793 |         <label class="dice" for="cb-pl4-55"></label>
 794 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-56"/>
 795 |         <label class="dice" for="cb-pl4-56"></label>
 796 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-57"/>
 797 |         <label class="dice" for="cb-pl4-57"></label>
 798 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-58"/>
 799 |         <label class="dice" for="cb-pl4-58"></label>
 800 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-59"/>
 801 |         <label class="dice" for="cb-pl4-59"></label>
 802 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-60"/>
 803 |         <label class="dice" for="cb-pl4-60"></label>
 804 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-61"/>
 805 |         <label class="dice" for="cb-pl4-61"></label>
 806 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-62"/>
 807 |         <label class="dice" for="cb-pl4-62"></label>
 808 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-63"/>
 809 |         <label class="dice" for="cb-pl4-63"></label>
 810 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-64"/>
 811 |         <label class="dice" for="cb-pl4-64"></label>
 812 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-65"/>
 813 |         <label class="dice" for="cb-pl4-65"></label>
 814 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-66"/>
 815 |         <label class="dice" for="cb-pl4-66"></label>
 816 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-67"/>
 817 |         <label class="dice" for="cb-pl4-67"></label>
 818 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-68"/>
 819 |         <label class="dice" for="cb-pl4-68"></label>
 820 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-69"/>
 821 |         <label class="dice" for="cb-pl4-69"></label>
 822 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-70"/>
 823 |         <label class="dice" for="cb-pl4-70"></label>
 824 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-71"/>
 825 |         <label class="dice" for="cb-pl4-71"></label>
 826 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-72"/>
 827 |         <label class="dice" for="cb-pl4-72"></label>
 828 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-73"/>
 829 |         <label class="dice" for="cb-pl4-73"></label>
 830 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-74"/>
 831 |         <label class="dice" for="cb-pl4-74"></label>
 832 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-75"/>
 833 |         <label class="dice" for="cb-pl4-75"></label>
 834 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-76"/>
 835 |         <label class="dice" for="cb-pl4-76"></label>
 836 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-77"/>
 837 |         <label class="dice" for="cb-pl4-77"></label>
 838 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-78"/>
 839 |         <label class="dice" for="cb-pl4-78"></label>
 840 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-79"/>
 841 |         <label class="dice" for="cb-pl4-79"></label>
 842 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-80"/>
 843 |         <label class="dice" for="cb-pl4-80"></label>
 844 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-81"/>
 845 |         <label class="dice" for="cb-pl4-81"></label>
 846 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-82"/>
 847 |         <label class="dice" for="cb-pl4-82"></label>
 848 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-83"/>
 849 |         <label class="dice" for="cb-pl4-83"></label>
 850 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-84"/>
 851 |         <label class="dice" for="cb-pl4-84"></label>
 852 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-85"/>
 853 |         <label class="dice" for="cb-pl4-85"></label>
 854 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-86"/>
 855 |         <label class="dice" for="cb-pl4-86"></label>
 856 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-87"/>
 857 |         <label class="dice" for="cb-pl4-87"></label>
 858 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-88"/>
 859 |         <label class="dice" for="cb-pl4-88"></label>
 860 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-89"/>
 861 |         <label class="dice" for="cb-pl4-89"></label>
 862 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-90"/>
 863 |         <label class="dice" for="cb-pl4-90"></label>
 864 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-91"/>
 865 |         <label class="dice" for="cb-pl4-91"></label>
 866 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-92"/>
 867 |         <label class="dice" for="cb-pl4-92"></label>
 868 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-93"/>
 869 |         <label class="dice" for="cb-pl4-93"></label>
 870 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-94"/>
 871 |         <label class="dice" for="cb-pl4-94"></label>
 872 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-95"/>
 873 |         <label class="dice" for="cb-pl4-95"></label>
 874 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-96"/>
 875 |         <label class="dice" for="cb-pl4-96"></label>
 876 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-97"/>
 877 |         <label class="dice" for="cb-pl4-97"></label>
 878 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-98"/>
 879 |         <label class="dice" for="cb-pl4-98"></label>
 880 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-99"/>
 881 |         <label class="dice" for="cb-pl4-99"></label>
 882 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-100"/>
 883 |         <label class="dice" for="cb-pl4-100"></label>
 884 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-101"/>
 885 |         <label class="dice" for="cb-pl4-101"></label>
 886 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-102"/>
 887 |         <label class="dice" for="cb-pl4-102"></label>
 888 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-103"/>
 889 |         <label class="dice" for="cb-pl4-103"></label>
 890 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-104"/>
 891 |         <label class="dice" for="cb-pl4-104"></label>
 892 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-105"/>
 893 |         <label class="dice" for="cb-pl4-105"></label>
 894 |         <input class="cb" type="radio" name="cb-player4" id="cb-pl4-106"/>
 895 |         <label class="dice" for="cb-pl4-106"></label>
 896 |         <!-- game settings menu (# of players, colors) -->
 897 |         <div class="scrim" id="options">
 898 |             <div class="box">
 899 |                 <h1>Game Settings</h1>
 900 |                 <div>
 901 |                     <h2>Number of players</h2>
 902 |                     <div class="flex option-players">
 903 |                         <label for="players1">1</label>
 904 |                         <label for="players2">2</label>
 905 |                         <label for="players3">3</label>
 906 |                         <label for="players4">4</label>
 907 |                     </div>
 908 |                     <h2>Piece colors</h2>
 909 |                     <div class="option-colors">
 910 |                         <label class="flex" for="colors1"><span></span><span></span><span></span><span></span><span></span></label>
 911 |                         <label class="flex" for="colors2"><span></span><span></span><span></span><span></span><span></span></label>
 912 |                         <label class="flex" for="colors3"><span></span><span></span><span></span><span></span><span></span></label>
 913 |                         <label class="flex" for="colors4"><span></span><span></span><span></span><span></span><span></span></label>
 914 |                     </div>
 915 |                     <h2>Sound options</h2>
 916 |                     <label id="activate-fx" for="play-fx">FX Sound</label>
 917 |                     <div>
 918 |                         <label class="option-start" for="show-instructions-1">START GAME</label>
 919 |                     </div>
 920 |                 </div>
 921 |             </div>
 922 |         </div>
 923 |         <!-- pop-up with information about the game and the author-->
 924 |         <div class="scrim" id="info">
 925 |             <div class="box">
 926 |                 <h1>About</h1>
 927 |                 <div>
 928 |                     <p>Snakes and Ladders is an ancient Indian board game regarded today as a worldwide classic. A number of 'ladders' and 'snakes' are pictured on the board, each connecting two specific board squares. 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 ladders and snakes respectively.<sup><a href="https://en.wikipedia.org/wiki/Snakes_and_Ladders" target="_blank">[1]</a></sup></p>
 929 |                     <p>This version was developed by <a href="https://github.com/alvaromontoro" target="_blank">Alvaro Montoro </a>using HTML and CSS, to practice Pug and Sass, and without any JavaScript line of code.</p>
 930 |                     <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>
 931 |                     <p>
 932 |                         <label id="close-button" for="show-info">Close</label>
 933 |                     </p>
 934 |                 </div>
 935 |             </div>
 936 |         </div>
 937 |         <!-- animated instructions section-->
 938 |         <div id="instructions">
 939 |             <label id="go-to-game" for="game-time">SKIP INSTRUCTIONS &rsaquo;</label>
 940 |             <div id="step">
 941 |                 <div> 
 942 |                     <label for="show-instructions-2"></label>
 943 |                     <label for="show-instructions-3"></label>
 944 |                     <label for="show-instructions-4"></label>
 945 |                     <label for="show-instructions-5"></label>
 946 |                     <label for="game-time">PLAY &rsaquo;</label>
 947 |                 </div>
 948 |             </div>
 949 |         </div>
 950 |         <!-- the game section: board, dice, snakes, ladders, and all that jazz...-->
 951 |         <div id="game">
 952 |             <div class="tab" id="player-info"><span>Player</span></div>
 953 |             <!--label#dice.tab-->
 954 |             <div class="tab" id="action">
 955 |                 <label id="turn-changer1" for="turn1"></label>
 956 |                 <label id="turn-changer2" for="turn2"></label>
 957 |                 <label id="turn-changer3" for="turn3"></label>
 958 |                 <label id="turn-changer4" for="turn4"></label>
 959 |                 <div class="fx-sound" id="fx-click-action">
 960 |                 <embed src="https://studiokah.com/tests/click2.mp3"/>
 961 |                 </div>
 962 |             </div>
 963 |             <label class="tab" id="more-info" for="show-info"></label>
 964 |             <div class="fx-sound" id="fx-click-more-info">
 965 |                 <embed src="https://studiokah.com/tests/click2.mp3"/>
 966 |             </div>
 967 |             <!-- Board based on the one from codewars: https://www.codewars.com/kata/snakes-and-ladders-1 -->
 968 |             <div id="board">
 969 |                 <div class="tile tile100" data-index="100"></div>
 970 |                 <div class="tile tile99" data-index="99"></div>
 971 |                 <div class="tile tile98" data-index="98"></div>
 972 |                 <div class="tile tile97" data-index="97"></div>
 973 |                 <div class="tile tile96" data-index="96"></div>
 974 |                 <div class="tile tile95" data-index="95"></div>
 975 |                 <div class="tile tile94" data-index="94"></div>
 976 |                 <div class="tile tile93" data-index="93"></div>
 977 |                 <div class="tile tile92" data-index="92"></div>
 978 |                 <div class="tile tile91" data-index="91"></div>
 979 |                 <div class="tile tile81" data-index="81"></div>
 980 |                 <div class="tile tile82" data-index="82"></div>
 981 |                 <div class="tile tile83" data-index="83"></div>
 982 |                 <div class="tile tile84" data-index="84"></div>
 983 |                 <div class="tile tile85" data-index="85"></div>
 984 |                 <div class="tile tile86" data-index="86"></div>
 985 |                 <div class="tile tile87" data-index="87"></div>
 986 |                 <div class="tile tile88" data-index="88"></div>
 987 |                 <div class="tile tile89" data-index="89"></div>
 988 |                 <div class="tile tile90" data-index="90"></div>
 989 |                 <div class="tile tile80" data-index="80"></div>
 990 |                 <div class="tile tile79" data-index="79"></div>
 991 |                 <div class="tile tile78" data-index="78"></div>
 992 |                 <div class="tile tile77" data-index="77"></div>
 993 |                 <div class="tile tile76" data-index="76"></div>
 994 |                 <div class="tile tile75" data-index="75"></div>
 995 |                 <div class="tile tile74" data-index="74"></div>
 996 |                 <div class="tile tile73" data-index="73"></div>
 997 |                 <div class="tile tile72" data-index="72"></div>
 998 |                 <div class="tile tile71" data-index="71"></div>
 999 |                 <div class="tile tile61" data-index="61"></div>
1000 |                 <div class="tile tile62" data-index="62"></div>
1001 |                 <div class="tile tile63" data-index="63"></div>
1002 |                 <div class="tile tile64" data-index="64"></div>
1003 |                 <div class="tile tile65" data-index="65"></div>
1004 |                 <div class="tile tile66" data-index="66"></div>
1005 |                 <div class="tile tile67" data-index="67"></div>
1006 |                 <div class="tile tile68" data-index="68"></div>
1007 |                 <div class="tile tile69" data-index="69"></div>
1008 |                 <div class="tile tile70" data-index="70"></div>
1009 |                 <div class="tile tile60" data-index="60"></div>
1010 |                 <div class="tile tile59" data-index="59"></div>
1011 |                 <div class="tile tile58" data-index="58"></div>
1012 |                 <div class="tile tile57" data-index="57"></div>
1013 |                 <div class="tile tile56" data-index="56"></div>
1014 |                 <div class="tile tile55" data-index="55"></div>
1015 |                 <div class="tile tile54" data-index="54"></div>
1016 |                 <div class="tile tile53" data-index="53"></div>
1017 |                 <div class="tile tile52" data-index="52"></div>
1018 |                 <div class="tile tile51" data-index="51"></div>
1019 |                 <div class="tile tile41" data-index="41"></div>
1020 |                 <div class="tile tile42" data-index="42"></div>
1021 |                 <div class="tile tile43" data-index="43"></div>
1022 |                 <div class="tile tile44" data-index="44"></div>
1023 |                 <div class="tile tile45" data-index="45"></div>
1024 |                 <div class="tile tile46" data-index="46"></div>
1025 |                 <div class="tile tile47" data-index="47"></div>
1026 |                 <div class="tile tile48" data-index="48"></div>
1027 |                 <div class="tile tile49" data-index="49"></div>
1028 |                 <div class="tile tile50" data-index="50"></div>
1029 |                 <div class="tile tile40" data-index="40"></div>
1030 |                 <div class="tile tile39" data-index="39"></div>
1031 |                 <div class="tile tile38" data-index="38"></div>
1032 |                 <div class="tile tile37" data-index="37"></div>
1033 |                 <div class="tile tile36" data-index="36"></div>
1034 |                 <div class="tile tile35" data-index="35"></div>
1035 |                 <div class="tile tile34" data-index="34"></div>
1036 |                 <div class="tile tile33" data-index="33"></div>
1037 |                 <div class="tile tile32" data-index="32"></div>
1038 |                 <div class="tile tile31" data-index="31"></div>
1039 |                 <div class="tile tile21" data-index="21"></div>
1040 |                 <div class="tile tile22" data-index="22"></div>
1041 |                 <div class="tile tile23" data-index="23"></div>
1042 |                 <div class="tile tile24" data-index="24"></div>
1043 |                 <div class="tile tile25" data-index="25"></div>
1044 |                 <div class="tile tile26" data-index="26"></div>
1045 |                 <div class="tile tile27" data-index="27"></div>
1046 |                 <div class="tile tile28" data-index="28"></div>
1047 |                 <div class="tile tile29" data-index="29"></div>
1048 |                 <div class="tile tile30" data-index="30"></div>
1049 |                 <div class="tile tile20" data-index="20"></div>
1050 |                 <div class="tile tile19" data-index="19"></div>
1051 |                 <div class="tile tile18" data-index="18"></div>
1052 |                 <div class="tile tile17" data-index="17"></div>
1053 |                 <div class="tile tile16" data-index="16"></div>
1054 |                 <div class="tile tile15" data-index="15"></div>
1055 |                 <div class="tile tile14" data-index="14"></div>
1056 |                 <div class="tile tile13" data-index="13"></div>
1057 |                 <div class="tile tile12" data-index="12"></div>
1058 |                 <div class="tile tile11" data-index="11"></div>
1059 |                 <div class="tile tile1" data-index="1"></div>
1060 |                 <div class="tile tile2" data-index="2"></div>
1061 |                 <div class="tile tile3" data-index="3"></div>
1062 |                 <div class="tile tile4" data-index="4"></div>
1063 |                 <div class="tile tile5" data-index="5"></div>
1064 |                 <div class="tile tile6" data-index="6"></div>
1065 |                 <div class="tile tile7" data-index="7"></div>
1066 |                 <div class="tile tile8" data-index="8"></div>
1067 |                 <div class="tile tile9" data-index="9"></div>
1068 |                 <div class="tile tile10" data-index="10"></div>
1069 |                 <svg id="snakeladders" viewBox="0 0 600 600" preserveAspectRatio="none">
1070 |                     <g class="ladders-big">
1071 |                         <path d="M89,574 140,392 M102,578 153,396 M388,581 385,508 M402,580 399,507 M449,552 554,395 M460,560 565,403 M320,516 333,444 M334,518 347,446 M24,436 74,329 M36,442 87,334 M430,458 210,99 M441,450 222,93 M264,393 214,339 M273,384 224,330 M563,284 391,203 M568,271 396,190 M570,149 559,31 M584,148 573,30 M142,158 155,40 M156,160 169,42 M397,101 379,30 M411,97 392,26"></path>
1072 |                     </g>
1073 |                     <g class="ladders-small">
1074 |                         <path d="M91,568 104,573 M94,556 105,561 M97,544 108,549 M100,532 111,537 M103,520 114,525 M107,508 118,513 M111,496 122,501 M114,484 125,489 M117,472 128,477 M121,460 132,465 M124,448 135,453 M128,436 139,441 M131,424 142,429 M134,412 145,417 M138,400 149,405 M388,575 401,574 M388,563 401,562 M388,552 401,551 M388,541 401,540 M388,530 400,529 M388,518 400,517 M452,546 464,555 M459,536 470,544 M466,526 476,533 M473,516 482,522 M479,508 490,515 M485,498 496,506 M492,488 502,495 M498,479 509,486 M504,469 515,477 M512,459 522,467 M517,449 528,457 M523,440 534,448 M530,430 541,438 M536,421 548,429 M542,412 554,419 M549,402 560,409 M322,510 335,512 M324,498 337,500 M326,486 339,488 M328,475 341,477 M330,463 343,465 M332,452 345,454 M258,388 268,378 M250,379 260,369 M243,370 252,361 M235,362 245,352 M227,353 236,344 M219,345 229,335 M27,430 40,436 M32,419 45,425 M37,408 49,414 M42,398 54,404 M47,388 59,394 M51,377 64,383 M56,366 69,372 M61,356 75,362 M66,345 79,351 M71,335 84,341 M427,453 438,444 M420,443 432,434 M414,433 426,424 M408,423 420,414 M402,413 413,404 M395,402 407,393 M388,391 400,382 M381,379 393,370 M374,368 386,359 M367,356 378,347 M359,344 371,336 M352,332 364,324 M345,320 357,312 M338,308 350,300 M330,296 342,288 M323,284 335,276 M316,272 328,264 M308,260 320,252 M301,248 313,240 M294,236 305,228 M287,224 298,216 M280,212 291,205 M273,200 284,193 M267,188 277,181 M259,175 269,168 M251,163 261,156 M244,151 254,144 M236,139 246,132 M229,127 239,120 M222,115 232,108 M215,103 225,96 M143,152 157,154 M144,140 158,142 M145,128 159,130 M146,116 160,118 M147,104 161,106 M149,92 163,94 M150,80 164,82 M151,68 165,70 M153,56 167,58 M154,44 168,46 M396,95 409,91 M393,84 406,80 M390,73 403,69 M387,62 400,58 M384,51 397,47 M381,40 394,36 M570,143 583,142 M568,130 582,129 M566,117 580,116 M565,104 577,103 M564,91 576,90 M563,78 575,77 M562,65 574,64 M561,52 573,51 M560,38 572,37 M556,281 562,268 M546,276 552,263 M536,271 542,258 M526,266 532,254 M516,261 522,249 M506,255 512,244 M496,250 502,239 M486,245 492,235 M476,240 482,230 M466,236 472,225 M456,231 462,220 M446,226 451,216 M436,221 441,211 M425,218 431,206 M415,213 421,201 M405,208 411,196 M395,204 401,192"></path>
1075 |                     </g>
1076 |                     <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>
1077 |                     <path class="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"></path>
1078 |                     <circle class="eye" cx="97" cy="212" r="5"></circle>
1079 |                     <path class="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"></path>
1080 |                     <circle class="eye" cx="203" cy="210" r="5"></circle>
1081 |                     <path class="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"></path>
1082 |                     <circle class="eye" cx="387" cy="148" r="5"></circle>
1083 |                     <path class="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"></path>
1084 |                     <circle class="eye" cx="512" cy="90" r="5"></circle>
1085 |                     <path class="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"></path>
1086 |                     <circle class="eye" cx="504" cy="35" r="5"></circle>
1087 |                     <path class="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"></path>
1088 |                     <circle class="eye" cx="327" cy="325" r="5"></circle>
1089 |                     <path class="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"></path>
1090 |                     <circle class="eye" cx="257" cy="503" r="5"></circle>
1091 |                     <path class="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"></path>
1092 |                     <circle class="eye" cx="503" cy="320" r="5"></circle>
1093 |                     <path class="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"></path>
1094 |                     <circle class="eye" cx="89" cy="27" r="5"></circle>
1095 |                     <path class="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"></path>
1096 |                     <circle class="eye" cx="330" cy="30" r="5"></circle>
1097 |                 </svg>
1098 |                 <svg class="piece" id="piece-player-1" viewBox="0 0 100 100">
1099 |                     <g>
1100 |                         <path d="M 50,1 C 50,1 80,85 80,85 70,96 60,99 50,99 40,99 30,96 20,85 20,85 50,1 50,1 Z"></path>
1101 |                         <circle cx="50" cy="21" r="20"></circle>
1102 |                         <rect x="44" y="25" width="12" height="22" stroke="none"></rect>
1103 |                     </g>
1104 |                 </svg>
1105 |                 <svg class="piece" id="piece-player-2" viewBox="0 0 100 100">
1106 |                     <g>
1107 |                         <path d="M 50,1 C 50,1 80,85 80,85 70,96 60,99 50,99 40,99 30,96 20,85 20,85 50,1 50,1 Z"></path>
1108 |                         <circle cx="50" cy="21" r="20"></circle>
1109 |                         <rect x="44" y="25" width="12" height="22" stroke="none"></rect>
1110 |                     </g>
1111 |                 </svg>
1112 |                 <svg class="piece" id="piece-player-3" viewBox="0 0 100 100">
1113 |                     <g>
1114 |                         <path d="M 50,1 C 50,1 80,85 80,85 70,96 60,99 50,99 40,99 30,96 20,85 20,85 50,1 50,1 Z"></path>
1115 |                         <circle cx="50" cy="21" r="20"></circle>
1116 |                         <rect x="44" y="25" width="12" height="22" stroke="none"></rect>
1117 |                     </g>
1118 |                 </svg>
1119 |                 <svg class="piece" id="piece-player-4" viewBox="0 0 100 100">
1120 |                     <g>
1121 |                         <path d="M 50,1 C 50,1 80,85 80,85 70,96 60,99 50,99 40,99 30,96 20,85 20,85 50,1 50,1 Z"></path>
1122 |                         <circle cx="50" cy="21" r="20"></circle>
1123 |                         <rect x="44" y="25" width="12" height="22" stroke="none"></rect>
1124 |                     </g>
1125 |                 </svg>
1126 |             </div>
1127 |         </div>
1128 |         <div class="scrim" id="snake-popup"> 
1129 |             <div class="box">
1130 |                 <h1>Snake!!!</h1>
1131 |                 <div>Oh no! The snake bit you! You'll have to move your piece to the snake's tail.
1132 |                     <div>
1133 |                         <label id="snake-pl1-16" for="cb-pl1-6">Move Down</label>
1134 |                         <label id="snake-pl1-46" for="cb-pl1-25">Move Down</label>
1135 |                         <label id="snake-pl1-49" for="cb-pl1-11">Move Down</label>
1136 |                         <label id="snake-pl1-62" for="cb-pl1-19">Move Down</label>
1137 |                         <label id="snake-pl1-64" for="cb-pl1-60">Move Down</label>
1138 |                         <label id="snake-pl1-74" for="cb-pl1-53">Move Down</label>
1139 |                         <label id="snake-pl1-89" for="cb-pl1-68">Move Down</label>
1140 |                         <label id="snake-pl1-92" for="cb-pl1-88">Move Down</label>
1141 |                         <label id="snake-pl1-95" for="cb-pl1-75">Move Down</label>
1142 |                         <label id="snake-pl1-99" for="cb-pl1-80">Move Down</label>
1143 |                         <label id="snake-pl2-16" for="cb-pl2-6">Move Down</label>
1144 |                         <label id="snake-pl2-46" for="cb-pl2-25">Move Down</label>
1145 |                         <label id="snake-pl2-49" for="cb-pl2-11">Move Down</label>
1146 |                         <label id="snake-pl2-62" for="cb-pl2-19">Move Down</label>
1147 |                         <label id="snake-pl2-64" for="cb-pl2-60">Move Down</label>
1148 |                         <label id="snake-pl2-74" for="cb-pl2-53">Move Down</label>
1149 |                         <label id="snake-pl2-89" for="cb-pl2-68">Move Down</label>
1150 |                         <label id="snake-pl2-92" for="cb-pl2-88">Move Down</label>
1151 |                         <label id="snake-pl2-95" for="cb-pl2-75">Move Down</label>
1152 |                         <label id="snake-pl2-99" for="cb-pl2-80">Move Down</label>
1153 |                         <label id="snake-pl3-16" for="cb-pl3-6">Move Down</label>
1154 |                         <label id="snake-pl3-46" for="cb-pl3-25">Move Down</label>
1155 |                         <label id="snake-pl3-49" for="cb-pl3-11">Move Down</label>
1156 |                         <label id="snake-pl3-62" for="cb-pl3-19">Move Down</label>
1157 |                         <label id="snake-pl3-64" for="cb-pl3-60">Move Down</label>
1158 |                         <label id="snake-pl3-74" for="cb-pl3-53">Move Down</label>
1159 |                         <label id="snake-pl3-89" for="cb-pl3-68">Move Down</label>
1160 |                         <label id="snake-pl3-92" for="cb-pl3-88">Move Down</label>
1161 |                         <label id="snake-pl3-95" for="cb-pl3-75">Move Down</label>
1162 |                         <label id="snake-pl3-99" for="cb-pl3-80">Move Down</label>
1163 |                         <label id="snake-pl4-16" for="cb-pl4-6">Move Down</label>
1164 |                         <label id="snake-pl4-46" for="cb-pl4-25">Move Down</label>
1165 |                         <label id="snake-pl4-49" for="cb-pl4-11">Move Down</label>
1166 |                         <label id="snake-pl4-62" for="cb-pl4-19">Move Down</label>
1167 |                         <label id="snake-pl4-64" for="cb-pl4-60">Move Down</label>
1168 |                         <label id="snake-pl4-74" for="cb-pl4-53">Move Down</label>
1169 |                         <label id="snake-pl4-89" for="cb-pl4-68">Move Down</label>
1170 |                         <label id="snake-pl4-92" for="cb-pl4-88">Move Down</label>
1171 |                         <label id="snake-pl4-95" for="cb-pl4-75">Move Down</label>
1172 |                         <label id="snake-pl4-99" for="cb-pl4-80">Move Down</label>
1173 |                     </div>
1174 |                 </div>
1175 |                 <svg viewBox="0 0 100 100">
1176 |                     <path d="M1,32 4,32 M6,34 4,32 M4,32 10,20" stroke="black" stroke-width="1"></path>
1177 |                     <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"></path>
1178 |                     <circle cx="18" cy="15" r="5" fill="black" stroke="white" stroke-width="6"></circle>
1179 |                 </svg>
1180 |             </div>
1181 |         </div>
1182 |         <div class="scrim" id="ladder-popup">
1183 |             <div class="box">
1184 |                 <h1>Ladder!</h1>
1185 |                 <div>Yay! You found a ladder! You can climb up now.
1186 |                     <div>
1187 |                         <label id="ladder-pl1-2" for="cb-pl1-38">Move Up</label>
1188 |                         <label id="ladder-pl1-7" for="cb-pl1-14">Move Up</label>
1189 |                         <label id="ladder-pl1-8" for="cb-pl1-31">Move Up</label>
1190 |                         <label id="ladder-pl1-15" for="cb-pl1-26">Move Up</label>
1191 |                         <label id="ladder-pl1-21" for="cb-pl1-42">Move Up</label>
1192 |                         <label id="ladder-pl1-28" for="cb-pl1-84">Move Up</label>
1193 |                         <label id="ladder-pl1-36" for="cb-pl1-44">Move Up</label>
1194 |                         <label id="ladder-pl1-51" for="cb-pl1-67">Move Up</label>
1195 |                         <label id="ladder-pl1-71" for="cb-pl1-91">Move Up</label>
1196 |                         <label id="ladder-pl1-78" for="cb-pl1-98">Move Up</label>
1197 |                         <label id="ladder-pl1-87" for="cb-pl1-94">Move Up</label>
1198 |                         <label id="ladder-pl2-2" for="cb-pl2-38">Move Up</label>
1199 |                         <label id="ladder-pl2-7" for="cb-pl2-14">Move Up</label>
1200 |                         <label id="ladder-pl2-8" for="cb-pl2-31">Move Up</label>
1201 |                         <label id="ladder-pl2-15" for="cb-pl2-26">Move Up</label>
1202 |                         <label id="ladder-pl2-21" for="cb-pl2-42">Move Up</label>
1203 |                         <label id="ladder-pl2-28" for="cb-pl2-84">Move Up</label>
1204 |                         <label id="ladder-pl2-36" for="cb-pl2-44">Move Up</label>
1205 |                         <label id="ladder-pl2-51" for="cb-pl2-67">Move Up</label>
1206 |                         <label id="ladder-pl2-71" for="cb-pl2-91">Move Up</label>
1207 |                         <label id="ladder-pl2-78" for="cb-pl2-98">Move Up</label>
1208 |                         <label id="ladder-pl2-87" for="cb-pl2-94">Move Up</label>
1209 |                         <label id="ladder-pl3-2" for="cb-pl3-38">Move Up</label>
1210 |                         <label id="ladder-pl3-7" for="cb-pl3-14">Move Up</label>
1211 |                         <label id="ladder-pl3-8" for="cb-pl3-31">Move Up</label>
1212 |                         <label id="ladder-pl3-15" for="cb-pl3-26">Move Up</label>
1213 |                         <label id="ladder-pl3-21" for="cb-pl3-42">Move Up</label>
1214 |                         <label id="ladder-pl3-28" for="cb-pl3-84">Move Up</label>
1215 |                         <label id="ladder-pl3-36" for="cb-pl3-44">Move Up</label>
1216 |                         <label id="ladder-pl3-51" for="cb-pl3-67">Move Up</label>
1217 |                         <label id="ladder-pl3-71" for="cb-pl3-91">Move Up</label>
1218 |                         <label id="ladder-pl3-78" for="cb-pl3-98">Move Up</label>
1219 |                         <label id="ladder-pl3-87" for="cb-pl3-94">Move Up</label>
1220 |                         <label id="ladder-pl4-2" for="cb-pl4-38">Move Up</label>
1221 |                         <label id="ladder-pl4-7" for="cb-pl4-14">Move Up</label>
1222 |                         <label id="ladder-pl4-8" for="cb-pl4-31">Move Up</label>
1223 |                         <label id="ladder-pl4-15" for="cb-pl4-26">Move Up</label>
1224 |                         <label id="ladder-pl4-21" for="cb-pl4-42">Move Up</label>
1225 |                         <label id="ladder-pl4-28" for="cb-pl4-84">Move Up</label>
1226 |                         <label id="ladder-pl4-36" for="cb-pl4-44">Move Up</label>
1227 |                         <label id="ladder-pl4-51" for="cb-pl4-67">Move Up</label>
1228 |                         <label id="ladder-pl4-71" for="cb-pl4-91">Move Up</label>
1229 |                         <label id="ladder-pl4-78" for="cb-pl4-98">Move Up</label>
1230 |                         <label id="ladder-pl4-87" for="cb-pl4-94">Move Up</label>
1231 |                     </div>
1232 |                 </div>
1233 |                 <svg viewBox="0 0 100 100">
1234 |                     <path d="M5,85 20,10" stroke="#8B4513" stroke-width="10" stroke-linecap="round"></path>
1235 |                     <path d="M10,67 30,71 M15,45 35,49 M20,23 40,27" stroke="#aB6533" stroke-width="5" stroke-linecap="round"></path>
1236 |                     <path d="M30,90 45,15" stroke="#8B4513" stroke-width="10" stroke-linecap="round"></path>
1237 |                 </svg>
1238 |             </div>
1239 |         </div>
1240 |         <div class="scrim" id="home-popup">
1241 |             <div class="box">
1242 |                 <h1>Home</h1>
1243 |                 <div>You made it home, but you didn't do it in an exact jump so you will bounce back the remaining tiles.
1244 |                     <div>
1245 |                         <label id="home-pl1-101" for="cb-pl1-99">Bounce back</label>
1246 |                         <label id="home-pl1-102" for="cb-pl1-98">Bounce back</label>
1247 |                         <label id="home-pl1-103" for="cb-pl1-97">Bounce back</label>
1248 |                         <label id="home-pl1-104" for="cb-pl1-96">Bounce back</label>
1249 |                         <label id="home-pl1-105" for="cb-pl1-95">Bounce back</label>
1250 |                         <label id="home-pl1-106" for="cb-pl1-94">Bounce back</label>
1251 |                         <label id="home-pl2-101" for="cb-pl2-99">Bounce back</label>
1252 |                         <label id="home-pl2-102" for="cb-pl2-98">Bounce back</label>
1253 |                         <label id="home-pl2-103" for="cb-pl2-97">Bounce back</label>
1254 |                         <label id="home-pl2-104" for="cb-pl2-96">Bounce back</label>
1255 |                         <label id="home-pl2-105" for="cb-pl2-95">Bounce back</label>
1256 |                         <label id="home-pl2-106" for="cb-pl2-94">Bounce back</label>
1257 |                         <label id="home-pl3-101" for="cb-pl3-99">Bounce back</label>
1258 |                         <label id="home-pl3-102" for="cb-pl3-98">Bounce back</label>
1259 |                         <label id="home-pl3-103" for="cb-pl3-97">Bounce back</label>
1260 |                         <label id="home-pl3-104" for="cb-pl3-96">Bounce back</label>
1261 |                         <label id="home-pl3-105" for="cb-pl3-95">Bounce back</label>
1262 |                         <label id="home-pl3-106" for="cb-pl3-94">Bounce back</label>
1263 |                         <label id="home-pl4-101" for="cb-pl4-99">Bounce back</label>
1264 |                         <label id="home-pl4-102" for="cb-pl4-98">Bounce back</label>
1265 |                         <label id="home-pl4-103" for="cb-pl4-97">Bounce back</label>
1266 |                         <label id="home-pl4-104" for="cb-pl4-96">Bounce back</label>
1267 |                         <label id="home-pl4-105" for="cb-pl4-95">Bounce back</label>
1268 |                         <label id="home-pl4-106" for="cb-pl4-94">Bounce back</label>
1269 |                     </div>
1270 |                 </div>
1271 |                 <svg viewBox="0 0 100 100">
1272 |                     <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>
1273 |                     <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"></path>
1274 |                 </svg>
1275 |             </div>
1276 |         </div>
1277 |         <div class="scrim" id="congratulations">
1278 |             <div class="box">
1279 |                 <h1>Congratulations!</h1>
1280 |                 <div>You made it home safely! You won!</div>
1281 |                 <div>Reload the page to play again.</div>
1282 |                 <svg viewBox="0 0 100 100">
1283 |                     <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>
1284 |                     <path d="M35,40 35,85 M20,85 50,85" stroke="#fede60" stroke-width="12" fill="none" stroke-linecap="round"></path>
1285 |                 </svg>
1286 |             </div>
1287 |         </div>
1288 |         <div class="fx-sound" id="fx-dice">
1289 |             <embed src="https://studiokah.com/tests/dice.mp3"/>
1290 |         </div>
1291 |         <div class="fx-sound" id="fx-click">
1292 |             <!-- Click sound by Sebastian. Source: http://soundbible.com/1705-Click2.html-->
1293 |             <embed src="https://studiokah.com/tests/click2.mp3"/>
1294 |         </div>
1295 | 
1296 |     </body>
1297 | 
1298 | </html>


--------------------------------------------------------------------------------