@import url(fonts/clear-sans.css);
html, body {
  margin: 0;
  padding: 0;
  background: #faf8ef;
  color: #776e65;
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; }

body {
  margin: 80px 0; }

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

h1.title {
  font-size: 80px;
  font-weight: bold;
  margin: 0;
  display: block;
  float: left; }

@-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; }

.score-container, .best-container {
  position: relative;
  display: inline-block;
  background: #bbada0;
  padding: 15px 25px;
  font-size: 25px;
  height: 25px;
  line-height: 47px;
  font-weight: bold;
  border-radius: 3px;
  color: white;
  margin-top: 8px;
  text-align: center; }
  .score-container:after, .best-container:after {
    position: absolute;
    width: 100%;
    top: 10px;
    left: 0;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 13px;
    text-align: center;
    color: #eee4da; }
  .score-container .score-addition, .best-container .score-addition {
    position: absolute;
    right: 30px;
    color: red;
    font-size: 25px;
    line-height: 25px;
    font-weight: bold;
    color: rgba(119, 110, 101, 0.9);
    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: "Score"; }

.best-container:after {
  content: "Best"; }

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

a {
  color: #776e65;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer; }

strong.important {
  text-transform: uppercase; }

hr {
  border: none;
  border-bottom: 1px solid #d8d4d0;
  margin-top: 20px;
  margin-bottom: 30px; }

.container {
  width: 500px;
  margin: 0 auto; }

@-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; } }
.game-container {
  margin-top: 40px;
  position: relative;
  padding: 15px;
  cursor: default;
  -webkit-touch-callout: none;
  -ms-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  background: #bbada0;
  border-radius: 6px;
  width: 500px;
  height: 500px;
  -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;
    background: rgba(238, 228, 218, 0.5);
    z-index: 100;
    text-align: center;
    -webkit-animation: fade-in 800ms ease 1200ms;
    -moz-animation: fade-in 800ms ease 1200ms;
    animation: fade-in 800ms ease 1200ms;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }
    .game-container .game-message p {
      font-size: 60px;
      font-weight: bold;
      height: 60px;
      line-height: 60px;
      margin-top: 222px; }
    .game-container .game-message .lower {
      display: block;
      margin-top: 59px; }
    .game-container .game-message a {
      display: inline-block;
      background: #8f7a66;
      border-radius: 3px;
      padding: 0 20px;
      text-decoration: none;
      color: #f9f6f2;
      height: 40px;
      line-height: 42px;
      margin-left: 9px; }
      .game-container .game-message a.keep-playing-button {
        display: none; }
    .game-container .game-message.game-won {
      background: rgba(237, 194, 46, 0.5);
      color: #f9f6f2; }
      .game-container .game-message.game-won a.keep-playing-button {
        display: inline-block; }
    .game-container .game-message.game-won, .game-container .game-message.game-over {
      display: block; }

.grid-container {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 470px;
  height: 470px;
  z-index: 1; }

.grid-row {
  margin-bottom: 15px; }
  .grid-row:last-child {
    margin-bottom: 0; }
  .grid-row:after {
    content: "";
    display: block;
    clear: both; }

.grid-cell {
  width: 106.25px;
  height: 106.25px;
  margin-right: 15px;
  float: left;
  border-radius: 3px;
  background: rgba(238, 228, 218, 0.35); }
  .grid-cell:last-child {
    margin-right: 0; }

.tile-container {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 470px;
  height: 470px;
  z-index: 2; }

.tile, .tile .tile-inner {
  width: 107px;
  height: 107px;
  line-height: 107px; }
.tile.tile-position-1-1 {
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
  -webkit-transform: translate(0px, 121px);
  -moz-transform: translate(0px, 121px);
  -ms-transform: translate(0px, 121px);
  transform: translate(0px, 121px); }
.tile.tile-position-1-3 {
  -webkit-transform: translate(0px, 242px);
  -moz-transform: translate(0px, 242px);
  -ms-transform: translate(0px, 242px);
  transform: translate(0px, 242px); }
.tile.tile-position-1-4 {
  -webkit-transform: translate(0px, 363px);
  -moz-transform: translate(0px, 363px);
  -ms-transform: translate(0px, 363px);
  transform: translate(0px, 363px); }
.tile.tile-position-2-1 {
  -webkit-transform: translate(121px, 0px);
  -moz-transform: translate(121px, 0px);
  -ms-transform: translate(121px, 0px);
  transform: translate(121px, 0px); }
.tile.tile-position-2-2 {
  -webkit-transform: translate(121px, 121px);
  -moz-transform: translate(121px, 121px);
  -ms-transform: translate(121px, 121px);
  transform: translate(121px, 121px); }
.tile.tile-position-2-3 {
  -webkit-transform: translate(121px, 242px);
  -moz-transform: translate(121px, 242px);
  -ms-transform: translate(121px, 242px);
  transform: translate(121px, 242px); }
.tile.tile-position-2-4 {
  -webkit-transform: translate(121px, 363px);
  -moz-transform: translate(121px, 363px);
  -ms-transform: translate(121px, 363px);
  transform: translate(121px, 363px); }
.tile.tile-position-3-1 {
  -webkit-transform: translate(242px, 0px);
  -moz-transform: translate(242px, 0px);
  -ms-transform: translate(242px, 0px);
  transform: translate(242px, 0px); }
.tile.tile-position-3-2 {
  -webkit-transform: translate(242px, 121px);
  -moz-transform: translate(242px, 121px);
  -ms-transform: translate(242px, 121px);
  transform: translate(242px, 121px); }
.tile.tile-position-3-3 {
  -webkit-transform: translate(242px, 242px);
  -moz-transform: translate(242px, 242px);
  -ms-transform: translate(242px, 242px);
  transform: translate(242px, 242px); }
.tile.tile-position-3-4 {
  -webkit-transform: translate(242px, 363px);
  -moz-transform: translate(242px, 363px);
  -ms-transform: translate(242px, 363px);
  transform: translate(242px, 363px); }
.tile.tile-position-4-1 {
  -webkit-transform: translate(363px, 0px);
  -moz-transform: translate(363px, 0px);
  -ms-transform: translate(363px, 0px);
  transform: translate(363px, 0px); }
.tile.tile-position-4-2 {
  -webkit-transform: translate(363px, 121px);
  -moz-transform: translate(363px, 121px);
  -ms-transform: translate(363px, 121px);
  transform: translate(363px, 121px); }
.tile.tile-position-4-3 {
  -webkit-transform: translate(363px, 242px);
  -moz-transform: translate(363px, 242px);
  -ms-transform: translate(363px, 242px);
  transform: translate(363px, 242px); }
.tile.tile-position-4-4 {
  -webkit-transform: translate(363px, 363px);
  -moz-transform: translate(363px, 363px);
  -ms-transform: translate(363px, 363px);
  transform: translate(363px, 363px); }

.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: 3px;
    background: #eee4da;
    text-align: center;
    font-weight: bold;
    z-index: 10;
    font-size: 55px; }
  .tile.tile-2 .tile-inner {
    background: #eee4da;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
  .tile.tile-4 .tile-inner {
    background: #ede0c8;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
  .tile.tile-8 .tile-inner {
    color: #f9f6f2;
    background: #f2b179; }
  .tile.tile-16 .tile-inner {
    color: #f9f6f2;
    background: #f59563; }
  .tile.tile-32 .tile-inner {
    color: #f9f6f2;
    background: #f67c5f; }
  .tile.tile-64 .tile-inner {
    color: #f9f6f2;
    background: #f65e3b; }
  .tile.tile-128 .tile-inner {
    color: #f9f6f2;
    background: #edcf72;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
    font-size: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-128 .tile-inner {
        font-size: 25px; } }
  .tile.tile-256 .tile-inner {
    color: #f9f6f2;
    background: #edcc61;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
    font-size: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-256 .tile-inner {
        font-size: 25px; } }
  .tile.tile-512 .tile-inner {
    color: #f9f6f2;
    background: #edc850;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
    font-size: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-512 .tile-inner {
        font-size: 25px; } }
  .tile.tile-1024 .tile-inner {
    color: #f9f6f2;
    background: #edc53f;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
    font-size: 35px; }
    @media screen and (max-width: 520px) {
      .tile.tile-1024 .tile-inner {
        font-size: 15px; } }
  .tile.tile-2048 .tile-inner {
    color: #f9f6f2;
    background: #edc22e;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
    font-size: 35px; }
    @media screen and (max-width: 520px) {
      .tile.tile-2048 .tile-inner {
        font-size: 15px; } }
  .tile.tile-super .tile-inner {
    color: #f9f6f2;
    background: #3c3a32;
    font-size: 30px; }
    @media screen and (max-width: 520px) {
      .tile.tile-super .tile-inner {
        font-size: 10px; } }

@-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, flip-3d 300ms ease 100ms;
  -moz-animation: pop 200ms ease 100ms, flip-3d 300ms ease 100ms;
  animation: pop 200ms ease 100ms, flip-3d 300ms ease 100ms;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards; }

@-webkit-keyframes flip-3d {
  0% { -webkit-transform: perspective(400px) rotateY(0deg); }
  50% { -webkit-transform: perspective(400px) rotateY(180deg) scale(1.1); }
  100% { -webkit-transform: perspective(400px) rotateY(360deg); }
}
@-moz-keyframes flip-3d {
  0% { -moz-transform: perspective(400px) rotateY(0deg); }
  50% { -moz-transform: perspective(400px) rotateY(180deg) scale(1.1); }
  100% { -moz-transform: perspective(400px) rotateY(360deg); }
}
@keyframes flip-3d {
  0% { transform: perspective(400px) rotateY(0deg); }
  50% { transform: perspective(400px) rotateY(180deg) scale(1.1); }
  100% { transform: perspective(400px) rotateY(360deg); }
}

.above-game:after {
  content: "";
  display: block;
  clear: both; }

.game-intro {
  float: left;
  line-height: 42px;
  margin-bottom: 0; }

.restart-button {
  display: inline-block;
  background: #8f7a66;
  border-radius: 3px;
  padding: 0 20px;
  text-decoration: none;
  color: #f9f6f2;
  height: 40px;
  line-height: 42px;
  display: block;
  text-align: center;
  float: right; }

.game-explanation {
  margin-top: 50px; }

@media screen and (max-width: 520px) {
  html, body {
    font-size: 15px; }

  body {
    margin: 20px 0;
    padding: 0 20px; }

  h1.title {
    font-size: 27px;
    margin-top: 15px; }

  .container {
    width: 280px;
    margin: 0 auto; }

  .score-container, .best-container {
    margin-top: 0;
    padding: 15px 10px;
    min-width: 40px; }

  .heading {
    margin-bottom: 10px; }

  .game-intro {
    width: 55%;
    display: block;
    box-sizing: border-box;
    line-height: 1.65; }

  .restart-button {
    width: 42%;
    padding: 0;
    display: block;
    box-sizing: border-box;
    margin-top: 2px; }

  .game-container {
    margin-top: 17px;
    position: relative;
    padding: 10px;
    cursor: default;
    -webkit-touch-callout: none;
    -ms-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    background: #bbada0;
    border-radius: 6px;
    width: 280px;
    height: 280px;
    -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;
      background: rgba(238, 228, 218, 0.5);
      z-index: 100;
      text-align: center;
      -webkit-animation: fade-in 800ms ease 1200ms;
      -moz-animation: fade-in 800ms ease 1200ms;
      animation: fade-in 800ms ease 1200ms;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      animation-fill-mode: both; }
      .game-container .game-message p {
        font-size: 60px;
        font-weight: bold;
        height: 60px;
        line-height: 60px;
        margin-top: 222px; }
      .game-container .game-message .lower {
        display: block;
        margin-top: 59px; }
      .game-container .game-message a {
        display: inline-block;
        background: #8f7a66;
        border-radius: 3px;
        padding: 0 20px;
        text-decoration: none;
        color: #f9f6f2;
        height: 40px;
        line-height: 42px;
        margin-left: 9px; }
        .game-container .game-message a.keep-playing-button {
          display: none; }
      .game-container .game-message.game-won {
        background: rgba(237, 194, 46, 0.5);
        color: #f9f6f2; }
        .game-container .game-message.game-won a.keep-playing-button {
          display: inline-block; }
      .game-container .game-message.game-won, .game-container .game-message.game-over {
        display: block; }

  .grid-container {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 260px;
    height: 260px;
    z-index: 1; }

  .grid-row {
    margin-bottom: 10px; }
    .grid-row:last-child {
      margin-bottom: 0; }
    .grid-row:after {
      content: "";
      display: block;
      clear: both; }

  .grid-cell {
    width: 57.5px;
    height: 57.5px;
    margin-right: 10px;
    float: left;
    border-radius: 3px;
    background: rgba(238, 228, 218, 0.35); }
    .grid-cell:last-child {
      margin-right: 0; }

  .tile-container {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 260px;
    height: 260px;
    z-index: 2; }

  .tile, .tile .tile-inner {
    width: 58px;
    height: 58px;
    line-height: 58px; }
  .tile.tile-position-1-1 {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px); }
  .tile.tile-position-1-2 {
    -webkit-transform: translate(0px, 67px);
    -moz-transform: translate(0px, 67px);
    -ms-transform: translate(0px, 67px);
    transform: translate(0px, 67px); }
  .tile.tile-position-1-3 {
    -webkit-transform: translate(0px, 135px);
    -moz-transform: translate(0px, 135px);
    -ms-transform: translate(0px, 135px);
    transform: translate(0px, 135px); }
  .tile.tile-position-1-4 {
    -webkit-transform: translate(0px, 202px);
    -moz-transform: translate(0px, 202px);
    -ms-transform: translate(0px, 202px);
    transform: translate(0px, 202px); }
  .tile.tile-position-2-1 {
    -webkit-transform: translate(67px, 0px);
    -moz-transform: translate(67px, 0px);
    -ms-transform: translate(67px, 0px);
    transform: translate(67px, 0px); }
  .tile.tile-position-2-2 {
    -webkit-transform: translate(67px, 67px);
    -moz-transform: translate(67px, 67px);
    -ms-transform: translate(67px, 67px);
    transform: translate(67px, 67px); }
  .tile.tile-position-2-3 {
    -webkit-transform: translate(67px, 135px);
    -moz-transform: translate(67px, 135px);
    -ms-transform: translate(67px, 135px);
    transform: translate(67px, 135px); }
  .tile.tile-position-2-4 {
    -webkit-transform: translate(67px, 202px);
    -moz-transform: translate(67px, 202px);
    -ms-transform: translate(67px, 202px);
    transform: translate(67px, 202px); }
  .tile.tile-position-3-1 {
    -webkit-transform: translate(135px, 0px);
    -moz-transform: translate(135px, 0px);
    -ms-transform: translate(135px, 0px);
    transform: translate(135px, 0px); }
  .tile.tile-position-3-2 {
    -webkit-transform: translate(135px, 67px);
    -moz-transform: translate(135px, 67px);
    -ms-transform: translate(135px, 67px);
    transform: translate(135px, 67px); }
  .tile.tile-position-3-3 {
    -webkit-transform: translate(135px, 135px);
    -moz-transform: translate(135px, 135px);
    -ms-transform: translate(135px, 135px);
    transform: translate(135px, 135px); }
  .tile.tile-position-3-4 {
    -webkit-transform: translate(135px, 202px);
    -moz-transform: translate(135px, 202px);
    -ms-transform: translate(135px, 202px);
    transform: translate(135px, 202px); }
  .tile.tile-position-4-1 {
    -webkit-transform: translate(202px, 0px);
    -moz-transform: translate(202px, 0px);
    -ms-transform: translate(202px, 0px);
    transform: translate(202px, 0px); }
  .tile.tile-position-4-2 {
    -webkit-transform: translate(202px, 67px);
    -moz-transform: translate(202px, 67px);
    -ms-transform: translate(202px, 67px);
    transform: translate(202px, 67px); }
  .tile.tile-position-4-3 {
    -webkit-transform: translate(202px, 135px);
    -moz-transform: translate(202px, 135px);
    -ms-transform: translate(202px, 135px);
    transform: translate(202px, 135px); }
  .tile.tile-position-4-4 {
    -webkit-transform: translate(202px, 202px);
    -moz-transform: translate(202px, 202px);
    -ms-transform: translate(202px, 202px);
    transform: translate(202px, 202px); }

  .tile .tile-inner {
    font-size: 35px; }

  .game-message p {
    font-size: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    margin-top: 90px !important; }
  .game-message .lower {
    margin-top: 30px !important; } }

/* ============================================
   GAME CONTROLS & SETTINGS
   ============================================ */

.game-actions {
  float: right;
  display: flex;
  gap: 8px;
}

.undo-button {
  display: inline-block;
  background: #6b5b4f;
  border-radius: 3px;
  padding: 0 16px;
  text-decoration: none;
  color: #f9f6f2;
  height: 40px;
  line-height: 42px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.undo-button:hover {
  background: #8f7a66;
}

.ai-toggle {
  display: inline-block;
  background: #5a4a3a;
  border-radius: 3px;
  padding: 0 16px;
  text-decoration: none;
  color: #f9f6f2;
  height: 40px;
  line-height: 42px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.ai-toggle:hover {
  background: #7a6a5a;
}
.ai-toggle.ai-active {
  background: #e74c3c;
  animation: ai-pulse 1.5s ease-in-out infinite;
}
.ai-toggle.ai-active:hover {
  background: #c0392b;
}

@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
}

.undo-button.undo-disabled {
  background: #4a4a5a;
  color: rgba(249, 246, 242, 0.4);
  cursor: not-allowed;
  pointer-events: none;
}

.settings-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.theme-toggle,
.emoji-toggle,
.music-toggle,
.sound-toggle,
.share-button,
.achievements-toggle,
.stats-toggle,
.leaderboard-toggle,
.export-toggle,
.import-toggle,
.reset-toggle {
  display: inline-block;
  background: #3d3d5c;
  border-radius: 20px;
  padding: 6px 16px;
  text-decoration: none;
  color: #e0d8d0;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.theme-toggle:hover,
.emoji-toggle:hover,
.music-toggle:hover,
.sound-toggle:hover,
.share-button:hover,
.achievements-toggle:hover,
.stats-toggle:hover,
.leaderboard-toggle:hover,
.export-toggle:hover,
.import-toggle:hover {
  background: #4d4d6c;
  transform: translateY(-1px);
}
.theme-toggle:active,
.emoji-toggle:active,
.music-toggle:active,
.sound-toggle:active,
.share-button:active,
.achievements-toggle:active,
.stats-toggle:active,
.leaderboard-toggle:active,
.export-toggle:active,
.import-toggle:active,
.reset-toggle:active {
  transform: translateY(0);
}

.shortcuts-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 12px;
  letter-spacing: 0.5px;
}
.shortcuts-hint span {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 2px;
}

@media screen and (max-width: 520px) {
  .shortcuts-hint {
    font-size: 10px;
    margin-top: 8px;
  }
  .shortcuts-hint span {
    font-size: 10px;
    padding: 1px 4px;
  }
  .game-actions {
    float: none;
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
  }
  .undo-button {
    flex: 1;
    padding: 0;
    font-size: 14px;
  }
  .restart-button {
    flex: 1;
    margin-top: 0 !important;
  }
  .settings-bar {
    gap: 8px;
    justify-content: stretch;
  }
  .theme-toggle,
  .emoji-toggle,
  .music-toggle,
  .sound-toggle,
  .share-button,
  .achievements-toggle,
  .stats-toggle,
  .leaderboard-toggle,
  .export-toggle,
  .import-toggle,
  .reset-toggle {
    box-sizing: border-box;
    flex: 1 1 calc(50% - 8px);
    font-size: 12px;
    line-height: 1.2;
    min-width: 112px;
    padding: 5px 12px;
    text-align: center;
  }
}

/* No-effects mode: keep gameplay stable and remove visual/audio affordances. */
*, *::before, *::after {
  -webkit-animation: none !important;
  -moz-animation: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  transition: none !important;
}

.splash-particles,
.splash-flash,
.splash-progress-shine,
.milestone-popup,
.merge-particle,
.new-record-popup,
.daily-best-popup,
.combo-popup,
.guide-arrow,
.edge-flash,
.achievement-popup,
.konami-popup,
.music-toggle,
.sound-toggle {
  display: none !important;
}

.board-shake {
  transform: none !important;
}

/* ============================================
   HANAZAR PRODUCTS — SPLASH SCREEN
   Epic loading animation with realistic progress
   ============================================ */

#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#splash-screen.splash-fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Animated background particles/grid */
#splash-screen::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(100, 200, 255, 0.05) 0%, transparent 50%);
  animation: splash-bg-drift 8s ease-in-out infinite;
}

@keyframes splash-bg-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-2%, 2%) rotate(1deg); }
  66% { transform: translate(2%, -1%) rotate(-1deg); }
}

/* Scanline overlay */
#splash-screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  opacity: 0.3;
}

.splash-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px;
  animation: splash-content-zoom 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes splash-content-zoom {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Main Title */
.splash-title {
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 12px 0;
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.3),
    0 0 40px rgba(120, 119, 198, 0.4),
    0 0 80px rgba(120, 119, 198, 0.2);
  animation: splash-title-glow 2s ease-in-out infinite alternate,
             splash-title-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes splash-title-reveal {
  0% {
    opacity: 0;
    transform: translateY(-20px);
    letter-spacing: 12px;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 6px;
  }
}

@keyframes splash-title-glow {
  0% {
    text-shadow:
      0 0 20px rgba(255, 255, 255, 0.3),
      0 0 40px rgba(120, 119, 198, 0.4),
      0 0 80px rgba(120, 119, 198, 0.2);
  }
  100% {
    text-shadow:
      0 0 30px rgba(255, 255, 255, 0.5),
      0 0 60px rgba(120, 119, 198, 0.6),
      0 0 100px rgba(120, 119, 198, 0.3),
      0 0 140px rgba(255, 119, 198, 0.15);
  }
}

/* Subtitle */
.splash-subtitle {
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 50px 0;
  animation: splash-subtitle-fade 0.8s ease 0.4s both;
}

@keyframes splash-subtitle-fade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Progress Wrapper */
.splash-progress-wrapper {
  width: 320px;
  margin: 0 auto;
  animation: splash-progress-wrapper-fade 0.6s ease 0.6s both;
}

@keyframes splash-progress-wrapper-fade {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Progress Bar Container */
.splash-progress-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Progress Fill */
.splash-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg,
    #00d4ff 0%,
    #7b2cbf 40%,
    #ff006e 70%,
    #ffbe0b 100%
  );
  box-shadow:
    0 0 10px rgba(0, 212, 255, 0.5),
    0 0 20px rgba(123, 44, 191, 0.3),
    0 0 40px rgba(255, 0, 110, 0.2);
  transition: width 0.05s linear;
}

/* Progress Shine / Scan Effect */
.splash-progress-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: splash-shine-scan 1.5s ease-in-out infinite;
}

@keyframes splash-shine-scan {
  0% { left: -50%; }
  100% { left: 150%; }
}

/* Progress Info */
.splash-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
}

.splash-progress-text {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
  min-width: 40px;
  text-align: left;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.splash-progress-status {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: right;
  transition: color 0.2s ease;
}

/* Decorative corner brackets */
.splash-content::before,
.splash-content::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: rgba(255, 255, 255, 0.15);
  border-style: solid;
  animation: splash-brackets-pulse 2s ease-in-out infinite;
}

.splash-content::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.splash-content::after {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

@keyframes splash-brackets-pulse {
  0%, 100% { border-color: rgba(255, 255, 255, 0.1); }
  50% { border-color: rgba(255, 255, 255, 0.25); }
}

/* Game reveal animation */
body.game-revealed .container {
  animation: game-fade-in 0.8s ease forwards;
}

@keyframes game-fade-in {
  0% { opacity: 0; transform: translateY(20px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Floating particles */
.splash-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.splash-particles span {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: splash-particle-float linear infinite;
}

.splash-particles span:nth-child(1)  { left: 10%;  top: 100%; animation-duration: 12s; animation-delay: 0s;   width: 3px; height: 3px; }
.splash-particles span:nth-child(2)  { left: 20%;  top: 100%; animation-duration: 18s; animation-delay: 2s;   width: 2px; height: 2px; }
.splash-particles span:nth-child(3)  { left: 30%;  top: 100%; animation-duration: 14s; animation-delay: 4s;   width: 4px; height: 4px; }
.splash-particles span:nth-child(4)  { left: 40%;  top: 100%; animation-duration: 20s; animation-delay: 1s;   width: 2px; height: 2px; }
.splash-particles span:nth-child(5)  { left: 50%;  top: 100%; animation-duration: 16s; animation-delay: 3s;   width: 5px; height: 5px; }
.splash-particles span:nth-child(6)  { left: 60%;  top: 100%; animation-duration: 22s; animation-delay: 5s;   width: 2px; height: 2px; }
.splash-particles span:nth-child(7)  { left: 70%;  top: 100%; animation-duration: 13s; animation-delay: 1.5s; width: 3px; height: 3px; }
.splash-particles span:nth-child(8)  { left: 80%;  top: 100%; animation-duration: 17s; animation-delay: 3.5s; width: 4px; height: 4px; }
.splash-particles span:nth-child(9)  { left: 90%;  top: 100%; animation-duration: 15s; animation-delay: 0.5s; width: 2px; height: 2px; }
.splash-particles span:nth-child(10) { left: 15%;  top: 100%; animation-duration: 19s; animation-delay: 6s;   width: 3px; height: 3px; }
.splash-particles span:nth-child(11) { left: 25%;  top: 100%; animation-duration: 11s; animation-delay: 2.5s; width: 2px; height: 2px; background: rgba(0, 212, 255, 0.5); }
.splash-particles span:nth-child(12) { left: 35%;  top: 100%; animation-duration: 21s; animation-delay: 4.5s; width: 4px; height: 4px; background: rgba(255, 0, 110, 0.4); }
.splash-particles span:nth-child(13) { left: 45%;  top: 100%; animation-duration: 13s; animation-delay: 1s;   width: 2px; height: 2px; }
.splash-particles span:nth-child(14) { left: 55%;  top: 100%; animation-duration: 23s; animation-delay: 5.5s; width: 3px; height: 3px; }
.splash-particles span:nth-child(15) { left: 65%;  top: 100%; animation-duration: 14s; animation-delay: 3s;   width: 5px; height: 5px; background: rgba(255, 190, 11, 0.4); }
.splash-particles span:nth-child(16) { left: 75%;  top: 100%; animation-duration: 18s; animation-delay: 0s;   width: 2px; height: 2px; }
.splash-particles span:nth-child(17) { left: 85%;  top: 100%; animation-duration: 12s; animation-delay: 4s;   width: 3px; height: 3px; }
.splash-particles span:nth-child(18) { left: 5%;   top: 100%; animation-duration: 20s; animation-delay: 2s;   width: 4px; height: 4px; background: rgba(123, 44, 191, 0.5); }
.splash-particles span:nth-child(19) { left: 95%;  top: 100%; animation-duration: 16s; animation-delay: 1s;   width: 2px; height: 2px; }
.splash-particles span:nth-child(20) { left: 50%;  top: 100%; animation-duration: 25s; animation-delay: 7s;   width: 3px; height: 3px; }

@keyframes splash-particle-float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-110vh) scale(0.3);
    opacity: 0;
  }
}

/* Flash burst on completion */
.splash-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(0,212,255,0.4) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: none;
}

.splash-flash.splash-flash-active {
  animation: splash-flash-burst 0.4s ease-out forwards;
}

@keyframes splash-flash-burst {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    width: 300vw;
    height: 300vw;
    opacity: 0;
  }
}

/* Hanazar badge next to title */
.hanazar-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8f7a66;
  background: rgba(143, 122, 102, 0.12);
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 14px;
  vertical-align: middle;
  position: relative;
  top: -4px;
  animation: hanazar-badge-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 3s both;
}

@keyframes hanazar-badge-pop {
  0% { opacity: 0; transform: scale(0.5) translateX(-10px); }
  100% { opacity: 1; transform: scale(1) translateX(0); }
}

/* Moves container */
.moves-container {
  position: relative;
  display: inline-block;
  background: #8f7a66;
  padding: 15px 25px;
  font-size: 25px;
  height: 25px;
  line-height: 47px;
  font-weight: bold;
  border-radius: 3px;
  color: white;
  margin-top: 8px;
  margin-left: 8px;
  text-align: center;
  min-width: 40px;
}
.moves-container:after {
  position: absolute;
  width: 100%;
  top: 10px;
  left: 0;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 13px;
  text-align: center;
  color: #eee4da;
  content: "Moves";
}

/* Efficiency container */
.efficiency-container {
  position: relative;
  display: inline-block;
  background: #8f7a66;
  padding: 15px 25px;
  font-size: 25px;
  height: 25px;
  line-height: 47px;
  font-weight: bold;
  border-radius: 3px;
  color: white;
  margin-top: 8px;
  margin-left: 8px;
  text-align: center;
  min-width: 40px;
}
.efficiency-container:after {
  position: absolute;
  width: 100%;
  top: 10px;
  left: 0;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 13px;
  text-align: center;
  color: #eee4da;
  content: "Eff";
}

/* Timer container */
.timer-container {
  position: relative;
  display: inline-block;
  background: #8f7a66;
  padding: 15px 25px;
  font-size: 22px;
  height: 25px;
  line-height: 47px;
  font-weight: bold;
  border-radius: 3px;
  color: white;
  margin-top: 8px;
  margin-left: 8px;
  text-align: center;
  min-width: 60px;
  letter-spacing: 1px;
}
.timer-container:after {
  position: absolute;
  width: 100%;
  top: 10px;
  left: 0;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 13px;
  text-align: center;
  color: #eee4da;
  content: "Time";
}

/* Best moves container */
.best-moves-container {
  position: relative;
  display: inline-block;
  background: #8f7a66;
  padding: 15px 25px;
  font-size: 25px;
  height: 25px;
  line-height: 47px;
  font-weight: bold;
  border-radius: 3px;
  color: white;
  margin-top: 8px;
  margin-left: 8px;
  text-align: center;
  min-width: 40px;
}
.best-moves-container:after {
  position: absolute;
  width: 100%;
  top: 10px;
  left: 0;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 13px;
  text-align: center;
  color: #eee4da;
  content: "Best Mv";
}

/* Milestone popup celebration */
.milestone-popup {
  position: absolute;
  z-index: 60;
  pointer-events: none;
  transform: translate(-50%, 0);
  font-size: 18px;
  font-weight: 900;
  color: #ffbe0b;
  text-shadow: 0 0 10px rgba(255, 190, 11, 0.8), 0 0 30px rgba(255, 0, 110, 0.5);
  animation: milestone-float 1.2s ease-out forwards;
  white-space: nowrap;
}

@keyframes milestone-float {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.2);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -40px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -70px) scale(0.8);
  }
}

/* Merge particle explosion */
.merge-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  animation: merge-particle-burst 0.6s ease-out forwards;
}

@keyframes merge-particle-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2);
  }
}

/* Dark theme overrides (applied to body via class or default) */
body.dark-theme {
  background: #1a1a2e;
  color: #e0d8d0;
}

body.dark-theme a {
  color: #e0d8d0;
}

body.light-theme a {
  color: #776e65;
}

body.light-theme .release-current,
body.light-theme .release-history {
  background: rgba(143, 122, 102, 0.08);
  border-color: rgba(143, 122, 102, 0.18);
}

body.light-theme .release-current strong,
body.light-theme .release-history strong {
  color: #776e65;
}

body.light-theme .release-current span:last-child,
body.light-theme .release-history p {
  color: rgba(119, 110, 101, 0.75);
}

body.dark-theme .game-container {
  background: #2d2d44;
}

body.dark-theme .grid-cell {
  background: rgba(255, 255, 255, 0.06);
}

body.dark-theme .score-container,
body.dark-theme .best-container,
body.dark-theme .moves-container,
body.dark-theme .efficiency-container,
body.dark-theme .timer-container,
body.dark-theme .best-moves-container {
  background: #3d3d5c;
}

body.dark-theme .score-container:after,
body.dark-theme .best-container:after,
body.dark-theme .moves-container:after,
body.dark-theme .efficiency-container:after,
body.dark-theme .timer-container:after,
body.dark-theme .best-moves-container:after {
  color: rgba(255, 255, 255, 0.5);
}

body.dark-theme .restart-button {
  background: #3d3d5c;
}

body.dark-theme .game-message {
  background: rgba(26, 26, 46, 0.7);
}

body.dark-theme .game-message.game-won {
  background: rgba(237, 194, 46, 0.5);
}

body.dark-theme hr {
  border-bottom-color: #3d3d5c;
}

/* Tile glow enhancements for dark theme */
body.dark-theme .tile.tile-128 .tile-inner {
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

body.dark-theme .tile.tile-256 .tile-inner {
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

body.dark-theme .tile.tile-512 .tile-inner {
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

body.dark-theme .tile.tile-1024 .tile-inner {
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

body.dark-theme .tile.tile-2048 .tile-inner {
  box-shadow: 0 0 40px 15px rgba(243, 215, 116, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* Rainbow shimmer for ultimate tiles */
.tile.tile-2048 .tile-inner {
  animation: rainbow-shimmer 3s linear infinite;
}

.tile.tile-super .tile-inner {
  animation: rainbow-shimmer 2s linear infinite;
}

@keyframes rainbow-shimmer {
  0% {
    filter: hue-rotate(0deg);
    box-shadow: 0 0 30px 10px rgba(255, 0, 110, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  }
  25% {
    box-shadow: 0 0 30px 10px rgba(0, 212, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 30px 10px rgba(123, 44, 191, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  }
  75% {
    box-shadow: 0 0 30px 10px rgba(255, 190, 11, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  }
  100% {
    filter: hue-rotate(360deg);
    box-shadow: 0 0 30px 10px rgba(255, 0, 110, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  }
}

/* Subtle animated background grid */
body.dark-theme::before,
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: bg-grid-drift 20s linear infinite;
  pointer-events: none;
}

@keyframes bg-grid-drift {
  0% { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* Konami code popup */
.konami-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10003;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
  border: 2px solid #ffbe0b;
  border-radius: 16px;
  padding: 24px 36px;
  text-align: center;
  box-shadow: 0 0 60px rgba(255, 190, 11, 0.3);
  animation: konami-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.konami-popup div:first-child {
  font-size: 22px;
  font-weight: 900;
  color: #ffbe0b;
  margin-bottom: 4px;
}
.konami-popup div:last-child {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

@keyframes konami-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Game over quote */
.game-over-quote {
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 12px;
  padding: 0 20px;
  line-height: 1.5;
  animation: quote-fade-in 1s ease forwards;
}

@keyframes quote-fade-in {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* First-time guide modal */
.guide-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10002;
  background: rgba(0, 0, 0, 0.75);
  align-items: center;
  justify-content: center;
}
.guide-modal.guide-visible {
  display: flex;
  animation: guide-fade-in 0.4s ease forwards;
}

@keyframes guide-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.guide-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 36px 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: guide-scale-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes guide-scale-in {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

.guide-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
}

.guide-title {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.guide-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0 0 20px 0;
}

.guide-shortcuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}
.guide-shortcuts span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.guide-shortcuts kbd {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 4px;
}

.guide-close {
  display: inline-block;
  background: #ffbe0b;
  color: #1a1a2e;
  font-size: 16px;
  font-weight: 900;
  padding: 12px 36px;
  border-radius: 30px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}
.guide-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 190, 11, 0.3);
}

/* New record celebration popup */
.new-record-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  pointer-events: none;
  text-align: center;
  animation: new-record-zoom 2s ease-out forwards;
}
.new-record-title {
  font-size: 32px;
  font-weight: 900;
  color: #ffbe0b;
  text-shadow: 0 0 20px rgba(255, 190, 11, 0.6), 0 0 40px rgba(255, 0, 110, 0.3);
  letter-spacing: 2px;
}
.new-record-sub {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

@keyframes new-record-zoom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  40% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

/* Board shake on big merges */
.board-shake {
  animation: board-shake-anim 0.4s ease-in-out;
}

@keyframes board-shake-anim {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-4px, 3px); }
  30% { transform: translate(4px, -2px); }
  45% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 2px); }
  75% { transform: translate(-2px, -1px); }
  100% { transform: translate(0, 0); }
}

/* Score milestone edge flash */
.edge-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(255, 190, 11, 0);
}
.edge-flash.flash-active {
  animation: edge-flash-pulse 0.6s ease-out forwards;
}

@keyframes edge-flash-pulse {
  0% { box-shadow: inset 0 0 0 0 rgba(255, 190, 11, 0); }
  30% { box-shadow: inset 0 0 60px 10px rgba(255, 190, 11, 0.4); }
  100% { box-shadow: inset 0 0 0 0 rgba(255, 190, 11, 0); }
}

/* Achievement unlock popup */
.achievement-popup {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 10000;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
  border: 1px solid rgba(255, 190, 11, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 190, 11, 0.1);
  animation: achievement-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  max-width: 320px;
}

@keyframes achievement-slide-in {
  0% { opacity: 0; transform: translateX(100px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

.achievement-icon {
  font-size: 36px;
  line-height: 1;
}

.achievement-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.achievement-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #ffbe0b;
}

.achievement-name {
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
}

.achievement-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Game stats panel */
.game-stats {
  display: none;
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.game-stats.stats-visible {
  display: block;
  animation: stats-fade-in 0.5s ease forwards;
}

@keyframes stats-fade-in {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.stats-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffbe0b;
  margin-bottom: 12px;
  text-align: center;
  letter-spacing: 1px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-item {
  text-align: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.stat-val {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Achievements panel */
.achievements-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  width: 380px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.achievements-panel.panel-open {
  display: block;
  animation: panel-scale-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes panel-scale-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.achievements-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.achievements-title {
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
}

.achievements-close {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.achievements-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.15s ease;
}
.achievement-item.unlocked {
  background: rgba(255, 190, 11, 0.08);
  border: 1px solid rgba(255, 190, 11, 0.15);
}
.achievement-item:not(.unlocked) {
  opacity: 0.4;
}

.achievement-item-icon {
  font-size: 28px;
  width: 40px;
  text-align: center;
}

.achievement-item-info {
  flex: 1;
}

.achievement-item-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.achievement-item-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.achievement-item-status {
  font-size: 16px;
  color: #ffbe0b;
}

/* Achievements toggle button in settings bar */
.achievements-toggle {
  display: inline-block;
  background: #3d3d5c;
  border-radius: 20px;
  padding: 6px 16px;
  text-decoration: none;
  color: #e0d8d0;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.achievements-toggle:hover {
  background: #4d4d6c;
  transform: translateY(-1px);
}

.stats-toggle, .leaderboard-toggle {
  display: inline-block;
  background: #3d3d5c;
  border-radius: 20px;
  padding: 6px 16px;
  text-decoration: none;
  color: #e0d8d0;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.stats-toggle:hover, .leaderboard-toggle:hover {
  background: #4d4d6c;
  transform: translateY(-1px);
}

.emoji-toggle {
  display: inline-block;
  background: #3d3d5c;
  border-radius: 20px;
  padding: 6px 16px;
  text-decoration: none;
  color: #e0d8d0;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.emoji-toggle:hover {
  background: #4d4d6c;
  transform: translateY(-1px);
}
.emoji-toggle.emoji-active {
  background: #ff006e;
}

.music-toggle {
  display: inline-block;
  background: #3d3d5c;
  border-radius: 20px;
  padding: 6px 16px;
  text-decoration: none;
  color: #e0d8d0;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.music-toggle:hover {
  background: #4d4d6c;
  transform: translateY(-1px);
}
.music-toggle.music-active {
  background: #7b2cbf;
  animation: music-pulse 2s ease-in-out infinite;
}

/* Grid size selector */
.grid-size-selector {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 3px;
  gap: 3px;
}
.grid-size-btn {
  display: inline-block;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  text-decoration: none;
}
.grid-size-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
}
.grid-size-btn.active {
  background: #8f7a66;
  color: #f9f6f2;
}
@keyframes music-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123, 44, 191, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(123, 44, 191, 0); }
}

.reset-toggle {
  display: inline-block;
  background: #3d3d5c;
  border-radius: 20px;
  padding: 6px 16px;
  text-decoration: none;
  color: #e0d8d0;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.reset-toggle:hover {
  background: #e74c3c;
  transform: translateY(-1px);
}

.version-tag {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.15);
  margin-top: 16px;
  letter-spacing: 0.5px;
}

/* Daily challenge bar */
.daily-challenge-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 190, 11, 0.06);
  border: 1px solid rgba(255, 190, 11, 0.12);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 12px;
}
.daily-label {
  font-size: 13px;
  font-weight: 700;
  color: #ffbe0b;
  letter-spacing: 0.5px;
}
.daily-score {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

/* Release announcement */
.release-notes {
  margin: 12px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.release-current,
.release-history {
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
}

.release-current {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.release-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #00d4ff;
}

.release-current strong,
.release-history strong {
  color: #ffffff;
  font-size: 14px;
}

.release-current span:last-child,
.release-history p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.release-history summary {
  color: #ffbe0b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.release-history p {
  margin-top: 8px;
}

/* Export / Import buttons */
.export-toggle, .import-toggle {
  display: inline-block;
  background: #3d3d5c;
  border-radius: 20px;
  padding: 6px 16px;
  text-decoration: none;
  color: #e0d8d0;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.export-toggle:hover, .import-toggle:hover {
  background: #4d4d6c;
  transform: translateY(-1px);
}

/* Combo popup */
.combo-popup {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 60;
  pointer-events: none;
  animation: combo-slide 1.5s ease-out forwards;
}
.combo-title {
  font-size: 20px;
  font-weight: 900;
  color: #ff006e;
  text-shadow: 0 0 15px rgba(255, 0, 110, 0.5);
  letter-spacing: 1px;
}

@keyframes combo-slide {
  0% { opacity: 0; transform: translateX(20px) scale(0.8); }
  20% { opacity: 1; transform: translateX(0) scale(1.1); }
  40% { transform: translateX(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-10px); }
}

/* Guide arrows for empty board */
.guide-arrow {
  position: absolute;
  z-index: 5;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 0.25;
  animation: arrow-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}
.guide-arrow.arrow-up {
  border-width: 0 10px 14px 10px;
  border-color: transparent transparent #ffffff transparent;
}
.guide-arrow.arrow-down {
  border-width: 14px 10px 0 10px;
  border-color: #ffffff transparent transparent transparent;
}
.guide-arrow.arrow-left {
  border-width: 10px 14px 10px 0;
  border-color: transparent #ffffff transparent transparent;
}
.guide-arrow.arrow-right {
  border-width: 10px 0 10px 14px;
  border-color: transparent transparent transparent #ffffff;
}

@keyframes arrow-pulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.2); }
}

/* Daily best popup */
.daily-best-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  pointer-events: none;
  text-align: center;
  animation: new-record-zoom 2s ease-out forwards;
}
.daily-best-title {
  font-size: 28px;
  font-weight: 900;
  color: #00d4ff;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  letter-spacing: 1px;
}
.daily-best-sub {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Stats panel & Leaderboard panel reuse achievements-panel styles */
.stats-panel, .leaderboard-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.stats-panel.panel-open, .leaderboard-panel.panel-open {
  display: block;
  animation: panel-scale-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.panel-title {
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
}
.panel-close {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.panel-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}
.panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.stats-row span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.stats-row strong {
  font-size: 15px;
  color: #ffbe0b;
}

.leaderboard-header, .leaderboard-row {
  display: grid;
  grid-template-columns: 30px 1fr 60px 60px 80px;
  gap: 8px;
  padding: 8px 10px;
  align-items: center;
  font-size: 13px;
}
.leaderboard-header {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}
.leaderboard-row {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
}
.leaderboard-row.first-place {
  background: rgba(255, 190, 11, 0.08);
  border: 1px solid rgba(255, 190, 11, 0.15);
  color: #ffbe0b;
}
.leaderboard-row span {
  text-align: center;
}
.leaderboard-row span:first-child {
  text-align: left;
}

/* Overlay for achievements panel */
.achievements-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
}
.achievements-overlay.overlay-open {
  display: block;
}

@media screen and (max-width: 520px) {
  .achievement-popup {
    right: 10px;
    left: 10px;
    bottom: 10px;
    max-width: none;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .achievements-panel {
    width: 90vw;
    padding: 16px;
  }
  .stats-panel, .leaderboard-panel {
    box-sizing: border-box;
    width: 92vw;
    padding: 16px;
  }
  .panel-title {
    font-size: 16px;
  }
  .leaderboard-header, .leaderboard-row {
    grid-template-columns: 28px minmax(54px, 1fr) 44px 48px 62px;
    gap: 4px;
    padding: 8px 6px;
    font-size: 11px;
  }
  .leaderboard-row span,
  .leaderboard-header span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Mobile responsive splash */
@media screen and (max-width: 520px) {
  .splash-title {
    font-size: 28px;
    letter-spacing: 3px;
  }
  .splash-subtitle {
    font-size: 14px;
    letter-spacing: 4px;
  }
  .splash-progress-wrapper {
    width: 240px;
  }
  .hanazar-badge {
    font-size: 9px;
    padding: 2px 6px;
    margin-left: 6px;
    top: -2px;
  }

  .moves-container,
  .timer-container,
  .best-moves-container,
  .efficiency-container {
    margin-top: 0;
    padding: 15px 10px;
    min-width: 30px;
    font-size: 18px;
    line-height: 40px;
    height: 20px;
  }
  .moves-container:after,
  .timer-container:after,
  .best-moves-container:after,
  .efficiency-container:after {
    font-size: 11px;
    line-height: 11px;
    top: 8px;
  }
}