{{label}}
How to Play
Match tiles in a clear path as demonstrated below
A straight and direct path
Two moves in an L shape
Three moves in an S shape
Three moves in a U shape
{{game.currScore}}
SCORE
{{game.bestScores[game.difficulty]}}
BEST
TIME'S UP!
Ready to try again?
A new personal best!
{{game.currScore}}
polyfill-next-selector { content: ':host > * [slide-up]'; } ::content > * /deep/ [slide-up] { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > .core-selected [slide-up]'; } ::content > .core-selected /deep/ [slide-up] { -webkit-transform: none; transform: none; } polyfill-next-selector { content: ':host > .core-selected ~ [animate]:not(.core-selected) [slide-up]'; } ::content > .core-selected ~ [animate]:not(.core-selected) /deep/ [slide-up] { -webkit-transform: translateY(100%); transform: translateY(100%); } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-up] { -webkit-transform: translateY(-100%); transform: translateY(-100%); } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up][fade]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-up][fade] { opacity: 0; }
polyfill-next-selector { content: ':host > * [slide-down]'; } ::content > * /deep/ [slide-down] { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > .core-selected [slide-down]'; } ::content > .core-selected /deep/ [slide-down] { -webkit-transform: none; transform: none; } polyfill-next-selector { content: ':host > .core-selected ~ [animate]:not(.core-selected) [slide-down]'; } ::content > .core-selected ~ [animate]:not(.core-selected) /deep/ [slide-down] { -webkit-transform: translateY(-100%); transform: translateY(-100%); } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-down]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-down] { -webkit-transform: translateY(100%); transform: translateY(100%); } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-down][fade]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-down][fade] { opacity: 0; }
polyfill-next-selector { content: ':host > * [slide-left]'; } ::content > * /deep/ [slide-left] { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > .core-selected [slide-left]'; } ::content > .core-selected /deep/ [slide-left] { -webkit-transform: none; transform: none; } polyfill-next-selector { content: ':host > .core-selected ~ [animate]:not(.core-selected) [slide-left]'; } ::content > .core-selected ~ [animate]:not(.core-selected) /deep/ [slide-left] { -webkit-transform: translateX(100%); transform: translateX(100%); } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-left]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-left] { -webkit-transform: translateX(-100%); transform: translateX(-100%); } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-left][fade]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-left][fade] { opacity: 0; }
polyfill-next-selector { content: ':host > * [slide-right]'; } ::content > * /deep/ [slide-right] { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > .core-selected [slide-right]'; } ::content > .core-selected /deep/ [slide-right] { -webkit-transform: none; transform: none; } polyfill-next-selector { content: ':host > .core-selected ~ [animate]:not(.core-selected) [slide-right]'; } ::content > .core-selected ~ [animate]:not(.core-selected) /deep/ [slide-right] { -webkit-transform: translateX(-100%); transform: translateX(-100%); } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-right]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-right] { -webkit-transform: translateX(100%); transform: translateX(100%); } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-right][fade]'; } ::content > [animate]:not(.core-selected) /deep/ [slide-right][fade] { opacity: 0; }
/* Hide heroes that are not currently transitioning */ polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [hero]'; } ::content > [animate]:not(.core-selected) /deep/ [hero] { opacity: 0; } polyfill-next-selector { content: ':host > .core-selected[animate] [hero]'; } ::content > .core-selected[animate] /deep/ [hero] { opacity: 1; z-index: 10000; } polyfill-next-selector { content: ':host > * [hero-p]'; } ::content > * /deep/ [hero-p] { -webkit-transition: box-shadow 100ms ease-out; transition: box-shadow 100ms ease-out; } polyfill-next-selector { content: ':host > [animate] [hero-p]'; } ::content > [animate] /deep/ [hero-p] { box-shadow: none !important; }
polyfill-next-selector { content: ':host > * [cross-fade]'; } ::content > * /deep/ [cross-fade] { -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > * [cross-fade][bg]'; } ::content > * /deep/ [cross-fade][bg] { -webkit-transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > * [cross-fade][hero-p]'; } ::content > * /deep/ [cross-fade][hero-p] { -webkit-transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host > .core-selected [cross-fade]'; } ::content > .core-selected /deep/ [cross-fade] { opacity: 1; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade]:not([hero-p]):not([bg])'; } ::content > [animate]:not(.core-selected) /deep/ [cross-fade]:not([hero-p]):not([bg]) { opacity: 0; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade][bg]'; } ::content > [animate]:not(.core-selected) /deep/ [cross-fade][bg] { background-color: rgba(0, 0, 0, 0); } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade][hero-p]'; } ::content > [animate]:not(.core-selected) /deep/ [cross-fade][hero-p] { background-color: rgba(0, 0, 0, 0); }
polyfill-next-selector { content: ':host > * [cross-fade-delayed]'; } ::content > * /deep/ [cross-fade-delayed] { -webkit-transition: opacity 500ms ease-out 500ms; transition: opacity 500ms ease-out 500ms; } polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade-delayed]'; } ::content > [animate]:not(.core-selected) /deep/ [cross-fade-delayed] { opacity: 0; } polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]'; } ::content > .core-selected /deep/ [cross-fade-delayed] { opacity: 1; }
/* cross-fade-all: cross fade everything except for heroes and their parents */ polyfill-next-selector { content: ':host(.cross-fade-all) > * *:not([hero]):not([hero-p]):not([cross-fade])'; } :host(.cross-fade-all) ::content > * /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) { -webkit-transition: opacity 500ms ease-out; transition: opacity 500ms ease-out; } polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.core-selected) *:not([hero]):not([hero-p]):not([cross-fade])'; } :host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) { opacity: 0; } polyfill-next-selector { content: ':host(.cross-fade-all) > .core-selected *:not([hero])'; } .host(.cross-fade-all) ::content > .core-selected /deep/ * { opacity: 1; } /* Only background-color is allowed for the hero's parents, no opacity transitions */ polyfill-next-selector { content: ':host(.cross-fade-all) > * [hero-p]'; } :host(.cross-fade-all) ::content > * /deep/ [hero-p] { -webkit-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; opacity: 1; } polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.core-selected) [hero-p]'; } :host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ [hero-p] { background-color: rgba(0, 0, 0, 0); }
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div { -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(2)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(2) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(3)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(4)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(4) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(5)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(5) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(6)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(6) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(7)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(7) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(8)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(8) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(9)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(9) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(10)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(10) { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(11)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(11) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(12)'; } :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(12) { -webkit-transition-delay: 0.55s; transition-delay: 0.55s; } polyfill-next-selector { content: '.core-selected [tile-cascade] > div'; } ::content > .core-selected /deep/ [tile-cascade] > div { } polyfill-next-selector { content: '[animate]:not(.core-selected) [tile-cascade] > div'; } ::content > [animate]:not(.core-selected) /deep/ [tile-cascade] > div { -webkit-transform: translateY(100%); transform: translateY(100%); } polyfill-next-selector { content: '[animate]:not(.core-selected) [tile-cascade][fade] > div'; } ::content > [animate]:not(.core-selected) /deep/ [tile-cascade][fade] > div { opacity: 0; }
This page requires javascript to be enabled
0
SCORE
0
BEST
TIME'S UP!
A new personal best!
0
Add Time: 0
Remove Pair: 0
Easy
Medium
Expert
How to Play
How to Play
Match tiles in a clear path as demonstrated below
A straight and direct path
Two moves in an L shape
Three moves in an S shape
Three moves in a U shape