/* ============================================================
   2048 — game-specific styles
   ============================================================ */

.tf-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Board --- */
.tf-board-wrap {
  position: relative;
  width: min(420px, 82vw);
  max-width: 100%;
  box-sizing: border-box;
  aspect-ratio: 1;
}

.tf-board {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 3px solid var(--ink);
  background-color: #B8A48F;
  padding: 2.5%;
  box-sizing: border-box;
  touch-action: none;
}

.tf-cell {
  position: absolute;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
}

.tf-tile {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: -webkit-transform 0.1s ease-in-out, transform 0.1s ease-in-out;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 2;
}
.tf-tile-inner {
  border-radius: 8px;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tf-tile-inner.spawning {
  animation: tf-pop 0.2s ease 0.08s;
  animation-fill-mode: backwards;
}
.tf-tile-inner.merged {
  animation: tf-merge-pop 0.2s ease 0.08s;
  animation-fill-mode: backwards;
}
.tf-tile.merged {
  z-index: 3;
}

@keyframes tf-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes tf-merge-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Tile value colors — light, low values through vivid, high values */
.tf-tile[data-value="2"] .tf-tile-inner { background: #F5F1E8; color: #22314A; font-size: 1.6rem; }
.tf-tile[data-value="4"] .tf-tile-inner { background: #EFE3C8; color: #22314A; font-size: 1.6rem; }
.tf-tile[data-value="8"] .tf-tile-inner { background: #F4A259; color: #ffffff; font-size: 1.6rem; }
.tf-tile[data-value="16"] .tf-tile-inner { background: #F0834A; color: #ffffff; font-size: 1.5rem; }
.tf-tile[data-value="32"] .tf-tile-inner { background: #E6392C; color: #ffffff; font-size: 1.5rem; }
.tf-tile[data-value="64"] .tf-tile-inner { background: #C4241A; color: #ffffff; font-size: 1.5rem; }
.tf-tile[data-value="128"] .tf-tile-inner { background: #FFD93D; color: #22314A; font-size: 1.3rem; }
.tf-tile[data-value="256"] .tf-tile-inner { background: #F6C51A; color: #22314A; font-size: 1.3rem; }
.tf-tile[data-value="512"] .tf-tile-inner { background: #35C4B8; color: #ffffff; font-size: 1.3rem; }
.tf-tile[data-value="1024"] .tf-tile-inner { background: #1FA79C; color: #ffffff; font-size: 1.1rem; }
.tf-tile[data-value="2048"] .tf-tile-inner { background: #9B7EDE; color: #ffffff; font-size: 1.1rem; }
.tf-tile[data-value="4096"] .tf-tile-inner { background: #7E5FC4; color: #ffffff; font-size: 1rem; }
.tf-tile.tf-big .tf-tile-inner { background: var(--ink); color: #ffffff; font-size: 0.9rem; }

/* --- How to play (rules from the game instructions) --- */
/* --- Fullscreen mode --- */
#game-stage:fullscreen,
#game-stage.is-ios-fullscreen {
  border-radius: 0;
  border: none;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: calc(var(--obg-vh, 1vh) * 100);
  justify-content: flex-start;
  background: var(--bg-soft);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#game-stage:fullscreen .tf-board-wrap,
#game-stage.is-ios-fullscreen .tf-board-wrap {
  width: min(70vh, 82vw);
  width: min(70dvh, 82vw);
}

@media (prefers-reduced-motion: reduce) {
  #game-stage .tf-tile {
    transition: -webkit-transform 0.1s ease-in-out, transform 0.1s ease-in-out !important;
  }
  #game-stage .tf-tile-inner.spawning,
  #game-stage .tf-tile-inner.merged {
    animation-duration: 0.2s !important;
  }
}