/** FONTS **/@font-face {  font-family:"Kdam Thmor Pro";  src:url(fonts/kdam-thmor-pro.woff2);  font-weight:normal;}@font-face {  font-family:"Lato";  src:url(fonts/lato-regular.woff2);  font-weight:normal;}@font-face {  font-family:"Lato";  src:url(fonts/lato-bold.woff2);  font-weight:bold;}@font-face {  font-family:"Icons";  src:url(fonts/icons.woff2);  font-weight:normal;}/** GLOBAL **/* {  box-sizing:border-box;  overscroll-behavior:none;  touch-action:pan-x pan-y;  -webkit-user-select:none;  user-select:none;}html,body {  overscroll-behavior:contain;}body,h1,h2,h3,p {  margin:0;}h1,h2,h3 {  cursor:default;}a {  color:#000;  font-weight:bold;  text-decoration:none;  transition:color 250ms;}a:hover,a:active {  color:#777;}body {  background:#ddd;  font:16px "Lato";  color:#000;}body.playing {  position:fixed;  width:100%;  height:100%;  overflow:hidden;}.preload {  opacity:0;  position:absolute;  width:1px;  height:1px;  overflow:hidden;}.hideable,.main,.section,.overlay,.overlay .text,.overlay .rating,.container .world {  opacity:0;  display:none;  transition:opacity 500ms;  pointer-events:none;}.animated,.tip,.step,.announcement,.buttons .button {  opacity:0;  transition:opacity 500ms;  pointer-events:none;}.visible {  display:block !important;}.active {  opacity:1 !important;  pointer-events:auto !important;}/** NOTIFICATIONS **/#notification {  position:fixed;  z-index:5;  width:100%;  height:0;  bottom:0;  left:0;  overflow:hidden;  text-align:center;  line-height:40px;  font-weight:bold;  color:#fff;  transition:opacity 500ms, height 500ms;}#notification.active {  height:40px;}#notification.info {  background:#00a;}#notification.success {  background:#0a0;}#notification.warning {  background:#fa0;}#notification.critical {  background:#a00;}/** MAIN **/#intro {  position:relative;  width:375px;  padding:0 0 50px;  margin:50px auto;  border-radius:20px;  box-shadow:0 0 12px -2px rgb(0, 0, 0, 25%);  background:#eee;  overflow:hidden;  text-align:center;  transition:height 500ms;}.mobile #intro {  margin:0 auto;  border-radius:0;  box-shadow:none;  background:transparent;}#start {  width:320px;  padding:0 10px;  margin:0 auto;}#tips,#tutorial {  position:absolute;  top:300px;  left:50%;  transform:translate(-50%);}#game {  position:absolute;  width:100%;  height:100%;  top:0;  left:0;}/** BUTTONS **/.button {  border-radius:10px;  box-shadow:0 0 12px -2px rgb(0, 0, 0, 50%);  background:#333;  text-align:center;  font-size:18px;  font-weight:bold;  color:#fff;  transition:background 250ms;  cursor:pointer;}.button:hover,.button:active {  background:#000;}.buttons .button,.overlay .button {  transition:opacity 500ms, background 250ms;}/** ICONS **/.icon {  position:relative;  font:26px "Icons";  text-align:center;  color:#fff;  cursor:pointer;}.icon:before {  position:absolute;  width:100%;  height:100%;  top:0;  left:0;}.pause.icon:before { content:"\f11f" }.continue.icon:before { content:"\f120" }.powerups.icon:before { content:"\f11e" }.quit.icon:before { content:"\f11d" }.slowdown.icon:before, .slowdown .icon:before { content:"\f11a" }.explosion.icon:before, .explosion .icon:before { content:"\f11b" }.break.icon:before, .break .icon:before { content:"\f11c" }.platinum .icon:before { content:"\f119" }.game .bronze .icon:before { content:"\f118" }.game .silver .icon:before { content:"\f117" }.game .gold .icon:before { content:"\f116" }.worlds .bronze .icon:before { content:"\f115" }.worlds .silver .icon:before { content:"\f114" }.worlds .gold .icon:before { content:"\f113" }.score .bronze .icon:before { content:"\f112" }.score .silver .icon:before { content:"\f111" }.score .gold .icon:before { content:"\f110" }.grind .bronze .icon:before { content:"\f10f" }.grind .silver .icon:before { content:"\f10e" }.grind .gold .icon:before { content:"\f10d" }.misc .bronze .icon:before { content:"\f10b" }.misc .silver .icon:before { content:"\f10a" }.misc .gold .icon:before { content:"\f10c" }.ratings .freedom .icon:before { content:"\f109" }.ratings .theCave .icon:before { content:"\f108" }.ratings .obstacleCourse .icon:before { content:"\f107" }.ratings .twisted .icon:before { content:"\f106" }.ratings .centered .icon:before { content:"\f105" }.ratings .edgy .icon:before { content:"\f104" }.ratings .fourRocks .icon:before { content:"\f103" }.ratings .theGate .icon:before { content:"\f102" }.ratings .brokenLines .icon:before { content:"\f101" }/** INTRO **/#intro .title {  margin:0 0 25px;  font-size:24px;}#intro .buttons {  position:absolute;  width:100%;  bottom:50px;}#intro .buttons .button {  display:inline-block;  width:85px;  height:40px;  margin:5px 10px 0 0;  font-size:16px;  line-height:40px;}#intro .buttons .button:last-of-type {  margin:5px 0 0;}#intro .buttons .main.button {  width:100px;  background:#0a0;}#intro .buttons .main.button:hover {  background:#080;}/** INPUTS **/.input {  height:60px;  padding:20px;  margin:0 0 25px;  border:3px solid #333;  border-radius:10px;  font-weight:bold;  -webkit-user-select:auto;  user-select:auto;}.input.error:not(:focus) {  border-color:#a00;  background:rgba(170, 0, 0, calc(1 / 3));}/** SWITCHES **/.switch {  float:left;  width:300px;  margin:0 0 25px 0;  overflow:hidden;}.tutorial.switch {  margin-top:50px;}.disabled.switch {  pointer-events:none;}.switch * {  float:left;}.switch input {  height:0;  width:0;  margin:0;  visibility:hidden;}.switch label {  display:block;  position:relative;  width:62px;  height:31px;  border-radius:31px;  background:#aaa;  cursor:pointer;}.disabled.switch label {  background:#ccc;}.switch label:after {  content:"";  position:absolute;  width:25px;  height:25px;  top:3px;  left:3px;  border-radius:25px;  background:#fff;  transition:300ms;}.switch input:checked + label {  background:#0a0;}.switch input:checked + label:after {  left:calc(100% - 3px);  transform:translateX(-100%);  background:#fff;}.switch span {  display:inline-block;  margin:0 0 0 10px;  font-weight:bold;  line-height:31px;}/** AREAS **/.area {  width:300px;  padding:50px 0 25px;  overflow:hidden;}.area .title {  border-bottom:1px solid #000;}.area .button {  float:left;  width:52px;  height:40px;  margin:0 10px 0 0;  background:#777;  font-size:18px;  line-height:40px;}.area .button:hover,.area .button:active {  background:#555;}.area .selected.button {  background:#333;}.area .button:last-of-type {  margin:0;}.area .points {  font-size:36px;  font-weight:bold;}/** SELECTION CHOICES **/.selection .choice {  float:left;  width:90px;  margin:0 15px 0 0;}.selection .choice:nth-of-type(3n) {  margin:0;}.selection .choice .map {  height:90px;  border:3px solid #555;  background-image:url(img/worlds/worlds.png);  background-size:252px 252px;  transition:border 250ms;  cursor:pointer;}.selection .choice:hover .map,.selection .choice:active .map,.selection .selected.choice .map {  border-color:#0a0;}.selection .choice .rating {  height:40px;  padding:5px 0 0;  font-size:12px;  color:#555;}.selection .choice:hover .rating,.selection .choice:active .rating,.selection .selected.choice .rating {  color:#0a0;}.selection .world1 .map {  background-position:0 0;}.selection .world2 .map {  background-position:168px 0;}.selection .world3 .map {  background-position:84px 0;}.selection .world4 .map {  background-position:0 168px;}.selection .world5 .map {  background-position:168px 168px;}.selection .world6 .map {  background-position:84px 168px;}.selection .world7 .map {  background-position:0 84px;}.selection .world8 .map {  background-position:168px 84px;}.selection .world9 .map {  background-position:84px 84px;}/** RATINGS **/.rating:after {  transition:color 250ms;}.star0.rating:after {  content:"\2606\2606\2606\2606\2606";}.star1.rating:after {  content:"\2605\2606\2606\2606\2606";}.star2.rating:after {  content:"\2605\2605\2606\2606\2606";}.star3.rating:after {  content:"\2605\2605\2605\2606\2606";}.star4.rating:after {  content:"\2605\2605\2605\2605\2606";}.star5.rating:after {  content:"\2605\2605\2605\2605\2605";}/** OPTIONS **/.options {  position:relative;  background:#ccc;  border:solid #ccc;  overflow:hidden;  cursor:pointer;}.options:after,.options .option {  font-weight:bold;}.options:after {  content:"";  position:absolute;  z-index:1;  top:0;  transition:left 250ms;}.options .option {  float:left;  position:relative;  z-index:2;  text-align:center;}/** PROGRESS **/.progress {  position:absolute;  width:300px;  height:10px;  bottom:15px;  left:0;  border-radius:10px;  background:#ccc;}.progress .bar {  position:absolute;  width:0;  height:100%;  top:0;  left:0;  border-radius:10px;  background:#0a0;}/** ELEMENTS **/.element,.element:after {  position:absolute;  width:100%;  height:100%;  top:0;  left:0;  transition:opacity 500ms;}.element {  background-color:#fff;  background-size:100% 100%;}.block.element {  pointer-events:none;}.removed.element,.initialized.element {  opacity:0;}.temporary.element:before,.temporary.element:after {  transform:scale(150%);}.temporary.element:after {  z-index:2;}.temporary.element:before {  z-index:3;}.pulsing.element:not(.dragged) {  animation:pulsing 1s infinite alternate;}@keyframes pulsing {  from { transform:scale(1) }  to { transform:scale(0.9) }}/** ELEMENT SYMBOLS **/.element:after {  content:"";  background-size:calc(2 / 3 * 100%) calc(2 / 3 * 100%);  background-position:center center;  background-repeat:no-repeat;}.fire.element:after {  background-color:#a00;  background-image:url(img/elements/fire.png);}.water.element:after {  background-color:#00a;  background-image:url(img/elements/water.png);}.earth.element:after {  background-color:#0a0;  background-image:url(img/elements/earth.png);}.air.element:after {  background-color:#fa0;  background-image:url(img/elements/air.png);}.space.element:after {  background-color:#000;  background-image:url(img/elements/space.png);}.block.element:after {  background-color:#aaa;  background-image:url(img/elements/block.png);}.block.element:after,.grade1:not(.space).element:after {  background-size:calc(1 / 3 * 100%) calc(1 / 3 * 100%);}.grade1:not(.space).element:after {  opacity:calc(1 / 3);}.grade2:not(.space).element:after {  opacity:calc(2 / 3);  background-size:50% 50%;}.grade1.space.element:after {  background-color:#555;}.grade2.space.element:after {  background-color:#333;}.dragged.element:after {  filter:grayscale(100%);}.dragged.space.element:after {  filter:brightness(200%);}/** ELEMENT BORDERS **/.element:before {  content:"";  position:absolute;  z-index:1;  width:80%;  height:80%;  top:0;  left:0;  margin:calc(10% - 3px);}.grade2:not(.space).element:before {  border:3px solid #fff;  border-radius:50%;}.grade2.space.element:before,.grade3:not(.space).element:before {  border:3px solid #fff;  border-radius:0;}.block.element:before {  display:none;}.hl .element:before,.mobile .element:before,.hxl .element:before,.section .element:before,.overlay .element:before {  margin:calc(10% - 1px);}.hl .grade2.element:before,.mobile .grade2.element:before,.hxl .grade2.element:before,.section .grade2.element:before,.overlay .grade2.element:before,.hl .grade3.element:before,.mobile .grade3.element:before,.hxl .grade3.element:before,.section .grade3.element:before,.overlay .grade3.element:before {  border-width:1px;}/** LOGO **/#logo {  position:relative;  margin:25px 0 50px;  overflow:hidden;  text-align:center;}#logo .caption .part {  display:block;  text-align:center;}#logo .caption .first {  height:100px;  font:72px "Kdam Thmor Pro";}#logo .caption .second {  width:300px;  height:50px;  padding:0 0 0 24px;  margin:0 auto;  border-radius:5px;  background:#000;  text-transform:uppercase;  font-size:32px;  line-height:50px;  letter-spacing:24px;  color:#fff;}#logo .elements {  width:300px;  margin:calc(50px / 4) auto 0;  overflow:hidden;}#logo .element {  float:left;  position:relative;  width:50px;  height:50px;  margin:0 calc(50px / 4) 0 0;  border-radius:5px;}#logo .element:before {  display:none;}#logo .element:after {  border-radius:5px;}#logo .element:last-of-type {  margin:0;}/** SETTINGS **/#settings .name,#settings .play {  width:100%;  font-size:24px;}#settings .play {  height:60px;  line-height:60px;}/** LIST **/.list {  position:relative;  padding:25px 0;}.list .info {  margin:0 0 25px;  font-size:12px;  font-weight:bold;}.list .info .highlight {  color:#0a0;}.list .headline {  padding:5px 0;  margin:0 0 15px;  border-radius:5px;  background:#ccc;  font-weight:bold;  overflow:hidden;}/** LIST ENTRIES **/.list .entry {  position:relative;  width:300px;  margin:0 0 10px;  text-align:left;  overflow:hidden;  transition:color 250ms;  cursor:pointer;}.list .entry:hover,.list .entry:active {  color:#777;}.list .entry:last-of-type {  margin-bottom:25px;}.list .item,.list .powerup {  float:left;  height:24px;  font-size:14px;  line-height:24px;}.list .position.item {  width:24px;  border-radius:12px;  text-align:center;}.list .powerup {  width:34px;  padding:0 5px 0 0;  margin:0 2px 0 0;  border-radius:5px;  background:#0aa;  text-align:right;  font-size:12px;  color:#fff;}.list .powerup:last-of-type {  margin:0;}.list .powerup .icon {  position:absolute;  width:24px;  height:24px;  left:0;  line-height:24px;  font-size:16px;  text-align:center;}.list .position.item {  background:#777;  font-weight:bold;  color:#fff;}.list .levels.item {  width:90px;  margin:0 0 0 10px;}.list .score.item {  width:70px;  font-weight:bold;}/** TROPHIES **/.trophies.container {  padding:0 0 20px;}.trophy {  margin:0 0 20px;  overflow:hidden;}.platinum.trophy {  padding:10px 0 20px;}.trophy .icon {  float:left;  width:60px;  height:60px;  border:1px solid #777;  line-height:60px;  cursor:default;}.trophy .name {  float:left;  width:226px;  margin:8px 0 0 10px;  text-align:left;  font-size:18px;  font-weight:bold;}.two-line.trophy .name {  margin-top:0;}.trophy .text {  float:left;  width:226px;  margin:0 0 0 10px;  font-size:14px;  text-align:left;}.trophy .icon:before {  font-size:40px;}/** TROPHY COLORS **/.bronze.trophy .icon {  color:#c73;}.silver.trophy .icon {  color:#777;}.gold.trophy .icon {  color:#fa0;}.platinum.trophy .icon {  color:#555;}.trophy:not(.earned) .icon {  color:#ccc;}/** DETAILS **/#details .version,#details .release,#details .games,#details .copyright,#details .links {  font-size:10px;  font-weight:bold;  cursor:default;}#details .version {  margin:25px 0 0;}#details .copyright {  margin:10px 0 0;}/** TIPS **/#tips {  width:300px;  height:375px;  margin:0 auto;}#tips .tip {  position:absolute;  width:100%;  top:0;  left:0;}#tips .title {  border-bottom:1px solid #000;}#tips .subtitle {  margin:5px 0 0;  font-size:14px;  font-weight:bold;  text-transform:uppercase;}#tips .text {  padding:50px 0 75px;  text-align:justify;  line-height:1.5;  -webkit-hyphens:auto;  hyphens:auto;}/** TUTORIAL **/#tutorial {  height:675px;}#tutorial .step {  position:absolute;  top:325px;}#tutorial .title {  margin:0 0 25px;  font-size:24px;  border-bottom:1px solid #000;}#tutorial .text {  margin:0 auto 10px;  text-align:left;}/** CONTROLS **/#controls {  position:relative;  height:40px;  padding:0 10px;  box-shadow:0 0 12px -2px rgb(0, 0, 0, 50%);  background:#333;  overflow:hidden;}.portrait #controls {  height:100vh;  width:100%;  padding:0;  background:transparent;}#controls .title {  float:left;  height:40px;  padding:0;  margin:0;  line-height:40px;  color:#fff;  cursor:default;}.portrait #controls .title {  width:100%;  text-align:center;  background:#333;}#controls .title .first {  font:24px "Kdam Thmor Pro";}#controls .title .second {  text-transform:uppercase;  font-size:12px;}/** CONTROLS DISPLAYS **/#controls .displays {  position:absolute;  top:50%;  left:50%;  transform:translate(-50%, -50%);  text-align:center;  cursor:default;}.portrait #controls .displays {  width:100%;  height:50px;  padding:5px;  top:40px;  left:0;  box-shadow:0 0 12px -2px rgb(0, 0, 0, 50%);  background:#555;  transform:none;}.wxl #controls .displays {  margin:0 0 0 -50px;}.wl #controls .displays {  display:none;}.wm #controls .displays,.hm #controls .displays {  height:90px;}.ws #controls .displays,.hl.wm #controls .displays {  height:50px;}#controls .display {  display:inline-block;  height:40px;  margin:0 0 0 15px;  text-align:center;  line-height:40px;  font-size:0;  color:#fff;}.wxl #controls .secondary,.ws #controls .secondary,.hl.wm #controls .secondary {  display:none;}.wm #controls .primary,.hm #controls .primary {  display:block;}#controls .level {  margin:0;}#controls .break {  position:absolute;}#controls .label,#controls .data {  font-size:16px;}#controls .label {  display:inline-block;  width:40px;}#controls .data {  display:inline-block;  height:20px;  margin:0 0 0 5px;  border-radius:5px;  background:#fff;  line-height:20px;  color:#000;  font-weight:bold;}#controls .level .data {  width:40px;}#controls .time .data,#controls .break .data {  width:60px;}#controls .score .data {  width:80px;}/** CONTROLS BUTTONS **/#controls .buttons {  float:right;  position:relative;  z-index:1;}.portrait #controls .buttons {  position:absolute;  width:210px;  left:50%;  bottom:30px;  transform:translate(-50%);}.hl.portrait #controls .buttons {  bottom:20px;}.ios.portrait #controls .buttons {  bottom:115px;}.ios.hl.portrait #controls .buttons {  bottom:105px;}#controls .button {  float:left;  width:40px;  height:40px;  border-radius:0;  line-height:40px;  box-shadow:none;}#controls .speed,#controls .powerups {  color:#0aa;}#controls .speed {  font-size:13px;}#controls .inactive.powerups {  color:#aaa;}#controls .speed:after {  content:'';  position:absolute;  width:20px;  height:20px;  top:7px;  left:7px;  border:3px solid #0aa;  border-radius:20px;}.portrait #controls .speed:after {  top:12px;  left:27px;}.playing #controls .speed,.replaying #controls .powerups {  display:none;}.portrait #controls .button {  width:50px;  height:50px;  margin:0 0 0 15px;  border-radius:25px;  line-height:50px;}#controls .button:hover,#controls .button:active {  background:#555;}.portrait #controls .button {  background:#333;}.portrait #controls .button:hover,.portrait #controls .button:active {  background:#000;}/** STAGE **/#game .stage {  z-index:1;  width:calc(100vh - 100px);  height:calc(100vh - 100px);  margin:30px auto;  box-shadow:0 0 12px -2px rgb(0, 0, 0, 25%);}.portrait #game .stage {  position:absolute;  width:100%;  height:100vw;  top:50%;  left:50%;  margin:calc(30px - 50vw) -50vw;}.hl #game .stage {  margin:calc(15px - 50vw) -50vw;}.hm #game .stage,.hxl #game .stage {  width:calc(100vh - 300px);  height:calc(100vh - 300px);  top:50%;  left:50%;  margin:0;  transform:translate(-50%, -50%);}.ios #game .stage {  box-shadow:none;}.replaying #field,.playing #game #board {  display:none;}/** BOARD **/#board {  width:300px;  box-shadow:0 0 12px -2px rgb(0, 0, 0, 25%);}.section #board {  height:300px;}.overlay #board {  height:150px;}.ios #board {  box-shadow:none;}#board .announcement {  position:absolute;  z-index:4;  width:100%;  height:75px;  top:0;  left:0;  background:#fff;  line-height:75px;  font-size:24px;  font-weight:bold;}/** SQUARES **/.stage .square {  float:left;  position:relative;  width:12.5%;  height:12.5%;  border-right:3px solid #fff;  border-bottom:3px solid #fff;  background:#eee;}.overlay .square {  height:25%;}.stage .line1 {  border-top:3px solid #fff;}.stage .row1 {  border-left:3px solid #fff;}.stage .dropzone {  background:#777;}.stage .purged {  background:#f7f7f7;}/** OVERLAY **/#overlay,#overlay .overlay {  position:absolute;}#overlay {  z-index:4;  width:100%;  height:100vh;  top:0;  left:0;  background:rgba(0, 0, 0, 75%);}#overlay .overlay {  width:425px;  padding:50px 0 75px;  top:50%;  left:50%;  border-radius:20px;  background:#eee;  transform:translate(-50%, -50%);}.mobile #overlay .overlay {  width:100%;  border-radius:0;}.ios.portrait #overlay .overlay {  margin:-42px 0 0 0;}#overlay .title {  text-align:center;}/** OVERLAY BUTTONS **/#overlay .button {  width:200px;  height:50px;  margin:35px auto 0;  font-size:24px;  line-height:50px;}#message .quit {  background:#a00;}#message .quit:hover,#message .quit:active {  background:#800;}#message .resume,#message .share {  background:#555;}#message .resume:hover,#message .resume:active,#message .share:hover,#message .share:active {  background:#333;}#advice .resume,#message .new {  background:#0a0;}#advice .resume:hover,#advice .resume:active,#message .new:hover,#message .new:active {  background:#080;}/** POWERUPS **/.powerup {  position:relative;  width:320px;  margin:0 auto;  overflow:hidden;}.used.powerup,.none.powerup {  text-align:center;}.powerup .side {  float:left;  position:relative;}.powerup .left.side {  width:120px;}.powerup .right.side {  width:200px;}#powerups .title {  font:48px "Kdam Thmor Pro";}#powerups .icon {  display:inline-block;  width:80px;  height:80px;  margin:40px 0 5px 0;  border-radius:40px;  box-shadow:0 0 12px -2px rgb(0, 0, 0, 50%);  background:#0aa;  font-size:40px;  line-height:80px;}#powerups .subtitle {  padding:22px 0 10px;  font-size:24px;  font-weight:bold;}#powerups .description {  font-size:18px;}#powerups .count {  position:absolute;  width:32px;  height:32px;  top:20px;  left:70px;  border-radius:16px;  box-shadow:0 0 12px -2px rgb(0, 0, 0, 50%);  background:#333;  text-align:center;  font-size:18px;  font-weight:bold;  line-height:32px;  color:#fff;}/** ADVICE **/#advice .title {  font:48px "Kdam Thmor Pro";}#advice .stage {  margin:25px auto;}#advice .text {  width:300px;  margin:0 auto;  padding:10px 0;}/** MESSAGE **/#message .title {  font:48px "Kdam Thmor Pro";}#message .score,#message .rating {  text-align:center;  font-size:32px;}#message .score {  padding:20px 20px 10px;  font-weight:bold;}#message .rating {  padding:0 0 10px;}/** LEGAL **/.legal {  max-width:800px;  padding:0 35px 50px;  margin:50px auto;  background:#eee;  overflow:hidden;}.legal > h1 {  margin:0 0 25px;}.legal h2 {  margin:25px 0 10px;}.legal p {  margin:10px 0;}.legal ul {  margin:10px 0;  padding:0 0 0 25px;}