main.css

body {
  background-color: black;
}
#stage {
  position: relative;
  margin: 0 auto;
}
body.paused #stage {
  opacity: .6;
}
body.paused #stage [data-noun] {
  animation-play-state: paused !important;
}
#game {
  background-color: black;
  color: white;
  position: absolute;
  top: 96px;
  width: 640px;
  height: 320px;
  margin: 0 auto;
  border: solid 3px white;
  z-index: 99;
  border-radius: .75em;
}
#game a, #game article span {
  color: #d9d325;
}
#game article span {
  text-transform: uppercase;
}
#game-title {
  margin: 0 auto;
  width: 448px;
}
#game article {
  text-align: center;
  font-family: Tahoma;
  font-size: 1.25em;
  margin-top: 1em;
}
#stats,
#hint,
#title {
  position: relative;
  width: 1280px;
  height: 16px;
  margin: 5px auto;
  color: white;
}
#title {
  margin-top: -1em;
}
.intermission #title {
  text-align: center;
}
#hint {
  text-align: right;
  font-family: Tahoma;
}
#stats * {
  height: 16px;
}
#stats > * {
  position: absolute;
}
#extra-scoring,
.portal #scoring {
  visibility: hidden;
}
.portal #extra-scoring {
  visibility: visible;
}
#scoring, #extra-scoring {
  left: 0;
  width: 192px;
}
#game-over {
  left: 448px;
  width: 416px;
  margin-top: 2px;
  visibility: hidden;
}
[data-lives='0'] #game-over {
  visibility: visible;
}
#time {
  left: 896px;
}
#score {
  left: 1088px;
}
@keyframes ping {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1);
  }
}
.extra-life #lives {
  animation: ping .5s forwards;
}
#lives {
  left: 736px;
  width: 64px;
}
[data-lives='0'] #lives {
  visibility: hidden;
}
#collected {
  position: absolute;
  left: 256px;
  width: 64px;
  height: 16px;
}
body.debug [data-noun='magic-wall'] {
  outline: solid 1px cyan;
}
body.debug .falling {
  outline: solid 1px red;
}
body.debug .rolling {
  outline: solid 1px white;
}
body.debug .falling.rolling {
  outline: solid 2px pink;
}
body.debug .exploding {
  outline: solid 1px orange;
}
[data-noun] {
  position: absolute;
  height: 32px;
  width: 32px;
  background-image: url(./images/sprites.png);
}
#stage[data-cave='b'] [data-noun] {
  background-image: url(./images/spritesb.png);
}
#stage[data-cave='c'] [data-noun] {
  background-image: url(./images/spritesc.png);
}
#stage[data-cave='d'] [data-noun] {
  background-image: url(./images/spritesd.png);
}
#stage[data-cave='e'] [data-noun] {
  background-image: url(./images/spritese.png);
}
#stage[data-cave='f'] [data-noun] {
  background-image: url(./images/spritesf.png);
}
#stage[data-cave='g'] [data-noun] {
  background-image: url(./images/spritesg.png);
}
#stage[data-cave='h'] [data-noun] {
  background-image: url(./images/spritesh.png);
}
#stage[data-cave='i'] [data-noun] {
  background-image: url(./images/spritesi.png);
}
#stage[data-cave='j'] [data-noun] {
  background-image: url(./images/spritesj.png);
}
#stage[data-cave='k'] [data-noun] {
  background-image: url(./images/spritesk.png);
}
#stage[data-cave='l'] [data-noun] {
  background-image: url(./images/spritesl.png);
}
#stage[data-cave='m'] [data-noun] {
  background-image: url(./images/spritesm.png);
}
#stage[data-cave='n'] [data-noun] {
  background-image: url(./images/spritesn.png);
}
#stage[data-cave='o'] [data-noun] {
  background-image: url(./images/spriteso.png);
}
#stage[data-cave='p'] [data-noun] {
  background-image: url(./images/spritesp.png);
}
body.smooth [data-noun] {
  transition: top .1s, left .1s;
}
[data-noun='entrance'] {
  background-position: -64px -192px;
  animation: flash .5s steps(1) infinite;
}
.portal [data-noun='exit'] {
  background-position: -64px -192px;
  animation: flash .5s steps(1) infinite;
}
[data-noun='poof'] {
  background-position: 0 -192px;
  animation: materialize .2s steps(1);
}
[data-noun='amoeba'] {
  background-position: 0 -256px;
  animation: ooze .6s steps(7) infinite;
}
[data-noun='Rockford'].idle {
  background-position: 0 0;
  animation:  idle-a .5s steps(1) 5s,
              idle-b .5s steps(1) 5.5s,
              idle-c .5s steps(1) 6s 3,
              idle-a .5s steps(1) 7.5s 2,
              idle-b .5s steps(1) 8.5s infinite;
}
[data-noun='Rockford'][data-facing='right'].moving {
  background-position: 0 -160px;
  animation: run-right .3s steps(7) infinite;
}
[data-noun='Rockford'][data-facing='left'].moving {
  background-position: 0 -128px;
  animation: run-left .3s steps(7) infinite;
}
[data-noun='diamond'] {
  background-position: 0 -320px;
  animation: glimmer .3s steps(7) infinite;
}
[data-noun='firefly'] {
  background-position: 0px -288px;
  animation: radiate .3s steps(7) infinite;
}
[data-noun='butterfly'] {
  background-position: 0px -352px;
  animation: flutter .3s steps(7) infinite;
}
[data-noun='explosion'] {
  background-position: -64px 0;
  animation: disappearing .3s forwards;
}
[data-enchantment='on'] [data-noun='magic-wall'] {
  background-position: -128px -192px;
  animation: shimmy .3s steps(3) infinite;
}
@keyframes shimmy {
  100% {
    background-position: -224px -192px;
  }
}
[data-noun='wall'],
[data-noun='magic-wall'] {
  background-position: -96px -192px;
}
[data-noun='exit'] {
  background-position: -32px -192px;
}
[data-noun='steel-wall'] {
  background-position: -32px -192px;
}
[data-noun='boulder'] {
  background-position: 0 -224px;
}
[data-noun='dirt'] {
  background-position: -32px -224px;
}

[data-x='0'] {
  left: 0;
}
[data-x='1'] {
  left: 32px;
}
[data-x='2'] {
  left: 64px;
}
[data-x='3'] {
  left: 96px;
}
[data-x='4'] {
  left: 128px;
}
[data-x='5'] {
  left: 160px;
}
[data-x='6'] {
  left: 192px;
}
[data-x='7'] {
  left: 224px;
}
[data-x='8'] {
  left: 256px;
}
[data-x='9'] {
  left: 288px;
}
[data-x='10'] {
  left: 320px;
}
[data-x='11'] {
  left: 352px;
}
[data-x='12'] {
  left: 384px;
}
[data-x='13'] {
  left: 416px;
}
[data-x='14'] {
  left: 448px;
}
[data-x='15'] {
  left: 480px;
}
[data-x='16'] {
  left: 512px;
}
[data-x='17'] {
  left: 544px;
}
[data-x='18'] {
  left: 576px;
}
[data-x='19'] {
  left: 608px;
}
[data-x='20'] {
  left: 640px;
}
[data-x='21'] {
  left: 672px;
}
[data-x='22'] {
  left: 704px;
}
[data-x='23'] {
  left: 736px;
}
[data-x='24'] {
  left: 768px;
}
[data-x='25'] {
  left: 800px;
}
[data-x='26'] {
  left: 832px;
}
[data-x='27'] {
  left: 864px;
}
[data-x='28'] {
  left: 896px;
}
[data-x='29'] {
  left: 928px;
}
[data-x='30'] {
  left: 960px;
}
[data-x='31'] {
  left: 992px;
}
[data-x='32'] {
  left: 1024px;
}
[data-x='33'] {
  left: 1056px;
}
[data-x='34'] {
  left: 1088px;
}
[data-x='35'] {
  left: 1120px;
}
[data-x='36'] {
  left: 1152px;
}
[data-x='37'] {
  left: 1184px;
}
[data-x='38'] {
  left: 1216px;
}
[data-x='39'] {
  left: 1248px;
}
[data-x='40'] {
  left: 1280px;
}
[data-x='41'] {
  left: 1312px;
}
[data-x='42'] {
  left: 1344px;
}
[data-x='43'] {
  left: 1376px;
}
[data-x='44'] {
  left: 1408px;
}
[data-x='45'] {
  left: 1440px;
}
[data-x='46'] {
  left: 1472px;
}
[data-x='47'] {
  left: 1504px;
}
[data-x='48'] {
  left: 1536px;
}
[data-x='49'] {
  left: 1568px;
}
[data-y='0'] {
  top: 0;
}
[data-y='1'] {
  top: 32px;
}
[data-y='2'] {
  top: 64px;
}
[data-y='3'] {
  top: 96px;
}
[data-y='4'] {
  top: 128px;
}
[data-y='5'] {
  top: 160px;
}
[data-y='6'] {
  top: 192px;
}
[data-y='7'] {
  top: 224px;
}
[data-y='8'] {
  top: 256px;
}
[data-y='9'] {
  top: 288px;
}
[data-y='10'] {
  top: 320px;
}
[data-y='11'] {
  top: 352px;
}
[data-y='12'] {
  top: 384px;
}
[data-y='13'] {
  top: 416px;
}
[data-y='14'] {
  top: 448px;
}
[data-y='15'] {
  top: 480px;
}
[data-y='16'] {
  top: 512px;
}
[data-y='17'] {
  top: 544px;
}
[data-y='18'] {
  top: 576px;
}
[data-y='19'] {
  top: 608px;
}
[data-y='20'] {
  top: 640px;
}
[data-y='21'] {
  top: 672px;
}
[data-y='22'] {
  top: 704px;
}
[data-y='23'] {
  top: 736px;
}
[data-y='24'] {
  top: 768px;
}
[data-y='25'] {
  top: 800px;
}
[data-y='26'] {
  top: 832px;
}
[data-y='27'] {
  top: 864px;
}
[data-y='28'] {
  top: 896px;
}
[data-y='29'] {
  top: 928px;
}
[data-y='30'] {
  top: 960px;
}
[data-y='31'] {
  top: 992px;
}
[data-y='32'] {
  top: 1024px;
}
[data-y='33'] {
  top: 1056px;
}
[data-y='34'] {
  top: 1088px;
}
[data-y='35'] {
  top: 1120px;
}
[data-y='36'] {
  top: 1152px;
}
[data-y='37'] {
  top: 1184px;
}
[data-y='38'] {
  top: 1216px;
}
[data-y='39'] {
  top: 1248px;
}
[data-y='40'] {
  top: 1280px;
}
[data-y='41'] {
  top: 1312px;
}
[data-y='42'] {
  top: 1344px;
}
[data-y='43'] {
  top: 1376px;
}
[data-y='44'] {
  top: 1408px;
}
[data-y='45'] {
  top: 1440px;
}
[data-y='46'] {
  top: 1472px;
}
[data-y='47'] {
  top: 1504px;
}
[data-y='48'] {
  top: 1536px;
}
[data-y='49'] {
  top: 1568px;
}

[data-char] {
  height: 16px;
  width: 32px;
  display: inline-block;
  background-image: url(./images/sprites.png);
}
[data-char='diamond']{
  background-position: -256px -64px;
}
[data-char='life'] {
  background-position: -288px -512px;
}
[data-char='0']{
  background-position: -288px -256px;
}
[data-char=' '] {
  background-position: -288px -480px;
}
[data-char='1']{
  background-position: -288px -272px;
}
[data-char='2']{
  background-position: -288px -288px;
}
[data-char='3']{
  background-position: -288px -304px;
}
[data-char='4']{
  background-position: -288px -320px;
}
[data-char='5']{
  background-position: -288px -336px;
}
[data-char='6']{
  background-position: -288px -352px;
}
[data-char='7']{
  background-position: -288px -368px;
}
[data-char='8']{
  background-position: -288px -384px;
}
[data-char='9']{
  background-position: -288px -400px;
}
[data-char='a'] {
  background-position: -288px -530px;
}
[data-char='b'] {
  background-position: -288px -546px;
}
[data-char='c'] {
  background-position: -288px -562px;
}
[data-char='d'] {
  background-position: -288px -578px;
}
[data-char='e'] {
  background-position: -288px -594px;
}
[data-char='f'] {
  background-position: -288px -610px;
}
[data-char='g'] {
  background-position: -288px -626px;
}
[data-char='h'] {
  background-position: -288px -642px;
}
[data-char='i'] {
  background-position: -288px -658px;
}
[data-char='j'] {
  background-position: -288px -674px;
}
[data-char='k'] {
  background-position: -288px -690px;
}
[data-char='l'] {
  background-position: -288px -706px;
}
[data-char='m'] {
  background-position: -288px -722px;
}
[data-char='n'] {
  background-position: -288px -738px;
}
[data-char='o'] {
  background-position: -288px -754px;
}
[data-char='p'] {
  background-position: -288px -770px;
}
[data-char='q'] {
  background-position: -288px -786px;
}
[data-char='r'] {
  background-position: -288px -802px;
}
[data-char='s'] {
  background-position: -288px -818px;
}
[data-char='t'] {
  background-position: -288px -834px;
}
[data-char='u'] {
  background-position: -288px -850px;
}
[data-char='v'] {
  background-position: -288px -866px;
}
[data-char='w'] {
  background-position: -288px -882px;
}
[data-char='x'] {
  background-position: -288px -898px;
}
[data-char='y'] {
  background-position: -288px -914px;
}
[data-char='z'] {
  background-position: -288px -930px;
}
[data-char].bright,
.bright [data-char] {
  background-position-x: -256px;
}
@keyframes flash {
  0%, 50% {
    background-position: -64px -192px;
  }
  50%, 100% {
    background-position: -32px -192px;
  }
}
@keyframes materialize {
  0%, 50% {
    background-position: -96px -224px;
  }
  50%, 100% {
    background-position: -128px -224px;
  }
}
@keyframes idle-a {
  0%, 12.5% { background-position: 0 -32px; }
  12.5%, 25% { background-position: -32px -32px; }
  25%, 37.5% { background-position: -64px -32px }
  37.5%, 50% { background-position: -96px -32px; }
  50%, 62.5% { background-position: -128px -32px; }
  62.5%, 75% { background-position: -160px -32px; }
  75%, 87.5% { background-position: -192px -32px; }
  87.5%, 100% { background-position: -224px -32px; }
}
@keyframes idle-b {
  0%, 12.5% { background-position: 0 -64px; }
  12.5%, 25% { background-position: -32px -64px; }
  25%, 37.5% { background-position: -64px -64px }
  37.5%, 50% { background-position: -96px -64px; }
  50%, 62.5% { background-position: -128px -64px; }
  62.5%, 75% { background-position: -160px -64px; }
  75%, 87.5% { background-position: -192px -64px; }
  87.5%, 100% { background-position: -224px -64px; }
}
@keyframes idle-c {
  0%, 12.5% { background-position: 0 -96px; }
  12.5%, 25% { background-position: -32px -96px; }
  25%, 37.5% { background-position: -64px -96px }
  37.5%, 50% { background-position: -96px -96px; }
  50%, 62.5% { background-position: -128px -96px; }
  62.5%, 75% { background-position: -160px -96px; }
  75%, 87.5% { background-position: -192px -96px; }
  87.5%, 100% { background-position: -224px -96px; }
}
@keyframes radiate {
  100% {
    background-position: -224px -288px;
  }
}
@keyframes flutter {
  100% {
    background-position: -224px -352px;
  }
}
@keyframes ooze {
  100% {
    background-position: -224px -256px;
  }
}
@keyframes run-right {
  100% {
    background-position: -224px -160px;
  }
}
@keyframes run-left {
  100% {
    background-position: -224px -128px;
  }
}
@keyframes run-up {
  0% {
    background-position: -32px -96px;
  }
  50% {
    transform: scaleX(-1);
  }
}
@keyframes run-down {
  0% {
    background-position: -32px -64px;
  }
  50% {
    transform: scaleX(-1);
  }
}
@keyframes glimmer {
  100% {
    background-position: -224px -320px;
  }
}
@keyframes disappearing {
  0%   {opacity: 1;}
  90%  {opacity: .1;}
  100% {opacity: 0;}
}