/* ===== Базовые переменные (без дизайна - только функциональные значения) ===== */
:root {
  --cell-size: 90px;
  --gap-size: 10px;
  --bg: #e1dbed;
  --text: #252534;
  --border: #ccc;
  --board-bg: #bbb;
  --cell-bg: #ddd;
  --anim-duration: 120ms;
}

@media (max-width: 480px) {
  :root {
    --cell-size: 68px;
    --gap-size: 8px;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
}

.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.header_title {
  font-size: 1.6rem;
  margin: 0;
}
.tile[data-value="2"]    { background: #e2daee; color: #584430; }
.tile[data-value="4"]    { background: #e4c8ed; color: #584430; }
.tile[data-value="8"]    { background: #b190e3; color: #fff; }
.tile[data-value="16"]   { background: #9f6ad1; color: #fff; }
.tile[data-value="32"]   { background: #b45ad2; color: #fff; }
.tile[data-value="64"]   { background: #9433f5; color: #fff; }
.tile[data-value="128"]  { background: #7418d0e6; color: #fff; font-size: calc(var(--cell-size) * 0.32); }
.tile[data-value="256"]  { background: #e190d5; color: #fff; font-size: calc(var(--cell-size) * 0.32); }
.tile[data-value="512"]  { background: #d076c9; color: #fff; font-size: calc(var(--cell-size) * 0.32); }
.tile[data-value="1024"] { background: #cf5eb8; color: #fff; font-size: calc(var(--cell-size) * 0.28); }
.tile[data-value="2048"] { background: #c544ad; color: #fff; font-size: calc(var(--cell-size) * 0.28); }
.tile[data-value="4096"] { background: #e79c62; color: #fff; font-size: calc(var(--cell-size) * 0.28); }
.tile[data-value="8192"] { background: #d97334; color: #fff; font-size: calc(var(--cell-size) * 0.28); }
.tile[data-value="16384"] { background: #bd4b16; color: #fff; font-size: calc(var(--cell-size) * 0.24); }
.tile[data-value="32768"] { background: #e94127d2; color: #fff; font-size: calc(var(--cell-size) * 0.24); }
.tile[data-value="65536"] { background: #ff0000d2; color: #fff; font-size: calc(var(--cell-size) * 0.24); }

.scoreboard {
  display: flex;
  gap: 8px;
}

.score-box {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: center;
  min-width: 70px;
}
.score-box_label { display: block; font-size: 0.65rem; text-transform: uppercase; color: #666; }
.score-box_value { display: block; font-size: 1.1rem; font-weight: bold; }

.header_actions { display: flex; gap: 6px; flex-wrap: wrap; }

.btn {
  border: 1px solid var(--border);
  background: #fff;
  padding: 7px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn:hover { background: #f0f0f0; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--primary { background: #333; color: #fff; border-color: #333; }
.btn--primary:hover { background: #111; }

.hint {
  font-size: 0.8rem;
  color: #666;
  margin: 4px 0 12px;
}

.game-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.game-container {
  position: relative;
  width: calc(var(--cell-size) * 4 + var(--gap-size) * 5);
  height: calc(var(--cell-size) * 4 + var(--gap-size) * 5);
  background: var(--board-bg);
  padding: var(--gap-size);
}

.grid-bg {
  position: absolute;
  inset: var(--gap-size);
  display: grid;
  grid-template-columns: repeat(4, var(--cell-size));
  grid-template-rows: repeat(4, var(--cell-size));
  gap: var(--gap-size);
}
.grid-cell { background: var(--cell-bg); }

.tiles-layer {
  position: absolute;
  inset: var(--gap-size);
}

.tile {
  position: absolute;
  width: var(--cell-size);
  height: var(--cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: calc(var(--cell-size) * 0.38);
  color: #222;
  background: #eee;
  transition: transform var(--anim-duration) ease-in-out;
  will-change: transform;
}

.tile--pop {
  animation: tile-pop var(--anim-duration) ease-in-out;
}
.tile--new {
  animation: tile-appear var(--anim-duration) ease-in-out;
}

@keyframes tile-pop {
  0% { transform-origin: center; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes tile-appear {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.tile_inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-over-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
}
.game-over-overlay_message { font-size: 1.2rem; font-weight: bold; margin: 0; }
.game-over-overlay_input {
  width: 80%;
  max-width: 240px;
  padding: 8px;
  border: 1px solid var(--border);
  font-size: 0.9rem;
}
.game-over-overlay_actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.mobile-controls {
  display: none;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 56px);
  gap: 6px;
  justify-content: center;
}
.mobile-controls.is-hidden { display: none !important; }

.ctrl {
  border: 1px solid var(--border);
  background: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}
.ctrl:active { background: #eee; }
.ctrl--up    { grid-column: 2; grid-row: 1; }
.ctrl--left  { grid-column: 1; grid-row: 2; }
.ctrl--down  { grid-column: 2; grid-row: 2; }
.ctrl--right { grid-column: 3; grid-row: 2; }

@media (max-width: 768px) {
  .mobile-controls { display: grid; }
}

#leaderboardEmptyp[hidden] {
  display: none;
}
#gameOverOverlay[hidden]{
  display: none;
}

.modal[hidden] {
  display: none;
}
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.modal_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.modal_content {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  padding: 20px;
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}
.modal_close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
  font-size: 1.3rem;
  cursor: pointer;
}

.modal_title { margin: 0 0 12px; font-size: 1.1rem; }

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.leaderboard-table th,
.leaderboard-table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 4px;
  text-align: left;
}
.leaderboard-empty { color: #666; font-size: 0.9rem; }

/* ===== Адаптивность общего каркаса ===== */
@media (max-width: 480px) {
  .header { flex-direction: column; align-items: flex-start; }
  .app { padding: 10px; }
}