@charset "UTF-8";
.game-2048-container {
  color: #ffffff;
  font-size: 18px;
  padding: 60px 6% 60px 6% !important;
  background: #232323;
  border-radius: 12px;
}

.game-2048-container .heading:after {
  content: "";
  display: block;
  clear: both;
}

.game-2048-container h1.title {
  font-size: 80px;
  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;
  }
}

.game-2048-container .scores-container {
  float: right;
  text-align: right;
}

.game-2048-container .score-container,
.game-2048-container .best-container {
  position: relative;
  display: inline-block;
  background: #444444;
  padding: 15px 25px;
  font-size: 25px;
  height: 60px;
  line-height: 47px;
  border-radius: 3px;
  color: white;
  margin-top: 8px;
  text-align: center;
}

/* Score / Best labels — moved from a CSS ::after `content` rule into
   real HTML <span class="score-label"> elements so they're translatable
   via WordPress __() and tools like TranslatePress. The styles below
   replicate the previous absolute-positioned label rendering. */

.game-2048-container .score-container .score-addition,
.game-2048-container .best-container .score-addition {
  position: absolute;
  right: 30px;
  color: #ec2d4599;
  font-size: 25px;
  line-height: 50px;
  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;
}

.game-2048-container .score-container .score-label,
.game-2048-container .best-container .score-label {
  position: absolute;
  width: 100%;
  top: 10px;
  left: 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 13px;
  line-height: 13px;
  color: #eee4da;
}

.game-2048-container p {
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.65;
}

.game-2048-container a {
  color: #776e65;
  text-decoration: underline;
  cursor: pointer;
}

.game-2048-container strong.important {
  text-transform: uppercase;
}

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

.game-2048-container .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-2048-container .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: #444444;
  border-radius: 6px;
  width: 500px;
  height: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.game-2048-container .game-container .game-message {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #ec2d4599;
  border-radius: 6px;
  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-2048-container .game-container .game-message p {
  font-size: 60px;
  height: 60px;
  line-height: 60px;
  margin-top: 222px;
}

.game-2048-container .game-container .game-message .lower {
  display: block;
  margin-top: 59px;
}

.game-2048-container .game-container .game-message a {
  display: inline-block;
  background: #444444;
  border-radius: 3px;
  padding: 0 20px;
  text-decoration: none;
  color: #ffffff;
  height: 40px;
  line-height: 42px;
  margin-left: 9px;
  /* v1.14.49: single-tap discipline for the in-overlay restart/keep
     buttons. The parent .game-container has touch-action: none for
     swipe-only gameplay; setting manipulation on the button itself
     restores fast taps without the double-tap-zoom delay. */
  touch-action: manipulation;
}

.game-2048-container .game-container .game-message a.keep-playing-button {
  display: none;
}

.game-2048-container .game-container .game-message.game-won {
  background: rgba(237, 194, 46, 0.5);
  color: #ffffff;
}

.game-2048-container .game-container .game-message.game-won a.keep-playing-button {
  display: inline-block;
}

.game-2048-container .game-container .game-message.game-won,
.game-2048-container .game-container .game-message.game-over {
  display: block;
}

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

.game-2048-container .grid-row {
  margin-bottom: 15px;
}

.game-2048-container .grid-row:last-child {
  margin-bottom: 0;
}

.game-2048-container .grid-row:after {
  content: "";
  display: block;
  clear: both;
}

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

.game-2048-container .grid-cell:last-child {
  margin-right: 0;
}

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

.game-2048-container .tile,
.game-2048-container .tile .tile-inner {
  width: 107px;
  height: 107px;
  line-height: 107px;
}

.game-2048-container .tile.tile-position-1-1 {
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.game-2048-container .tile.tile-position-1-2 {
  -webkit-transform: translate(0px, 121px);
  -moz-transform: translate(0px, 121px);
  -ms-transform: translate(0px, 121px);
  transform: translate(0px, 121px);
}

.game-2048-container .tile.tile-position-1-3 {
  -webkit-transform: translate(0px, 242px);
  -moz-transform: translate(0px, 242px);
  -ms-transform: translate(0px, 242px);
  transform: translate(0px, 242px);
}

.game-2048-container .tile.tile-position-1-4 {
  -webkit-transform: translate(0px, 363px);
  -moz-transform: translate(0px, 363px);
  -ms-transform: translate(0px, 363px);
  transform: translate(0px, 363px);
}

.game-2048-container .tile.tile-position-2-1 {
  -webkit-transform: translate(121px, 0px);
  -moz-transform: translate(121px, 0px);
  -ms-transform: translate(121px, 0px);
  transform: translate(121px, 0px);
}

.game-2048-container .tile.tile-position-2-2 {
  -webkit-transform: translate(121px, 121px);
  -moz-transform: translate(121px, 121px);
  -ms-transform: translate(121px, 121px);
  transform: translate(121px, 121px);
}

.game-2048-container .tile.tile-position-2-3 {
  -webkit-transform: translate(121px, 242px);
  -moz-transform: translate(121px, 242px);
  -ms-transform: translate(121px, 242px);
  transform: translate(121px, 242px);
}

.game-2048-container .tile.tile-position-2-4 {
  -webkit-transform: translate(121px, 363px);
  -moz-transform: translate(121px, 363px);
  -ms-transform: translate(121px, 363px);
  transform: translate(121px, 363px);
}

.game-2048-container .tile.tile-position-3-1 {
  -webkit-transform: translate(242px, 0px);
  -moz-transform: translate(242px, 0px);
  -ms-transform: translate(242px, 0px);
  transform: translate(242px, 0px);
}

.game-2048-container .tile.tile-position-3-2 {
  -webkit-transform: translate(242px, 121px);
  -moz-transform: translate(242px, 121px);
  -ms-transform: translate(242px, 121px);
  transform: translate(242px, 121px);
}

.game-2048-container .tile.tile-position-3-3 {
  -webkit-transform: translate(242px, 242px);
  -moz-transform: translate(242px, 242px);
  -ms-transform: translate(242px, 242px);
  transform: translate(242px, 242px);
}

.game-2048-container .tile.tile-position-3-4 {
  -webkit-transform: translate(242px, 363px);
  -moz-transform: translate(242px, 363px);
  -ms-transform: translate(242px, 363px);
  transform: translate(242px, 363px);
}

.game-2048-container .tile.tile-position-4-1 {
  -webkit-transform: translate(363px, 0px);
  -moz-transform: translate(363px, 0px);
  -ms-transform: translate(363px, 0px);
  transform: translate(363px, 0px);
}

.game-2048-container .tile.tile-position-4-2 {
  -webkit-transform: translate(363px, 121px);
  -moz-transform: translate(363px, 121px);
  -ms-transform: translate(363px, 121px);
  transform: translate(363px, 121px);
}

.game-2048-container .tile.tile-position-4-3 {
  -webkit-transform: translate(363px, 242px);
  -moz-transform: translate(363px, 242px);
  -ms-transform: translate(363px, 242px);
  transform: translate(363px, 242px);
}

.game-2048-container .tile.tile-position-4-4 {
  -webkit-transform: translate(363px, 363px);
  -moz-transform: translate(363px, 363px);
  -ms-transform: translate(363px, 363px);
  transform: translate(363px, 363px);
}

.game-2048-container .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;
}

.game-2048-container .tile .tile-inner {
  border-radius: 3px;
  background: #ffffff;
  font-weight: bold;
  text-align: center;
  z-index: 10;
  font-size: 55px;
}

.game-2048-container .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);
}

.game-2048-container .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);
}

.game-2048-container .tile.tile-8 .tile-inner {
  color: #ffffff;
  background: #f2b179;
}

.game-2048-container .tile.tile-16 .tile-inner {
  color: #ffffff;
  background: #f59563;
}

.game-2048-container .tile.tile-32 .tile-inner {
  color: #ffffff;
  background: #f67c5f;
}

.game-2048-container .tile.tile-64 .tile-inner {
  color: #ffffff;
  background: #f65e3b;
}

.game-2048-container .tile.tile-128 .tile-inner {
  color: #ffffff;
  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;
}

.game-2048-container .tile.tile-256 .tile-inner {
  color: #ffffff;
  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;
}

.game-2048-container .tile.tile-512 .tile-inner {
  color: #ffffff;
  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;
}

.game-2048-container .tile.tile-1024 .tile-inner {
  color: #ffffff;
  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;
}

.game-2048-container .tile.tile-2048 .tile-inner {
  color: #ffffff;
  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;
}

.game-2048-container .tile.tile-super .tile-inner {
  color: #ffffff;
  background: #3c3a32;
  font-size: 30px;
}

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

.game-2048-container .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);
  }
}

.game-2048-container .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;
}

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

.game-2048-container .game-intro {
  float: left;
  line-height: 1.65;
  width: 55%;
  margin-bottom: 0;
}

.game-2048-container .restart-button {
  display: inline-block;
  background: #444444;
  border-radius: 3px;
  padding: 0 20px;
  text-decoration: none;
  color: #ffffff;
  height: 42px;
  line-height: 42px;
  display: block;
  text-align: center;
  float: right;
  margin-right: 1%;
  /* v1.14.49: prevent double-tap-zoom; respond to single taps only.
     Combined with the JS dedupe in keyboard_input_manager, this means
     a tap is exactly one action — no zoom gesture, no synthesized
     click chasing a touchend. */
  touch-action: manipulation;
}

.game-2048-container .undo-button {
  display: inline-block;
  background: #444444;
  border-radius: 3px;
  padding: 0 20px;
  text-decoration: none;
  color: #ffffff;
  height: 42px;
  line-height: 42px;
  display: block;
  text-align: center;
  float: right;
  /* v1.14.49: see .restart-button — same single-tap discipline. */
  touch-action: manipulation;
}

.undo-count {
    padding: 10px 0px 10px 10px;
}

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

/* Responsive Design */
@media screen and (max-width: 520px) {
  .game-2048-container {
    font-size: 15px;
    padding: 20px 0;
  }

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

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

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

  .game-2048-container .heading {
    margin-bottom: 10px;
  }

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

  .game-2048-container .restart-button {
    width: 20%;
    padding: 0;
    display: block;
    box-sizing: border-box;
  }

 .game-2048-container .undo-button {
    width: 20%;
    padding: 0;
    display: block;
    box-sizing: border-box;
  }

  .game-2048-container .game-container {
    margin-top: 17px;
    padding: 10px;
    width: 280px;
    height: 280px;
  }

  .game-2048-container .game-container .game-message p {
    font-size: 30px;
    height: 30px;
    line-height: 30px;
    margin-top: 90px;
  }

  .game-2048-container .game-container .game-message .lower {
    margin-top: 30px;
  }

  .game-2048-container .grid-row {
    margin-bottom: 10px;
  }

  .game-2048-container .grid-cell {
    width: 57.5px;
    height: 57.5px;
    margin-right: 10px;
  }

  .game-2048-container .tile,
  .game-2048-container .tile .tile-inner {
    width: 58px;
    height: 58px;
    line-height: 58px;
  }

  .game-2048-container .tile.tile-position-1-1 {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

  .game-2048-container .tile.tile-position-1-2 {
    -webkit-transform: translate(0px, 67px);
    -moz-transform: translate(0px, 67px);
    -ms-transform: translate(0px, 67px);
    transform: translate(0px, 67px);
  }

  .game-2048-container .tile.tile-position-1-3 {
    -webkit-transform: translate(0px, 135px);
    -moz-transform: translate(0px, 135px);
    -ms-transform: translate(0px, 135px);
    transform: translate(0px, 135px);
  }

  .game-2048-container .tile.tile-position-1-4 {
    -webkit-transform: translate(0px, 202px);
    -moz-transform: translate(0px, 202px);
    -ms-transform: translate(0px, 202px);
    transform: translate(0px, 202px);
  }

  .game-2048-container .tile.tile-position-2-1 {
    -webkit-transform: translate(67px, 0px);
    -moz-transform: translate(67px, 0px);
    -ms-transform: translate(67px, 0px);
    transform: translate(67px, 0px);
  }

  .game-2048-container .tile.tile-position-2-2 {
    -webkit-transform: translate(67px, 67px);
    -moz-transform: translate(67px, 67px);
    -ms-transform: translate(67px, 67px);
    transform: translate(67px, 67px);
  }

  .game-2048-container .tile.tile-position-2-3 {
    -webkit-transform: translate(67px, 135px);
    -moz-transform: translate(67px, 135px);
    -ms-transform: translate(67px, 135px);
    transform: translate(67px, 135px);
  }

  .game-2048-container .tile.tile-position-2-4 {
    -webkit-transform: translate(67px, 202px);
    -moz-transform: translate(67px, 202px);
    -ms-transform: translate(67px, 202px);
    transform: translate(67px, 202px);
  }

  .game-2048-container .tile.tile-position-3-1 {
    -webkit-transform: translate(135px, 0px);
    -moz-transform: translate(135px, 0px);
    -ms-transform: translate(135px, 0px);
    transform: translate(135px, 0px);
  }

  .game-2048-container .tile.tile-position-3-2 {
    -webkit-transform: translate(135px, 67px);
    -moz-transform: translate(135px, 67px);
    -ms-transform: translate(135px, 67px);
    transform: translate(135px, 67px);
  }

  .game-2048-container .tile.tile-position-3-3 {
    -webkit-transform: translate(135px, 135px);
    -moz-transform: translate(135px, 135px);
    -ms-transform: translate(135px, 135px);
    transform: translate(135px, 135px);
  }

  .game-2048-container .tile.tile-position-3-4 {
    -webkit-transform: translate(135px, 202px);
    -moz-transform: translate(135px, 202px);
    -ms-transform: translate(135px, 202px);
    transform: translate(135px, 202px);
  }

  .game-2048-container .tile.tile-position-4-1 {
    -webkit-transform: translate(202px, 0px);
    -moz-transform: translate(202px, 0px);
    -ms-transform: translate(202px, 0px);
    transform: translate(202px, 0px);
  }

  .game-2048-container .tile.tile-position-4-2 {
    -webkit-transform: translate(202px, 67px);
    -moz-transform: translate(202px, 67px);
    -ms-transform: translate(202px, 67px);
    transform: translate(202px, 67px);
  }

  .game-2048-container .tile.tile-position-4-3 {
    -webkit-transform: translate(202px, 135px);
    -moz-transform: translate(202px, 135px);
    -ms-transform: translate(135px, 135px);
    transform: translate(202px, 135px);
  }

  .game-2048-container .tile.tile-position-4-4 {
    -webkit-transform: translate(202px, 202px);
    -moz-transform: translate(202px, 202px);
    -ms-transform: translate(202px, 202px);
    transform: translate(202px, 202px);
  }

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

  .game-2048-container .tile.tile-128 .tile-inner {
    font-size: 25px;
  }

  .game-2048-container .tile.tile-256 .tile-inner {
    font-size: 25px;
  }

  .game-2048-container .tile.tile-512 .tile-inner {
    font-size: 25px;
  }

  .game-2048-container .tile.tile-1024 .tile-inner {
    font-size: 15px;
  }

  .game-2048-container .tile.tile-2048 .tile-inner {
    font-size: 15px;
  }

  .game-2048-container .tile.tile-super .tile-inner {
    font-size: 10px;
  }
}

.scoreboard-item {
  display: inline-grid;
  align-items: center;
  padding: 12px;
  margin: 0px;
}

span.scoreboard-name {
    font-size: 16px;
}

/* =========================================================================
 * 2048 ARCADE REDESIGN  (v0.20.7)
 *
 * The original 2048 ships a warm cream / gold / peach palette
 * (#eee4da, #f59563, #edcf72 …) that looks great in isolation but
 * clashes with the cyberpunk-neon vibe of the rest of this plugin
 * (gomoku, tetris, minesweeper). This block replaces those tile colors
 * with a saturated neon ramp that:
 *
 *   1. Maps clearly to value tiers — cool→warm→hot→cosmic, so the
 *      "bigger means more impressive" intuition is preserved without
 *      relying on subtle hue shifts.
 *   2. Uses the arcade theme's accent color set
 *      (--mg-cyan / --mg-green / --mg-yellow / --mg-orange / --mg-pink /
 *      --mg-purple) so the palette harmonizes with the rest of the
 *      framework's chrome.
 *   3. Adds progressive glow (box-shadow) at higher tiers — the 1024
 *      and 2048 tiles feel earned, not just colored.
 *
 * Strategy: ALL overrides live below the existing rules so they win
 * cascade. We do NOT touch the original block above (keeps tile
 * positioning / animation math intact). We bump specificity slightly
 * by chaining the theme class so overrides only apply when a theme is
 * active, leaving no-theme rendering unchanged for back-compat.
 *
 * The clean theme also gets a refined neutral palette — not as flashy,
 * but cleaner than the cream-museum-piece original.
 * ========================================================================= */

/* ---------- BOTH THEMES — layout fixes ----------
 *
 * The original 2048 plugin uses 1990s-style float-based layout for
 * .heading (title + scores) and .above-game (intro + buttons). This
 * worked OK at the original tile sizes / button widths but breaks
 * with our redesigned chips and CJK button labels:
 *
 *   - On desktop: title floats left + scores-container floats right
 *     leaves the board sitting alone on the left of a wide content
 *     area with empty space to the right.
 *   - On mobile: the @media block forces .restart-button { width: 20% }
 *     which is ~56px on a 280px container — too narrow for the
 *     "新遊戲" CJK label, which then wraps "戲" onto a second line.
 *   - On both: removing the cream tile palette without rebuilding
 *     the float layout left score-container, undo-count, and intro
 *     paragraph in a tangled overlap.
 *
 * Solution below: replace floats with flex everywhere, apply to BOTH
 * .mg-theme-arcade and .mg-theme-clean. Theme-specific blocks further
 * down handle colors / glow / borders — never layout.
 * ------------------------------------------------------------------ */

/* Outer container — fill parent width (typically the .mg-frame's
   interior) up to a sensible ceiling. The board is set to scale
   responsively below so it stays aligned with the heading + above-game
   right edges regardless of viewport width.
   
   Why 640px: the original board is fixed 500px and looks small on
   modern wide displays. We let the whole 2048 chrome (heading +
   above-game + board) grow up to 640px wide before centering, so on
   typical 800-1200px content areas it fills more presence without
   feeling stretched. The board uses transform: scale() driven from
   application.js (--mg-2048-scale) to grow proportionally. */
.mg-theme-arcade .game-2048-container,
.mg-theme-clean  .game-2048-container {
    width: 100%;
    max-width: 640px;
    /* The core.css rule `.mg-frame--ported > .game-2048-container`
       has `margin: 0 !important` (designed when 2048 still used its
       own padding-based centering). We need !important too to win. */
    margin-left: auto !important;
    margin-right: auto !important;
    /* Drop the original `padding: 60px 6% !important` — it was pushing
       content way off-center on wide frames. We rely on .mg-frame's
       own padding for outer spacing. The original used !important so
       our override must too in order to win the cascade. */
    padding: 12px 0 !important;
    box-sizing: border-box;
}

/* Responsive board scaling.
 *
 * The original 2048 hard-codes pixel positions (translate(135px,67px)
 * etc.) into 60+ CSS rules and the JS does NOT know about viewport.
 * Rewriting that math is risky; instead we wrap the natively-500px
 * board in a CSS transform: scale().
 *
 * Why this works:
 *   - transform: scale() composes with child transforms, so a tile's
 *     `translate(135px, 67px)` inside a `scale(0.8)` parent renders at
 *     effective `(108px, 53.6px)` — proportional to the new size.
 *   - We use a CSS variable (--mg-2048-scale) set by application.js
 *     based on actual container width / 500. ResizeObserver keeps it
 *     in sync as the page reflows.
 *   - transform-origin: top left so scaled board still anchors to the
 *     wrapper's top-left corner (no surprise offsets).
 *   - Layout box stays at 500x500 from the .game-container's CSS,
 *     so we ALSO set width/height on the wrapper to match the scaled
 *     visual size (otherwise we'd have an empty layout gap below).
 *
 * application.js handles the math: scale = wrap_width / 500, capped
 * to [0.55, 1.2] so the board never disappears or grows obscenely big.
 */
.mg-theme-arcade .game-2048-container .game-container,
.mg-theme-clean  .game-2048-container .game-container {
    /* Native 500x500 stays as-is; transform handles visual scale. */
    transform-origin: top left;
    transform: scale(var(--mg-2048-scale, 1));
    /* Once scaled, the layout box should match the visual size so
       there's no whitespace below/right of the board. JS computes
       this height too; CSS provides a no-JS fallback at scale=1. */
    margin-left: auto;
    margin-right: auto;
}
/* Stage wrapper — defines the ACTUAL responsive footprint of the
   board. JS sets its width to match available container width and
   reads that to compute scale. On no-JS / before JS fires, the
   max-width keeps it from blowing up. */
.mg-theme-arcade .game-2048-container .game-stage,
.mg-theme-clean  .game-2048-container .game-stage {
    width: 100%;
    /* Aspect-ratio square */
    aspect-ratio: 1 / 1;
    /* When scale is set to fill the wrap width, max stays bounded by
       container max-width above. Min keeps the board playable on tiny
       phones. */
    max-width: 600px;
    min-width: 280px;
    margin: 0 auto;
    position: relative;
    /* The scaled board is absolutely positioned inside this so the
       stage's reserved space stays exactly square regardless of how
       transform: scale changes the visual footprint. */
    overflow: visible;
}
.mg-theme-arcade .game-2048-container .game-stage > .game-container,
.mg-theme-clean  .game-2048-container .game-stage > .game-container {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
}

/* Heading row — flex layout replacing the original float-based clearfix.
   Title left, scores group right; wraps on narrow viewports so title
   goes on its own row above scores.
   
   Critical detail: the original CSS has `.heading:after { content: ""; }`
   as a float-clear element. In our new flex parent, that pseudo
   becomes a phantom flex child, which breaks `justify-content:
   space-between` (with 3 children, the middle one — our scores — gets
   pushed to the center instead of the right). We neutralize the
   pseudos via display:none below. Same applies to .above-game. */
.mg-theme-arcade .game-2048-container .heading,
.mg-theme-clean  .game-2048-container .heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
/* Kill the legacy clearfix ::after pseudos — they were designed for
   float layout and now act as phantom flex items that disrupt
   space-between distribution. */
.mg-theme-arcade .game-2048-container .heading::after,
.mg-theme-clean  .game-2048-container .heading::after,
.mg-theme-arcade .game-2048-container .above-game::after,
.mg-theme-clean  .game-2048-container .above-game::after {
    display: none !important;
}
/* Title — kill the original `float: left` so the flex parent can lay
   out title + scores cleanly. Without this override the title would
   collapse out of the flex flow. */
.mg-theme-arcade .game-2048-container h1.title,
.mg-theme-clean  .game-2048-container h1.title {
    float: none;
    display: block;
    margin: 0;
    /* Don't let the title push scores off the row at narrow widths —
       let it shrink first. */
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1;
}

/* Scores container — was float: right, now a grid:
   row 1: [score chip] [best chip]
   row 2: [    undo-count    ]  (spans both columns)
   This is cleaner than flex-wrap because grid columns are deterministic:
   the container shrinks to the chips' total content width (no surprise
   100%-basis growth like flex-wrap had). The undo-count below spans
   the same width via `grid-column: 1 / -1`. */
.mg-theme-arcade .game-2048-container .scores-container,
.mg-theme-clean  .game-2048-container .scores-container {
    float: none;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    justify-content: end;
    flex: 0 0 auto;
    text-align: right;
    margin: 0;
}
.mg-theme-arcade .game-2048-container .score-container,
.mg-theme-arcade .game-2048-container .best-container,
.mg-theme-clean  .game-2048-container .score-container,
.mg-theme-clean  .game-2048-container .best-container {
    /* Override original `display: inline-block` and reset margin-top
       (parent gap handles spacing now). */
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
    height: auto;
    min-width: 88px;
    padding: 10px 18px 8px;
    line-height: 1;
    text-align: center;
}
.mg-theme-arcade .game-2048-container .score-container .score-label,
.mg-theme-arcade .game-2048-container .best-container .score-label,
.mg-theme-clean  .game-2048-container .score-container .score-label,
.mg-theme-clean  .game-2048-container .best-container .score-label {
    /* Original CSS had position: absolute for these — break out of the
       absolute layer so flex-column sees them. */
    position: static;
    width: auto;
    font-size: 10px;
    letter-spacing: 0.18em;
    margin: 0 0 4px 0;
    line-height: 1;
}
.mg-theme-arcade .game-2048-container .score-container .score-value,
.mg-theme-arcade .game-2048-container .best-container .score-value,
.mg-theme-clean  .game-2048-container .score-container .score-value,
.mg-theme-clean  .game-2048-container .best-container .score-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
/* Undo-count — spans full width below the chip row in the grid. */
.mg-theme-arcade .game-2048-container .undo-count,
.mg-theme-clean  .game-2048-container .undo-count {
    grid-column: 1 / -1;
    font-size: 12px;
    letter-spacing: 0.06em;
    margin: 0;
    padding: 0;
    text-align: right;
    color: var(--mg-ink-muted);
}

/* Above-game row — flex replacing original float layout. Intro left,
   undo + new game buttons right. Mobile wraps so buttons don't squeeze
   the intro. */
.mg-theme-arcade .game-2048-container .above-game,
.mg-theme-clean  .game-2048-container .above-game {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    overflow: visible;
}
.mg-theme-arcade .game-2048-container .game-intro,
.mg-theme-clean  .game-2048-container .game-intro {
    /* Kill original `float: left + width: 55%`. flex: 1 1 280px lets
       intro shrink to 280px before wrapping to its own row. */
    float: none;
    width: auto;
    flex: 1 1 280px;
    margin: 0;
    line-height: 1.6;
    font-size: 13px;
}

/* On narrow viewports, the intro is too long to share a row with the
   buttons, so it wraps to its own line. With the intro on row 1 and
   the two buttons on row 2 under flex `space-between`, the buttons
   were splitting apart — 撤銷 stuck left, 新遊戲 stuck right, with
   ugly empty space in between. The `margin-left: auto` trick on the
   first button absorbs all the free space on row 2, pushing the
   button pair together to the right edge as a cohesive group. */
@media (max-width: 540px) {
    .mg-theme-arcade .game-2048-container .game-intro,
    .mg-theme-clean  .game-2048-container .game-intro {
        /* Force the intro to its own full row on mobile so the buttons
           drop to row 2 cleanly. */
        flex: 1 1 100%;
    }
    .mg-theme-arcade .game-2048-container .undo-button,
    .mg-theme-clean  .game-2048-container .undo-button {
        /* Push the button pair together to the right edge. */
        margin-left: auto !important;
    }
}
.mg-theme-arcade .game-2048-container .restart-button,
.mg-theme-arcade .game-2048-container .undo-button,
.mg-theme-clean  .game-2048-container .restart-button,
.mg-theme-clean  .game-2048-container .undo-button {
    /* Kill the float: right + width: 20% (mobile only) which was
       forcing buttons to ~56px wide and making "新遊戲" wrap to a
       second line. With flex parent + flex: 0 0 auto, button is
       shrink-to-content. */
    float: none;
    width: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 34px;
    line-height: 1;
    padding: 0 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--mg-radius-sm);
}

/* Game-container — center on the page so it doesn't sit alone on the
   left of a wide content area. */
.mg-theme-arcade .game-2048-container .game-container,
.mg-theme-clean  .game-2048-container .game-container {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- ARCADE THEME — frame & layout ---------- */

/* Outer container: drop the #232323 box, let the parent .mg-frame's
   neon chrome do the work. No more "card inside a card" look.
   Layout (max-width, padding, margin) is handled by the shared block
   above; this block only does the arcade theme's color/chrome bits. */
.mg-theme-arcade .game-2048-container {
    background: transparent;
    border-radius: 0;
    color: var(--mg-ink);
}

/* Title — accent color + glow. Layout is handled by shared block above. */
.mg-theme-arcade .game-2048-container h1.title {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mg-accent);
    text-shadow: 0 0 8px var(--mg-accent-glow);
    font-family: var(--mg-display);
}

/* Score chips — arcade chrome (dark bg + accent glow). Layout shared. */
.mg-theme-arcade .game-2048-container .score-container,
.mg-theme-arcade .game-2048-container .best-container {
    background: var(--mg-bg-2);
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-radius-sm);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3);
}
.mg-theme-arcade .game-2048-container .score-container .score-label,
.mg-theme-arcade .game-2048-container .best-container .score-label {
    color: var(--mg-ink-muted);
}
.mg-theme-arcade .game-2048-container .score-container .score-value,
.mg-theme-arcade .game-2048-container .best-container .score-value {
    color: var(--mg-accent);
    text-shadow: 0 0 8px var(--mg-accent-glow);
}
/* +score float-up overlay: tint to match accent so it reads as part of
   the same UI rather than a stray red bubble. */
.mg-theme-arcade .game-2048-container .score-container .score-addition,
.mg-theme-arcade .game-2048-container .best-container .score-addition {
    color: var(--mg-yellow);
    text-shadow: 0 0 6px rgba(232, 217, 122, 0.5);
}

.mg-theme-arcade .game-2048-container .game-intro {
    color: var(--mg-ink-muted);
}

/* Buttons — neon outlined style (layout shared above). */
.mg-theme-arcade .game-2048-container .restart-button,
.mg-theme-arcade .game-2048-container .undo-button {
    background: transparent;
    border: 1px solid var(--mg-accent);
    color: var(--mg-accent);
    transition: background 0.15s ease, box-shadow 0.15s ease;
    box-shadow:
        0 0 8px var(--mg-accent-glow),
        inset 0 0 6px var(--mg-accent-soft);
    text-shadow: 0 0 4px var(--mg-accent-glow);
}
.mg-theme-arcade .game-2048-container .restart-button:hover,
.mg-theme-arcade .game-2048-container .undo-button:hover {
    background: var(--mg-accent-soft);
    box-shadow:
        0 0 12px var(--mg-accent-glow),
        inset 0 0 10px var(--mg-accent-soft);
}
.mg-theme-arcade .game-2048-container .restart-button:active,
.mg-theme-arcade .game-2048-container .undo-button:active {
    background: var(--mg-accent);
    color: var(--mg-accent-ink);
}

/* Game board container — dark with subtle accent glow ring. */
.mg-theme-arcade .game-2048-container .game-container {
    background: var(--mg-bg-3);
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-radius-sm);
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.4),
        0 0 16px var(--mg-accent-glow);
}
/* Empty grid cells — just hint the slot, don't compete with tiles. */
.mg-theme-arcade .game-2048-container .grid-cell {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--mg-radius-xs);
}

/* ---------- ARCADE THEME — tile palette ----------
 *
 * Color ramp summary:
 *   2,4    → cyan family (start cool)
 *   8,16   → green family (warming up)
 *   32,64  → yellow / orange (hot)
 *   128,256→ pink (rare)
 *   512,1024→ purple (very rare)
 *   2048   → gold (the goal — max glow)
 *   super  → white shimmer (post-goal flex)
 *
 * Each tier gets a base color and a glow whose intensity scales with
 * value. Darker tiles use lighter ink; lighter tiles use dark ink.
 */
.mg-theme-arcade .game-2048-container .tile .tile-inner {
    border-radius: var(--mg-radius-xs);
    font-weight: 700;
    /* Pull font-size down slightly — pixel font reads as taller, plus
       glow is more legible without crowding. */
    font-size: 48px;
    letter-spacing: -0.02em;
    box-shadow: none;
    transition: box-shadow 0.18s ease;
}

/* tier 2 — dim cyan */
.mg-theme-arcade .game-2048-container .tile.tile-2 .tile-inner {
    background: #1a3640;
    color: #6fdcdf;
    box-shadow: inset 0 0 0 1px rgba(111, 220, 223, 0.35);
}
/* tier 4 — brighter cyan */
.mg-theme-arcade .game-2048-container .tile.tile-4 .tile-inner {
    background: #214a5a;
    color: #9eeaec;
    box-shadow: inset 0 0 0 1px rgba(111, 220, 223, 0.5);
}
/* tier 8 — green */
.mg-theme-arcade .game-2048-container .tile.tile-8 .tile-inner {
    background: #2a5a3a;
    color: #cef7d8;
    box-shadow:
        inset 0 0 0 1px rgba(111, 223, 148, 0.55),
        0 0 8px rgba(111, 223, 148, 0.18);
}
/* tier 16 — brighter green */
.mg-theme-arcade .game-2048-container .tile.tile-16 .tile-inner {
    background: #356f48;
    color: #ddffe4;
    box-shadow:
        inset 0 0 0 1px rgba(111, 223, 148, 0.7),
        0 0 10px rgba(111, 223, 148, 0.25);
}
/* tier 32 — yellow */
.mg-theme-arcade .game-2048-container .tile.tile-32 .tile-inner {
    background: #6b6028;
    color: #fff5c2;
    box-shadow:
        inset 0 0 0 1px rgba(232, 217, 122, 0.65),
        0 0 12px rgba(232, 217, 122, 0.25);
}
/* tier 64 — orange */
.mg-theme-arcade .game-2048-container .tile.tile-64 .tile-inner {
    background: #7a4a25;
    color: #ffd9b8;
    box-shadow:
        inset 0 0 0 1px rgba(232, 158, 111, 0.7),
        0 0 14px rgba(232, 158, 111, 0.3);
}
/* tier 128 — pink */
.mg-theme-arcade .game-2048-container .tile.tile-128 .tile-inner {
    background: #6b2e54;
    color: #ffd2eb;
    font-size: 42px;
    box-shadow:
        inset 0 0 0 1px rgba(232, 120, 179, 0.75),
        0 0 16px rgba(232, 120, 179, 0.35);
}
/* tier 256 — brighter pink */
.mg-theme-arcade .game-2048-container .tile.tile-256 .tile-inner {
    background: #823862;
    color: #ffd9ee;
    font-size: 42px;
    box-shadow:
        inset 0 0 0 1px rgba(232, 120, 179, 0.85),
        0 0 18px rgba(232, 120, 179, 0.45);
}
/* tier 512 — purple */
.mg-theme-arcade .game-2048-container .tile.tile-512 .tile-inner {
    background: #4a3973;
    color: #e8defb;
    font-size: 42px;
    box-shadow:
        inset 0 0 0 1px rgba(183, 154, 217, 0.85),
        0 0 20px rgba(183, 154, 217, 0.5);
}
/* tier 1024 — brighter purple, stronger glow */
.mg-theme-arcade .game-2048-container .tile.tile-1024 .tile-inner {
    background: #5b4790;
    color: #f1e8ff;
    font-size: 36px;
    box-shadow:
        inset 0 0 0 1px rgba(183, 154, 217, 0.95),
        0 0 24px rgba(183, 154, 217, 0.6);
}
/* tier 2048 — VICTORY GOLD — max glow, animated pulse */
.mg-theme-arcade .game-2048-container .tile.tile-2048 .tile-inner {
    background: #8b6e1f;
    color: #fff7d4;
    font-size: 36px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 1),
        inset 0 0 12px rgba(255, 215, 0, 0.4),
        0 0 28px rgba(255, 215, 0, 0.65),
        0 0 48px rgba(255, 215, 0, 0.3);
    animation: mg2048-victory-pulse 2.4s ease-in-out infinite;
}
/* When a tile becomes 2048 via merge, BOTH .tile-merged and
   .tile-2048 match. Without this rule, our pulse animation (on
   tile-inner) wins specificity and kills the satisfying pop bounce
   from the merge. Solution: re-state the pop transform animation,
   and delay our pulse by 300ms (pop is 200ms with 100ms delay,
   ends at 300ms) so they sequence cleanly without fighting.
   Both animations target different sub-properties (pop = transform,
   pulse = box-shadow) so they coexist on the same element fine. */
.mg-theme-arcade .game-2048-container .tile-merged.tile-2048 .tile-inner {
    animation:
        pop 200ms ease 100ms,
        mg2048-victory-pulse 2.4s ease-in-out 300ms infinite;
}
@keyframes mg2048-victory-pulse {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 215, 0, 1),
            inset 0 0 12px rgba(255, 215, 0, 0.4),
            0 0 28px rgba(255, 215, 0, 0.65),
            0 0 48px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 215, 0, 1),
            inset 0 0 18px rgba(255, 215, 0, 0.55),
            0 0 36px rgba(255, 215, 0, 0.8),
            0 0 64px rgba(255, 215, 0, 0.45);
    }
}
/* super (>2048) — white-on-deep-pink shimmer, the "you broke the game" tier */
.mg-theme-arcade .game-2048-container .tile.tile-super .tile-inner {
    background:
        linear-gradient(135deg, #6b2e54 0%, #4a3973 50%, #1a3640 100%);
    color: #ffffff;
    font-size: 30px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.6),
        0 0 32px rgba(255, 255, 255, 0.4);
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.6),
        0 0 16px rgba(232, 120, 179, 0.5);
}

/* Game-message overlay (won / over) — accent-based, neon-edged.
   ALSO override the original pixel-based vertical positioning. The
   vendor CSS uses `margin-top: 200px` on the <p> + `margin-top: 59px`
   on .lower, which assumes a 500px native board and looks fine on
   desktop but on mobile (280px native via the mobile @media block)
   the 200px margin pushes the text near the bottom and the button
   overflows entirely. Flex centering works at any board size. */
.mg-theme-arcade .game-2048-container .game-container .game-message,
.mg-theme-clean  .game-2048-container .game-container .game-message {
    /* Make the overlay a flex column so we can center vertically
       regardless of native board size (500px desktop / 280px mobile)
       or the JS-applied transform: scale. */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    /* Original CSS uses `display: none` on this element; .game-won
       and .game-over modifiers override to `display: block`. We need
       `display: flex` when active. The selector below picks both. */
}
.mg-theme-arcade .game-2048-container .game-container .game-message.game-won,
.mg-theme-arcade .game-2048-container .game-container .game-message.game-over,
.mg-theme-clean  .game-2048-container .game-container .game-message.game-won,
.mg-theme-clean  .game-2048-container .game-container .game-message.game-over {
    display: flex;
}
.mg-theme-arcade .game-2048-container .game-container .game-message {
    background: rgba(10, 14, 20, 0.85);
    border: 1px solid var(--mg-accent);
    border-radius: var(--mg-radius-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.mg-theme-arcade .game-2048-container .game-container .game-message p,
.mg-theme-clean  .game-2048-container .game-container .game-message p {
    /* Reset the vendor's pixel-based vertical positioning — flex
       handles centering now. */
    margin: 0;
    height: auto;
    line-height: 1.2;
}
.mg-theme-arcade .game-2048-container .game-container .game-message p {
    color: var(--mg-accent);
    text-shadow: 0 0 12px var(--mg-accent-glow);
    /* Responsive size: shrinks on mobile (small board) so the text
       has breathing room above and below. The original 48px filled
       the whole overlay on mobile, leaving no room for the button. */
    font-size: clamp(26px, 9vw, 40px);
    letter-spacing: 0.04em;
    /* Tight horizontal padding so long Chinese strings ("遊戲結束！")
       have a bit of margin from the overlay edge. */
    padding: 0 16px;
    text-align: center;
    /* In case the heading wraps, give it room to breathe. */
    max-width: 90%;
}
.mg-theme-arcade .game-2048-container .game-container .game-message .lower,
.mg-theme-clean  .game-2048-container .game-container .game-message .lower {
    /* Reset margin-top: 59px; flex parent's `gap: 24px` handles the
       spacing between text and buttons. */
    margin: 0;
    display: flex;
    gap: 10px;
    justify-content: center;
}
.mg-theme-arcade .game-2048-container .game-container .game-message.game-won {
    background: rgba(10, 14, 20, 0.85);
    border-color: rgba(255, 215, 0, 0.7);
}
.mg-theme-arcade .game-2048-container .game-container .game-message.game-won p {
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}
.mg-theme-arcade .game-2048-container .game-container .game-message a {
    background: transparent;
    border: 1px solid var(--mg-accent);
    color: var(--mg-accent);
    border-radius: var(--mg-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 700;
    padding: 0 16px;
    height: 38px;
    line-height: 36px;
    box-shadow: 0 0 8px var(--mg-accent-glow);
    transition: background 0.15s ease;
}
.mg-theme-arcade .game-2048-container .game-container .game-message a:hover {
    background: var(--mg-accent-soft);
}

/* ---------- CLEAN THEME — refined neutral palette ----------
 *
 * Same redesign principle (cool→warm progression) but desaturated for
 * a modern flat aesthetic. Backgrounds in the gray-blue family,
 * accent colors muted. Looks at home in light or dark page contexts.
 */
.mg-theme-clean .game-2048-container {
    background: var(--mg-bg-2);
    border-radius: var(--mg-radius);
    /* Border removed (v0.22.62). It was creating a thin grey ring around
       the entire 2048 chrome. With the rest of the page-frame styling
       providing enough container affordance, the extra border just read
       as visual noise — especially against light page backgrounds where
       the gray-blue ring competed with the panel surface. The
       background + radius alone is the framing cue. */
    color: var(--mg-ink);
}
.mg-theme-clean .game-2048-container h1.title {
    color: var(--mg-ink);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}
.mg-theme-clean .game-2048-container .score-container,
.mg-theme-clean .game-2048-container .best-container {
    background: var(--mg-bg-3);
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-ink);
}
.mg-theme-clean .game-2048-container .score-container .score-label,
.mg-theme-clean .game-2048-container .best-container .score-label {
    color: var(--mg-ink-muted);
}
.mg-theme-clean .game-2048-container .score-container .score-value,
.mg-theme-clean .game-2048-container .best-container .score-value {
    color: var(--mg-accent);
    font-weight: 700;
}
.mg-theme-clean .game-2048-container .restart-button,
.mg-theme-clean .game-2048-container .undo-button {
    background: var(--mg-accent);
    color: var(--mg-accent-ink);
    border-radius: var(--mg-radius-sm);
    border: 0;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.05s ease;
}
.mg-theme-clean .game-2048-container .restart-button:hover,
.mg-theme-clean .game-2048-container .undo-button:hover {
    filter: brightness(1.1);
}
.mg-theme-clean .game-2048-container .restart-button:active,
.mg-theme-clean .game-2048-container .undo-button:active {
    transform: scale(0.98);
}
.mg-theme-clean .game-2048-container .game-container {
    background: var(--mg-bg-3);
    border-radius: var(--mg-radius-sm);
    /* No border here — the outer .game-2048-container already provides
       the framing edge. A border on this inner box reads as a duplicate
       "frame inside a frame" against the panel background. */
}
.mg-theme-clean .game-2048-container .grid-cell {
    background: rgba(0, 0, 0, 0.06);
    border-radius: var(--mg-radius-xs);
}
/* Tile colors for clean theme — cooler progression, no glow. */
.mg-theme-clean .game-2048-container .tile .tile-inner {
    border-radius: var(--mg-radius-xs);
    font-weight: 700;
    box-shadow: none;
}
.mg-theme-clean .game-2048-container .tile.tile-2    .tile-inner { background: #d8e0e8; color: #2a3038; }
.mg-theme-clean .game-2048-container .tile.tile-4    .tile-inner { background: #b8c8d8; color: #1d2128; }
.mg-theme-clean .game-2048-container .tile.tile-8    .tile-inner { background: #6fa8c4; color: #fff; }
.mg-theme-clean .game-2048-container .tile.tile-16   .tile-inner { background: #4a8aaf; color: #fff; }
.mg-theme-clean .game-2048-container .tile.tile-32   .tile-inner { background: #4a9a72; color: #fff; }
.mg-theme-clean .game-2048-container .tile.tile-64   .tile-inner { background: #d4a04a; color: #fff; }
.mg-theme-clean .game-2048-container .tile.tile-128  .tile-inner { background: #e07a4a; color: #fff; font-size: 45px; }
.mg-theme-clean .game-2048-container .tile.tile-256  .tile-inner { background: #d6555a; color: #fff; font-size: 45px; }
.mg-theme-clean .game-2048-container .tile.tile-512  .tile-inner { background: #a04ab4; color: #fff; font-size: 45px; }
.mg-theme-clean .game-2048-container .tile.tile-1024 .tile-inner { background: #6f5ac4; color: #fff; font-size: 35px; }
.mg-theme-clean .game-2048-container .tile.tile-2048 .tile-inner {
    background: #d4a730;
    color: #fff;
    font-size: 35px;
    box-shadow: 0 0 16px rgba(212, 167, 48, 0.5);
}
.mg-theme-clean .game-2048-container .tile.tile-super .tile-inner {
    background: #2a3038;
    color: #fff;
    font-size: 30px;
}

/* ---------- Mobile sizing for both themes ---------- */
@media screen and (max-width: 520px) {
    /* Reduce title to fit alongside scores in narrow widths. */
    .mg-theme-arcade .game-2048-container h1.title,
    .mg-theme-clean  .game-2048-container h1.title {
        font-size: 36px;
    }
    .mg-theme-arcade .game-2048-container .score-container,
    .mg-theme-arcade .game-2048-container .best-container,
    .mg-theme-clean  .game-2048-container .score-container,
    .mg-theme-clean  .game-2048-container .best-container {
        min-width: 64px;
        padding: 8px 10px 6px;
    }
    .mg-theme-arcade .game-2048-container .score-container .score-value,
    .mg-theme-arcade .game-2048-container .best-container .score-value,
    .mg-theme-clean  .game-2048-container .score-container .score-value,
    .mg-theme-clean  .game-2048-container .best-container .score-value {
        font-size: 18px;
    }
    /* Smaller tile font sizes match the smaller mobile tile dimension
       (67px square per existing @media block above). */
    .mg-theme-arcade .game-2048-container .tile .tile-inner {
        font-size: 32px;
    }
    .mg-theme-arcade .game-2048-container .tile.tile-128 .tile-inner,
    .mg-theme-arcade .game-2048-container .tile.tile-256 .tile-inner,
    .mg-theme-arcade .game-2048-container .tile.tile-512 .tile-inner {
        font-size: 26px;
    }
    .mg-theme-arcade .game-2048-container .tile.tile-1024 .tile-inner,
    .mg-theme-arcade .game-2048-container .tile.tile-2048 .tile-inner {
        font-size: 20px;
    }
    .mg-theme-arcade .game-2048-container .tile.tile-super .tile-inner {
        font-size: 16px;
    }
    /* Same reductions for clean theme. The original main.css has these
       at lower specificity so our themed rules above win — we have to
       re-state them under the theme class for mobile. */
    .mg-theme-clean .game-2048-container .tile .tile-inner {
        font-size: 32px;
    }
    .mg-theme-clean .game-2048-container .tile.tile-128 .tile-inner,
    .mg-theme-clean .game-2048-container .tile.tile-256 .tile-inner,
    .mg-theme-clean .game-2048-container .tile.tile-512 .tile-inner {
        font-size: 22px;
    }
    .mg-theme-clean .game-2048-container .tile.tile-1024 .tile-inner,
    .mg-theme-clean .game-2048-container .tile.tile-2048 .tile-inner {
        font-size: 16px;
    }
    .mg-theme-clean .game-2048-container .tile.tile-super .tile-inner {
        font-size: 14px;
    }
}