/* ============================================================
   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;
  border-radius: 8px;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  transition: left 0.12s ease, top 0.12s ease;
  z-index: 2;
}
.tf-tile.spawning {
  animation: tf-pop 0.16s ease;
}
.tf-tile.merged {
  animation: tf-merge-pop 0.16s ease;
  z-index: 3;
}

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

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

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