:root {
  --grid-size: 320px;
  --cell-size: 70px;
  --gap: 10px;
  --bg-color: #121212;
  --grid-bg: rgba(255, 255, 255, 0.1);
  --cell-bg: rgba(255, 255, 255, 0.05);
  --gold: #ffd700;
  --pink: #ff66b2;
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; touch-action: none; }

body {
  font-family: 'Outfit', 'M PLUS Rounded 1c', sans-serif;
  background-color: var(--bg-color); color: #fff;
  height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center;
}

#app {
  width: 100%; height: 100%; max-width: 500px;
  background: url('bg.png') center/cover no-repeat;
  display: flex; flex-direction: column; align-items: center; padding: 20px; position: relative;
}

#app::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(18, 18, 18, 0.85); backdrop-filter: blur(10px); z-index: 1;
}

header, .game-container, .dpad, .instruction { position: relative; z-index: 2; }

/* GLOBAL HUB BUTTON */
.back-link {
  position: absolute !important; top: 15px !important; left: 15px !important; z-index: 9999 !important;
  background: rgba(18, 18, 18, 0.8) !important; color: var(--gold) !important;
  padding: 8px 16px !important; border-radius: 20px !important; font-weight: 800 !important;
  text-decoration: none !important; font-size: 0.8rem !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important; box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
  transition: all 0.2s ease !important;
}

header {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 50px; margin-bottom: 22px;
}

.logo { font-size: 2.25rem; font-weight: 900; line-height: 1; text-shadow: 0 0 15px var(--pink); color: #fff; }
.logo span { color: var(--pink); }

.scores { display: grid; grid-template-columns: repeat(2, minmax(78px, 1fr)); gap: 8px; }
.score-box {
  min-width: 0; background: rgba(255, 255, 255, 0.1); padding: 6px 8px; border-radius: 8px;
  text-align: center; font-size: 0.68rem; font-weight: 800; color: #aaa;
}
.score-box span { display: block; font-size: 1rem; color: #fff; font-weight: 900; line-height: 1.1; }

.game-container {
  width: var(--grid-size); height: var(--grid-size);
  background: var(--grid-bg); border-radius: 10px; position: relative;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255,255,255,0.1);
}

.grid-background {
  display: grid; grid-template-columns: repeat(4, var(--cell-size)); grid-template-rows: repeat(4, var(--cell-size));
  gap: var(--gap); padding: var(--gap); width: 100%; height: 100%;
}

.grid-cell { background: var(--cell-bg); border-radius: 6px; }

.tile-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
}

.tile {
  position: absolute; width: var(--cell-size); height: var(--cell-size);
  background: #fff; color: #000; font-weight: 900; font-size: 2rem;
  display: flex; justify-content: center; align-items: center; border-radius: 6px;
  transition: transform 0.1s ease-in-out;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.3);
  animation: pop 0.18s ease-in-out;
}

@keyframes pop {
  0% { opacity: 0.2; scale: 0.84; }
  50% { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

/* Colors for tiles */
.tile-2 { background: #eee4da; }
.tile-4 { background: #ede0c8; }
.tile-8 { background: #f2b179; color: #fff; }
.tile-16 { background: #f59563; color: #fff; }
.tile-32 { background: #f67c5f; color: #fff; }
.tile-64 { background: #f65e3b; color: #fff; }
.tile-128 { background: #edcf72; color: #fff; font-size: 1.5rem; box-shadow: 0 0 15px var(--gold); }
.tile-256 { background: #edcc61; color: #fff; font-size: 1.5rem; box-shadow: 0 0 20px var(--gold); }
.tile-512 { background: #edc850; color: #fff; font-size: 1.5rem; box-shadow: 0 0 25px var(--gold); }
.tile-1024 { background: #edc53f; color: #fff; font-size: 1.2rem; box-shadow: 0 0 30px var(--gold); }
.tile-2048 { background: #edc22e; color: #fff; font-size: 1.2rem; box-shadow: 0 0 40px var(--gold); }

.dpad {
  width: min(320px, 100%);
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.dpad button {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0,0,0,0.24);
}

.dpad button:active {
  transform: translateY(2px);
  background: var(--pink);
}

.instruction { margin-top: 16px; text-align: center; color: #bbb; line-height: 1.5; font-size: 0.86rem; }

.overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8); display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-radius: 10px; z-index: 50; backdrop-filter: blur(5px);
}
.overlay h2 { font-size: 2rem; color: var(--pink); margin-bottom: 20px; }
.overlay p { margin-bottom: 12px; font-weight: 900; color: #fff; }
.overlay button {
  min-width: 168px; margin-top: 8px; background: var(--gold); border: none; padding: 10px 30px; font-weight: 900; font-size: 1.1rem;
  border-radius: 20px; cursor: pointer; color: #000; box-shadow: 0 5px 15px rgba(255,215,0,0.4);
}
.overlay button:disabled {
  opacity: 0.5;
  cursor: default;
}
.hidden { display: none !important; }

@media (max-width: 420px) {
  #app { padding: 16px 12px; }
  header { margin-top: 46px; margin-bottom: 16px; align-items: flex-start; }
  .logo { font-size: 1.8rem; }
  .scores { grid-template-columns: repeat(2, 74px); gap: 6px; }
  .score-box { padding: 5px 6px; font-size: 0.62rem; }
  .score-box span { font-size: 0.9rem; }
  .instruction { font-size: 0.78rem; }
}

@media (max-height: 700px) {
  :root {
    --grid-size: 280px;
    --cell-size: 61px;
    --gap: 7px;
  }

  header { margin-top: 42px; margin-bottom: 12px; }
  .dpad { margin-top: 12px; gap: 6px; }
  .dpad button { min-height: 38px; }
  .instruction { margin-top: 10px; font-size: 0.74rem; }
}

@media (max-width: 360px) {
  :root {
    --grid-size: 288px;
    --cell-size: 63px;
    --gap: 7px;
  }

  .scores { grid-template-columns: repeat(2, 70px); }
}