       }]
 
   resize: (width, height, orientation) ->
-    # Use Math.floor here to ensure the grid doesn't round up to be larger than width/height of container
-    if orientation is 'landscape'
-      gridBackgroundWidth = Math.round(height * 0.97)   # Make sure grid background size is 97% of viewport
-      @gridBackground.width gridBackgroundWidth
-      @gridBackground.height gridBackgroundWidth
-
-      # Add some margin to the grid, so it appears centered
-      margin = (height - gridBackgroundWidth - 10) / 2
-      @gridBackground.css
-        'margin': "#{margin}px 0"
-
-    else if orientation is 'portrait'
-      gridBackgroundWidth = Math.round(width * 0.97)  # grid size is 97% of viewport
-      @gridBackground.width gridBackgroundWidth
-      @gridBackground.height gridBackgroundWidth
-
-      # Add some margin to the grid, so it appears centered
-      margin = (width - gridBackgroundWidth - 10) / 2
-      @gridBackground.css
-        'margin': "0 #{margin}px"
-
-    # Set dimensions of actual grid inside the container
-    gridWidth = Math.round(gridBackgroundWidth * 0.75 / 10) * 10  # Make sure grid size is 66% of background, and is a multiple of 10
-    @grid.width gridWidth
-    @grid.height gridWidth
-
-    @blockSize = gridWidth / 10
-
-    $('.vertical.clue', @gridBackground).css
-      "width": gridWidth / 10
-      "height": gridBackgroundWidth - gridWidth
-
-    $('.horizontal.clue', @gridBackground).css
-      "width": gridBackgroundWidth - gridWidth
-      "height": gridWidth / 10
-
-    $('.minimap', @gridBackground).css
-      "width": gridBackgroundWidth - gridWidth
-      "height": gridBackgroundWidth - gridWidth
-
-    $('.blank', @grid).css
-      "width": gridWidth / 10
-      "height": gridWidth / 10
+    @width = width
+    @height = height
+    @orientation = orientation
+    @resizeGrid()
+
+  resizeGrid: ->
+    smallestDimension = if @orientation is 'landscape' then @height else @width
+    gridBackgroundSize = Math.round(smallestDimension * @GRID_BACKGROUND_SIZE_RATIO / 10) * 10
+
+    @gridBackground.width(gridBackgroundSize)
+    @gridBackground.height(gridBackgroundSize)
+
+    if @orientation is 'landscape'
+      horizontalMargin = (@height - @gridBackground.width() - 10) / 2
+      verticalMargin = (gridBackgroundSize - @gridBackground.height()) / 2
+    else if @orientation is 'portrait'
+      verticalMargin = (@width - @gridBackground.height() - 10) / 2
+      horizontalMargin = (gridBackgroundSize - @gridBackground.width()) / 2
+
+    @gridBackground.css
+      margin: "#{horizontalMargin}px #{verticalMargin}px"
+
+    gridSize = Math.round(@gridBackground.width() * @GRID_SIZE_RATIO / 10) * 10
+    @grid.width(gridSize)
+    @grid.height(gridSize)
+
+    @cellSize = gridSize / 10
+
+    @$('.vertical.clue', @gridBackground).css
+      width: @cellSize
+      height: gridBackgroundSize - gridSize
+
+    @$('.horizontal.clue', @gridBackground).css
+      width: gridBackgroundSize - gridSize
+      height: @cellSize
+
+    @$('.minimap', @gridBackground).css
+      width: gridBackgroundSize - gridSize
+      height: gridBackgroundSize - gridSize
+
+    @grid.children('div').css
+      width: @cellSize
+      height: @cellSize
 
     # Resize the icons on the game buttons to ensure correct aspect ratio
-    iconWidth = Math.round($('.actions.mark').height() * 0.5)
-    $('.actions .icon').width(iconWidth).height(iconWidth)
+    iconWidth = Math.round(@$('.actions.mark').height() * 0.5)
+    @$('.actions .icon').css
+      width: iconWidth
+      height: iconWidth
 
   # Remove event handlers and hide this view's elem
   hide: (duration = 500, callback) ->
-    # Call "super"
     super duration, callback
 
     # Do all this stuff after transition offscreen

        'mousedown': 'onActionStart'
        'mouseup': 'onActionEnd'

  difficulty: "easy"
  level: 0


    @grid = @elem.find('.grid')
    @gridBackground = @elem.find('.grid-background')

  # Triggered on mousedown or touchstart
  onActionStart: (e) ->
    e.preventDefault()
