@charset "UTF-8";
@import "../fonts/yomogi.css";
:root {
  --mfm-pink: #ffb3ba;
  --mfm-pink-rgb: 255, 179, 186;
  --mfm-blue: #bae1ff;
  --mfm-blue-rgb: 186, 225, 255;
  --mfm-green: #baffc9;
  --mfm-green-rgb: 186, 255, 201;
  --mfm-brown: #937C7C;
  --mfm-brown-rgb: 147, 124, 124;
  --mfm-black: #1f1f1f;
  --mfm-black-rgb: 31, 31, 31;
  --mfm-purple: #663399;
  --mfm-purple-rgb: 102, 51, 153;
  --mfm-red: #b11e31;
  --mfm-red-rgb: 177, 30, 49;
  --mfm-yellow: #ffffba;
  --mfm-yellow-rgb: 255, 255, 186;
  --mfm-gameblack: var(--mfm-black);
  --mfm-gameblack-rgb: var(--mfm-black-rgb);
  --mfm-gamegreen: #b0d971;
  --mfm-gamegreen-rgb: 176, 217, 113;
  --mfm-bg: #c7f0f4;
  --mfm-bg-rgb: 199, 240, 244;
  --mfm-bg-darker: #a2d1d5;
  --mfm-bg-darker-rgb: 162, 209, 213;
  --mfm-light-bg: var(--mfm-bg);
  --mfm-light-bg-rgb: var(--mfm-bg-rgb);
  --mfm-light-border: #1f1f1f;
  --mfm-light-border-rgb: 31, 31, 31;
  --mfm-light-text: #2f2f2f;
  --mfm-light-text-rgb: 47, 47, 47;
  --mfm-dark-bg: #1f1f1f;
  --mfm-dark-bg-rgb: 31, 31, 31;
  --mfm-dark-border: var(--mfm-bg-darker);
  --mfm-dark-border-rgb: var(--mfm-bg-darker-rgb);
  --mfm-dark-text: #efefef;
  --mfm-dark-text-rgb: 239, 239, 239;
  --light-bg: var(--mfm-light-bg);
  --light-bg-rgb: var(--mfm-light-bg-rgb);
  --light-border: var(--mfm-light-border);
  --light-border-rgb: var(--mfm-light-border-rgb);
  --light-text: var(--mfm-light-text);
  --light-text-rgb: var(--mfm-light-text-rgb);
  --light-primary: var(--mfm-gamegreen);
  --light-primary-rgb: var(--mfm-gamegreen-rgb);
  --dark-bg: #0f0f0f;
  --dark-bg-rgb: 15, 15, 15;
  --dark-border: var(--mfm-dark-border);
  --dark-border-rgb: var(--mfm-dark-border-rgb);
  --dark-text: var(--mfm-dark-text);
  --dark-text-rgb: var(--mfm-dark-text-rgb);
  --dark-primary: var(--mfm-gamegreen);
  --dark-primary-rgb: var(--mfm-gamegreen-rgb);
  --border-radius: 3px;
  --border-radius-2x: calc(var(--border-radius) * 2);
  --game-container-margin-top: 40px;
  --grid-row-cells: 4;
  --grid-spacing: 15px;
  --field-width-min: 290px;
  --field-width-max: 1000px;
  --field-width: clamp(var(--field-width-min), 90vw, var(--field-width-max));
  --tile-size: calc((var(--field-width) - var(--grid-spacing) * (var(--grid-row-cells) + 1)) / var(--grid-row-cells));
  --tile-border-radius: var(--border-radius);
  --tile-font-size: calc(var(--tile-size) * 0.4);
  --tile-gold-color: #edc22e;
  --tile-gold-color-rgb: 237, 194, 46;
  --tile-gold-glow-color: rgba(var(--tile-gold-color-rgb), .15);
  --tile-color-2: #bfbfbf;
  --tile-color-2-rgb: 191, 191, 191;
  --tile-color-4: var(--mfm-bg);
  --tile-color-4-rgb: var(--mfm-bg-rgb);
  --tile-color-8: var(--mfm-blue);
  --tile-color-8-rgb: var(--mfm-blue-rgb);
  --tile-color-16: var(--mfm-pink);
  --tile-color-16-rgb: var(--mfm-pink-rgb);
  --tile-color-32: var(--mfm-green);
  --tile-color-32-rgb: var(--mfm-green-rgb);
  --tile-color-64: var(--mfm-brown);
  --tile-color-64-rgb: var(--mfm-brown-rgb);
  --tile-color-128: var(--mfm-black);
  --tile-color-128-rgb: var(--mfm-black-rgb);
  --tile-color-256: var(--mfm-purple);
  --tile-color-256-rgb: var(--mfm-purple-rgb);
  --tile-color-512: var(--mfm-red);
  --tile-color-512-rgb: var(--mfm-red-rgb);
  --tile-color-1024: var(--mfm-gameblack);
  --tile-color-1024-rgb: var(--mfm-gameblack-rgb);
  --tile-color-2048: var(--mfm-yellow);
  --tile-color-2048-rgb: var(--mfm-yellow-rgb);
  --stats-font-size: calc(var(--tile-size) * 0.4);
}
@media screen and (max-width: 520px) {
  :root {
    --game-container-margin-top: 17px;
    --grid-spacing: 10px;
    --tile-size: calc((var(--field-width) - var(--grid-spacing) * (var(--grid-row-cells) + 1)) / var(--grid-row-cells));
    --tile-border-radius: var(--border-radius);
  }
}

body,
html {
  --primary: var(--light-primary);
  --game-container-background: var(--dark-border);
  --tile-color: var(--light-bg);
  --tile-color-rgb: var(--light-bg-rgb);
  --bg-color: var(--light-bg);
  --text-color: var(--light-text);
  --border-color: var(--light-border);
  color-scheme: light;
  background-color: var(--light-bg);
  border-color: var(--light-border);
  color: var(--light-text);
}

html[data-theme=dark] body,
html[data-theme=dark] {
  --primary: var(--dark-primary);
  --game-container-background: var(--dark-border);
  --tile-color: var(--light-bg);
  --tile-color-rgb: var(--light-bg-rgb);
  --bg-color: var(--dark-bg);
  --text-color: var(--dark-text);
  --border-color: var(--dark-border);
  color-scheme: dark;
  background-color: var(--dark-bg);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Yomogi", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
}
@media screen and (max-width: 520px) {
  html,
  body {
    font-size: 15px;
  }
}

body {
  margin: 20px 0;
}
@media screen and (max-width: 520px) {
  body {
    margin: 10px 0;
    padding: 0 20px;
  }
}

p {
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.65rem;
}

a {
  color: var(--text-color);
  font-weight: bold;
  text-decoration: underline wavy;
  cursor: pointer;
}

strong.important {
  text-transform: uppercase;
}

hr {
  border: none;
  border-bottom: 1px solid var(--border-color);
  margin-top: 20px;
  margin-bottom: 30px;
}

.hidden {
  display: none !important;
}

.container {
  width: var(--field-width);
  margin: 0 auto;
}

.heading:after {
  content: "";
  display: block;
  clear: both;
}

h1.title {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  padding-bottom: 15px;
  display: block;
  text-align: center;
  text-shadow: 1px 1px 3px #3f3f3f;
}

@-webkit-keyframes move-up {
  0% {
    top: 25px;
    opacity: 1;
  }
  100% {
    top: -50px;
    opacity: 0;
  }
}
@-moz-keyframes move-up {
  0% {
    top: 25px;
    opacity: 1;
  }
  100% {
    top: -50px;
    opacity: 0;
  }
}
@keyframes move-up {
  0% {
    top: 25px;
    opacity: 1;
  }
  100% {
    top: -50px;
    opacity: 0;
  }
}
.scores-container {
  float: right;
  text-align: right;
}

.restart-button,
.score-container,
.best-container {
  position: relative;
  display: inline-block;
  background-color: var(--game-container-background);
  padding: 15px 5px 20px 5px;
  font-size: var(--stats-font-size);
  height: calc(var(--stats-font-size) * 1.2);
  min-width: calc(var(--field-width) * 0.3);
  line-height: calc(var(--stats-font-size) + 25px);
  font-weight: bold;
  border-radius: var(--border-radius);
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  margin-top: 8px;
  text-align: center;
}
@media screen and (max-width: 520px) {
  .restart-button,
  .score-container,
  .best-container {
    margin-top: 0;
  }
}
.restart-button:after,
.score-container:after,
.best-container:after {
  position: absolute;
  width: 100%;
  top: 10px;
  left: 0;
  font-size: calc(var(--stats-font-size) * 0.4);
  line-height: calc(var(--stats-font-size) * 0.4);
  color: #dfdfdf;
}
.restart-button .score-addition,
.score-container .score-addition,
.best-container .score-addition {
  position: absolute;
  right: 5px;
  font-size: var(--stats-font-size);
  line-height: var(--stats-font-size);
  font-weight: bold;
  color: var(--primary);
  text-shadow: 1px 1px 3px #3f3f3f;
  z-index: 100;
  -webkit-animation: move-up 600ms ease-in;
  -moz-animation: move-up 600ms ease-in;
  animation: move-up 600ms ease-in;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

.score-container:after {
  content: "キュン";
}

.best-container:after {
  content: "ベストキュン";
}

.restart-container {
  float: left;
  text-align: left;
}

.restart-button {
  background-color: var(--primary);
  min-width: calc(var(--field-width) * 0.15);
}

.restart-button:after {
  content: "新規";
}

.above-game,
.below-game {
  margin-top: 10px;
  margin-bottom: 10px;
}
.above-game:after,
.below-game:after {
  content: "";
  display: block;
  clear: both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.theme-button {
  text-align: center;
  cursor: pointer;
}

html #theme-button::before {
  content: "🌙";
}

html[data-theme=dark] #theme-button::before {
  content: "🌞";
}

.game-container {
  position: relative;
  margin-top: var(--game-container-margin-top);
  margin-bottom: var(--game-container-margin-top);
  padding: var(--grid-spacing);
  cursor: default;
  -webkit-touch-callout: none;
  -ms-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  background-color: var(--game-container-background);
  border-radius: var(--border-radius-2x);
  width: var(--field-width);
  height: var(--field-width);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.game-container .game-message {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(var(--tile-color-rgb), 0.9);
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  text-align: center;
  -webkit-animation: fade-in 200ms ease 1200ms;
  -moz-animation: fade-in 200ms ease 1200ms;
  animation: fade-in 200ms ease 1200ms;
  -webkit-animation: fade-out 50ms ease 1200ms;
  -moz-animation: fade-out 50ms ease 1200ms;
  animation: fade-out 50ms ease 1200ms;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}
.game-container .game-message .game-message-content {
  font-size: var(--tile-font-size);
  font-weight: bold;
  height: var(--tile-font-size);
  line-height: var(--tile-font-size);
  margin-top: calc(var(--field-width) * 0.3);
}
.game-container .game-message .lower {
  display: block;
  margin-top: calc(var(--field-width) * 0.1);
}
.game-container .game-message .game-message-button {
  display: inline-block;
  background-color: var(--primary);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  height: 2rem;
  line-height: 2rem;
  box-shadow: 1px 1px 3px #3f3f3f;
  font-size: calc(var(--tile-font-size) * 0.4);
  height: calc(var(--field-width) * 0.1);
  line-height: calc(var(--field-width) * 0.1);
  min-width: calc(var(--field-width) * 0.2);
}
.game-container .game-message .game-message-button.keep-playing-button {
  display: none;
}
.game-container .game-message.game-won, .game-container .game-message.game-over {
  display: block;
}
.game-container .game-message.game-won {
  background-color: rgba(237, 194, 46, 0.5);
  color: #ffffff;
}
.game-container .game-message.game-won .game-message-button.keep-playing-button {
  display: inline-block;
}

.grid-container {
  position: absolute;
  z-index: 1;
}

.grid-row {
  margin-bottom: var(--grid-spacing);
}
.grid-row:last-child {
  margin-bottom: 0;
}
.grid-row:after {
  content: "";
  display: block;
  clear: both;
}

.grid-cell {
  width: var(--tile-size);
  height: var(--tile-size);
  margin-right: var(--grid-spacing);
  float: left;
  border-radius: var(--tile-border-radius);
  background-color: rgba(var(--tile-color-rgb), 0.35);
}
.grid-cell:last-child {
  margin-right: 0;
}

.tile-container {
  position: absolute;
  z-index: 2;
}

.tile, .tile .tile-inner {
  width: var(--tile-size);
  height: var(--tile-size);
  line-height: var(--tile-size);
}
.tile.tile-position-1-1 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
}
.tile.tile-position-1-2 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
}
.tile.tile-position-1-3 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
}
.tile.tile-position-1-4 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
}
.tile.tile-position-2-1 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
}
.tile.tile-position-2-2 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
}
.tile.tile-position-2-3 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
}
.tile.tile-position-2-4 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
}
.tile.tile-position-3-1 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
}
.tile.tile-position-3-2 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
}
.tile.tile-position-3-3 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
}
.tile.tile-position-3-4 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
}
.tile.tile-position-4-1 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (1 - 1)));
}
.tile.tile-position-4-2 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (2 - 1)));
}
.tile.tile-position-4-3 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (3 - 1)));
}
.tile.tile-position-4-4 {
  -webkit-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  -moz-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  -ms-transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
  transform: translate(calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)), calc((var(--tile-size) + var(--grid-spacing)) * (4 - 1)));
}

.tile {
  position: absolute;
  -webkit-transition: 100ms ease-in-out;
  -moz-transition: 100ms ease-in-out;
  transition: 100ms ease-in-out;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
}
.tile .tile-inner {
  border-radius: var(--tile-border-radius);
  background-color: var(--tile-color);
  text-align: center;
  font-weight: bold;
  z-index: 10;
  font-size: var(--tile-font-size);
}
.tile.tile-2 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-2);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
}
.tile.tile-4 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-4);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
}
.tile.tile-8 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-8);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
}
.tile.tile-16 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-16);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 1);
}
.tile.tile-32 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-32);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 1);
}
.tile.tile-64 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-64);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 1);
}
.tile.tile-128 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-128);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 0.9);
}
.tile.tile-256 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-256);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 0.9);
}
.tile.tile-512 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-512);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 0.9);
}
.tile.tile-1024 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-1024);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 0.8);
}
.tile.tile-2048 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-2048);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 0.8);
}
.tile.tile-4096 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-4096);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 0.8);
}
.tile.tile-8192 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-8192);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 0.8);
}
.tile.tile-16384 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-16384);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 0.8);
}
.tile.tile-32768 .tile-inner {
  color: #ffffff;
  text-shadow: 1px 1px 3px #3f3f3f;
  background-color: var(--tile-color-32768);
  background-image: url("../images/mfm-wings.svg");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  font-size: calc(var(--tile-font-size) * 0.8);
}
.tile.tile-4 .tile-inner {
  background-image: url("../images/mfm-wings.svg"), url("../images/mfm-checquered.svg");
  background-size: 100%, 20px 20px;
  background-repeat: no-repeat, repeat;
  background-position: bottom center, top left;
}
.tile.tile-1024 .tile-inner {
  background-image: url("../images/mfm-wings.svg"), url("../images/mfm-gamestripe.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom center, top left;
}
.tile.tile-super .tile-inner {
  background-color: #ffffff;
  background-image: url("../images/yumeiro-logo-43.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-blend-mode: unset;
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes appear {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes appear {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.tile-new .tile-inner {
  -webkit-animation: appear 200ms ease 100ms;
  -moz-animation: appear 200ms ease 100ms;
  animation: appear 200ms ease 100ms;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

@-webkit-keyframes pop {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pop {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pop {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.tile-merged .tile-inner {
  z-index: 20;
  -webkit-animation: pop 200ms ease 100ms;
  -moz-animation: pop 200ms ease 100ms;
  animation: pop 200ms ease 100ms;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}