Merge branch 'master' into production

app/Router.coffee

@@ -193,6 +193,8 @@ module.exports = class CocoRouter extends Backbone.Router
 
   onNavigate: (e) ->
     manualView = e.view or e.viewClass
+    if (e.route is document.location.pathname) and not manualView
+      return document.location.reload()
     @navigate e.route, {trigger: not manualView}
     return unless manualView
     if e.viewClass

app/initialize.coffee

@@ -76,7 +76,7 @@ setUpMoment = ->
 
 initializeUtilityServices = ->
   services = [
-    './lib/services/filepicker'
+    #'./lib/services/filepicker'  # Not until needed
     './lib/services/segmentio'
   ]
 
@@ -102,7 +102,7 @@ watchForErrors = ->
     #msg += "\nStack: #{stack}" if stack = error?.stack
     unless webkit?.messageHandlers  # Don't show these notys on iPad
       noty text: message, layout: 'topCenter', type: 'error', killer: false, timeout: 5000, dismissQueue: true, maxVisible: 3, callback: {onClose: -> --currentErrors}
-    Backbone.Mediator.publish 'application:error', message: msg  # For iOS app
+    Backbone.Mediator.publish 'application:error', message: "Line #{line} of #{url}:\n#{msg}"  # For iOS app
 
 window.addIPadSubscription = (channel) ->
   window.iPadSubscriptions[channel] = true

app/lib/God.coffee

@@ -34,8 +34,15 @@ module.exports = class God extends CocoClass
       angels: []
       busyAngels: []  # Busy angels will automatically register here.
 
+    # Determine how many concurrent Angels/web workers to use at a time
     # ~20MB per idle worker + angel overhead - every Angel maps to 1 worker
-    angelCount = options.maxAngels ? 2  # How many concurrent Angels/web workers to use at a time
+    if options.maxAngels?
+      angelCount = options.maxAngels
+    else if window.application.isIPadApp
+      angelCount = 1
+    else
+      angelCount = 2
+
     # Don't generate all Angels at once.
     _.delay (=> new Angel @angelsShare unless @destroyed), 250 * i for i in [0 ... angelCount]
 

app/lib/LevelSetupManager.coffee

@@ -0,0 +1,83 @@
+CocoClass = require 'lib/CocoClass'
+PlayHeroesModal = require 'views/play/modal/PlayHeroesModal'
+InventoryModal = require 'views/game-menu/InventoryModal'
+LevelSession = require 'models/LevelSession'
+SuperModel = require 'models/SuperModel'
+
+module.exports = class LevelSetupManager extends CocoClass
+
+  constructor: (@options) ->
+    super()
+    @supermodel = new SuperModel()
+    @session = @options.session
+    if @session
+      @fillSessionWithDefaults()
+    else
+      @loadSession(@supermodel)
+
+    # build modals and prevent them from disappearing.
+    @heroesModal = new PlayHeroesModal({supermodel: @supermodel, session: @session, confirmButtonI18N: 'play.next', levelID: options.levelID})
+    @inventoryModal = new InventoryModal({supermodel: @supermodel, session: @session, levelID: options.levelID})
+    @heroesModalDestroy = @heroesModal.destroy
+    @inventoryModalDestroy = @inventoryModal.destroy
+    @heroesModal.destroy = @inventoryModal.destroy = _.noop
+    @listenTo @heroesModal, 'confirm-click', @onHeroesModalConfirmClicked
+    @listenToOnce @heroesModal, 'hero-loaded', @onceHeroLoaded
+    @listenTo @inventoryModal, 'choose-hero-click', @onChooseHeroClicked
+    @listenTo @inventoryModal, 'play-click', @onInventoryModalPlayClicked
+
+  loadSession: (supermodel) ->
+    url = "/db/level/#{@options.levelID}/session"
+    #url += "?team=#{@team}" if @options.team  # TODO: figure out how to get the teams for multiplayer PVP hero style
+    @session = new LevelSession().setURL url
+    @listenToOnce @session, 'sync', ->
+      @session.url = -> '/db/level.session/' + @id
+      @fillSessionWithDefaults()
+    supermodel.loadModel(@session, 'level_session').model
+
+  fillSessionWithDefaults: ->
+    heroConfig = _.merge {}, me.get('heroConfig'), @session.get('heroConfig')
+    @session.set('heroConfig', heroConfig)
+
+  open: ->
+    firstModal = if @options.hadEverChosenHero then @inventoryModal else @heroesModal
+    @options.parent.openModalView(firstModal)
+    #    @inventoryModal.onShown() # replace?
+    Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'game-menu-open', volume: 1
+
+
+  #- Modal events
+
+  onceHeroLoaded: (e) ->
+    @inventoryModal.setHero(e.hero)
+
+  onHeroesModalConfirmClicked: (e) ->
+    @options.parent.openModalView(@inventoryModal)
+    @inventoryModal.render()
+    @inventoryModal.didReappear()
+    @inventoryModal.onShown()
+    @inventoryModal.setHero(e.hero)
+    window.tracker?.trackEvent 'Play Level Modal', Action: 'Choose Inventory'
+
+  onChooseHeroClicked: ->
+    @options.parent.openModalView(@heroesModal)
+    @heroesModal.render()
+    @heroesModal.didReappear()
+    @inventoryModal.endHighlight()
+    window.tracker?.trackEvent 'Play Level Modal', Action: 'Choose Hero'
+
+  onInventoryModalPlayClicked: ->
+    @navigatingToPlay = true
+    PlayLevelView = require 'views/play/level/PlayLevelView'
+    LadderView = require 'views/play/ladder/LadderView'
+    viewClass = if @options.levelPath is 'ladder' then LadderView else PlayLevelView
+    Backbone.Mediator.publish 'router:navigate', {
+      route: "/play/#{@options.levelPath || 'level'}/#{@options.levelID}"
+      viewClass: viewClass
+      viewArgs: [{supermodel: @supermodel}, @options.levelID]
+    }
+
+  destroy: ->
+    @heroesModalDestroy.call @heroesModal unless @heroesModal.destroyed
+    @inventoryModalDestroy.call @inventoryModal unless @inventoryModal.destroyed
+    super()

app/lib/surface/Lank.coffee

@@ -638,8 +638,9 @@ module.exports = Lank = class Lank extends CocoClass
 
   onDialogue: (e) ->
     return unless @thang?.id is e.spriteID
-    label = @addLabel 'dialogue', Label.STYLE_DIALOGUE
-    label.setText e.blurb or '...'
+    unless @thang?.id is 'Hero Placeholder'  # Don't show these for heroes, because they aren't actually first-person, just LevelDialogueView narration
+      label = @addLabel 'dialogue', Label.STYLE_DIALOGUE
+      label.setText e.blurb or '...'
     sound = e.sound ? AudioPlayer.soundForDialogue e.message, @thangType.get 'soundTriggers'
     @dialogueSoundInstance?.stop()
     if @dialogueSoundInstance = @playSound sound, false
@@ -672,12 +673,12 @@ module.exports = Lank = class Lank extends CocoClass
     # rather than an each-thang-that-shows-gold-per-team thing.
     return unless @thang
     return if @thang.gold is @lastGold
-    gold = Math.floor @thang.gold
+    gold = Math.floor @thang.gold ? 0
     if @thang.world.age is 0
       gold = @thang.world.initialTeamGold[@thang.team].gold
     return if gold is @lastGold
     @lastGold = gold
-    Backbone.Mediator.publish 'surface:gold-changed', {team: @thang.team, gold: gold, goldEarned: Math.floor(@thang.goldEarned)}
+    Backbone.Mediator.publish 'surface:gold-changed', {team: @thang.team, gold: gold, goldEarned: Math.floor(@thang.goldEarned ? 0)}
 
   playSounds: (withDelay=true, volume=1.0) ->
     for event in @thang.currentEvents ? []

app/lib/surface/LankBoss.coffee

@@ -230,11 +230,12 @@ module.exports = class LankBoss extends CocoClass
 
   cacheObstacles: (updatedObstacles=null) ->
     return if @cachedObstacles and not updatedObstacles
-    wallLanks = (lank for lank in @lankArray when lank.thangType?.get('name').search(/(dungeon|indoor).wall/i) isnt -1)
+    lankArray = @lankArray
+    wallLanks = (lank for lank in lankArray when lank.thangType?.get('name').search(/(dungeon|indoor).wall/i) isnt -1)
     return if _.any (s.stillLoading for s in wallLanks)
     walls = (lank.thang for lank in wallLanks)
     @world.calculateBounds()
-    wallGrid = new Grid walls, @world.size()...
+    wallGrid = new Grid walls, @world.width, @world.height
     if updatedObstacles
       possiblyUpdatedWallLanks = (lank for lank in wallLanks when _.find updatedObstacles, (w2) -> lank is w2 or (Math.abs(lank.thang.pos.x - w2.thang.pos.x) + Math.abs(lank.thang.pos.y - w2.thang.pos.y)) <= 16)
     else
@@ -353,7 +354,7 @@ module.exports = class LankBoss extends CocoClass
         foundExactMatch = true
         @pendingFlags.splice(i, 1)
         @removeLank pendingFlag
-    e.sprite.sprite.cursor = if @flagCursorLank then 'crosshair' else 'pointer'
+    e.sprite.sprite?.cursor = if @flagCursorLank then 'crosshair' else 'pointer'
     null
 
   onRemoveSelectedFlag: (e) ->

app/lib/world/names.coffee

@@ -69,6 +69,10 @@ module.exports.thangNames = thangNames =
     'Allankrita'
     'Kay'
     'Shannon'
+    'Scarlett'
+    'Natasha'
+    'Aphrodite'
+    'Gabrielle'
   ]
   'Peasant M': [
     'Yorik'
@@ -88,6 +92,10 @@ module.exports.thangNames = thangNames =
     'Paps'
     'Hodor'
     'James'
+    'Merek'
+    'Brom'
+    'Tybalt'
+    'Fendrel'
   ]
   'Peasant F': [
     'Hilda'
@@ -101,6 +109,18 @@ module.exports.thangNames = thangNames =
     'Regan'
     'Giselle'
     'Bernadette'
+    'Millicent'
+    'Anastas'
+    'Thea'
+    'Ellyn'
+    'Alianor'
+    'Anastas'
+    'Cristiana'
+    'Helena'
+    'Alexia'
+    'Katelyn'
+    'Rose'
+    
   ]
   'Archer F': [
     'Phoebe'

app/lib/world/world.coffee

@@ -99,9 +99,9 @@ module.exports = class World
     continueLaterFn = =>
       @loadFrames(loadedCallback, errorCallback, loadProgressCallback, preloadedCallback, skipDeferredLoading, loadUntilFrame) unless @destroyed
     if @realTime and not @countdownFinished
-      if @levelID in ['the-first-kithmaze', 'haunted-kithmaze', 'the-second-kithmaze', 'the-final-kithmaze', 'the-gauntlet', 'winding-trail', 'thornbush-farm']
+      if @levelID in ['the-first-kithmaze', 'haunted-kithmaze', 'the-second-kithmaze', 'the-final-kithmaze', 'the-gauntlet', 'winding-trail', 'thornbush-farm', 'a-fiery-trap']
         @realTimeSpeedFactor = 5
-      else if @levelID in ['forgotten-gemsmith', 'descending-further', 'tactical-strike', 'kithgard-gates']
+      else if @levelID in ['forgetful-gemsmith', 'descending-further', 'tactical-strike', 'kithgard-gates', 'ogre-encampment', 'woodland-cleaver', 'shield-rush', 'peasant-protection', 'munchkin-swarm']
         @realTimeSpeedFactor = 3
       else
         @realTimeSpeedFactor = 1

app/locale/en.coffee

@@ -198,6 +198,7 @@
     failing: "Failing"
     action_timeline: "Action Timeline"
     click_to_select: "Click on a unit to select it."
+    reload: "Reload"
     reload_title: "Reload All Code?"
     reload_really: "Are you sure you want to reload this level back to the beginning?"
     reload_confirm: "Reload All"
@@ -233,13 +234,14 @@
     tome_select_a_thang: "Select Someone for "
     tome_available_spells: "Available Spells"
     tome_your_skills: "Your Skills"
-    hud_continue: "Continue (shift+space)"
+    tome_current_method: "Current Method"
     hud_continue_short: "Continue"
     code_saved: "Code Saved"
     skip_tutorial: "Skip (esc)"
     keyboard_shortcuts: "Key Shortcuts"
     loading_ready: "Ready!"
     loading_start: "Start Level"
+    problem_alert_title: "Fix Your Code"
     time_current: "Now:"
     time_total: "Max:"
     time_goto: "Go to:"
@@ -446,7 +448,7 @@
     enter: "Enter"
     escape: "Escape"
     shift: "Shift"
-    cast_spell: "Cast current spell."
+    run_code: "Run current code."
     run_real_time: "Run in real time."
     continue_script: "Continue past current script."
     skip_scripts: "Skip past all skippable scripts."

app/locale/ru.coffee

@@ -28,7 +28,7 @@ module.exports = nativeDescription: "русский", englishDescription: "Russi
     about: "О нас"
     contact: "Контакты"
     twitter_follow: "Подписаться"
-#    teachers: "Teachers"
+    teachers: "Учителям"
 
   modal:
     close: "Закрыть"
@@ -51,11 +51,11 @@ module.exports = nativeDescription: "русский", englishDescription: "Russi
     players: "игроки" # Hover over a level on /play
     hours_played: "часов сыграно" # Hover over a level on /play
     items: "Предметы" # Tooltip on item shop button from /play
-#    unlock: "Unlock" # For purchasing items and heroes
-#    confirm: "Confirm"
+    unlock: "Разблокировать" # For purchasing items and heroes
+    confirm: "Подтвердить"
 #    owned: "Owned" # For items you own
 #    locked: "Locked"
-#    skills_granted: "Skills Granted" # Property documentation details
+    skills_granted: "Умение получено" # Property documentation details
     heroes: "Герои" # Tooltip on hero shop button from /play
     achievements: "Достижения" # Tooltip on achievement list button from /play
     account: "Аккаунт" # Tooltip on account button from /play
@@ -81,8 +81,8 @@ module.exports = nativeDescription: "русский", englishDescription: "Russi
     campaign_player_created_description: "... в которых вы сражаетесь с креативностью ваших друзей <a href=\"/contribute#artisan\">Ремесленников</a>."
     campaign_classic_algorithms: "Классические принципы"
     campaign_classic_algorithms_description: "... которые чаще всего встречаются в копьютерных науках."
-#    campaign_forest: "Forest Campaign"
-#    campaign_dungeon: "Dungeon Campaign"
+    campaign_forest: "Лесная кампания"
+    campaign_dungeon: "Кампания в подземелье"
 
   login:
     sign_up: "Создать аккаунт"
@@ -109,12 +109,12 @@ module.exports = nativeDescription: "русский", englishDescription: "Russi
 #    recovery_sent: "Recovery email sent."
 
   items:
-#    primary: "Primary"
-#    secondary: "Secondary"
+    primary: "Основное"
+    secondary: "Второстепенное"
     armor: "Броня"
     accessories: "Аксессуары"
     misc: "Разное"
-#    books: "Books"
+    books: "Книги"
 
   common:
     loading: "Загрузка..."
@@ -183,7 +183,7 @@ module.exports = nativeDescription: "русский", englishDescription: "Russi
   play_level:
     done: "Готово"
     home: "На главную" # Not used any more, will be removed soon.
-#    level: "Level" # Like "Level: Dungeons of Kithgard"
+    level: "Уровень" # Like "Level: Dungeons of Kithgard"
     skip: "Пропустить"
     game_menu: "Меню игры"
     guide: "Руководство"
@@ -206,13 +206,13 @@ module.exports = nativeDescription: "русский", englishDescription: "Russi
     victory_rate_the_level: "Оцените уровень:" # Only in old-style levels.
     victory_return_to_ladder: "Вернуться к ладдеру"
     victory_play_continue: "Продолжить"
-#    victory_play_skip: "Skip Ahead"
+    victory_play_skip: "Пропустить"
     victory_play_next_level: "Следующий уровень"
-#    victory_play_more_practice: "More Practice"
-#    victory_play_too_easy: "Too Easy"
-#    victory_play_just_right: "Just Right"
-#    victory_play_too_hard: "Too Hard"
-#    victory_saving_progress: "Saving Progress"
+    victory_play_more_practice: "Попрактиковаться еще"
+    victory_play_too_easy: "Очень легко"
+    victory_play_just_right: "То, что надо"
+    victory_play_too_hard: "Очень сложно"
+    victory_saving_progress: "Процесс сохранения"
     victory_go_home: "На главную" # Only in old-style levels.
     victory_review: "Расскажите нам больше!" # Only in old-style levels.
     victory_hour_of_code_done: "Вы закончили?"
@@ -224,18 +224,18 @@ module.exports = nativeDescription: "русский", englishDescription: "Russi
     tome_cast_button_castable: "Читать заклинание" # Temporary, if tome_cast_button_run isn't translated.
     tome_cast_button_casting: "Заклинание читается" # Temporary, if tome_cast_button_running isn't translated.
     tome_cast_button_cast: "Заклинание прочитано" # Temporary, if tome_cast_button_ran isn't translated.
-#    tome_cast_button_run: "Run"
-#    tome_cast_button_running: "Running"
-#    tome_cast_button_ran: "Ran"
-#    tome_submit_button: "Submit"
-#    tome_reload_method: "Reload original code for this method" # Title text for individual method reload button.
-#    tome_select_method: "Select a Method"
-#    tome_see_all_methods: "See all methods you can edit" # Title text for method list selector (shown when there are multiple programmable methdos).
+    tome_cast_button_run: "Запустить"
+    tome_cast_button_running: "В процессе"
+    tome_cast_button_ran: "Запущен"
+    tome_submit_button: "Отправить"
+    tome_reload_method: "Загрузить оригинальный код для этого метода" # Title text for individual method reload button.
+    tome_select_method: "Выбрать метод"
+    tome_see_all_methods: "Показать все методы, доступные для редактирования" # Title text for method list selector (shown when there are multiple programmable methdos).
     tome_select_a_thang: "Выбрать кого-нибудь для "
     tome_available_spells: "Доступные заклинания"
     tome_your_skills: "Ваши навыки"
     hud_continue: "Продолжить (Shift+Пробел)"
-#    hud_continue_short: "Continue"
+    hud_continue_short: "Продолжить"
     code_saved: "Код сохранен"
     skip_tutorial: "Пропуск (Esc)"
     keyboard_shortcuts: "Горячие клавиши"
@@ -285,22 +285,22 @@ module.exports = nativeDescription: "русский", englishDescription: "Russi
     options_tab: "Настройки"
     guide_tab: "Руководство"
     multiplayer_tab: "Мультиплеер"
-#    auth_tab: "Sign Up"
+    auth_tab: "Зарегистрироваться"
     inventory_caption: "Оденьте своего героя"
     choose_hero_caption: "Выбор героя, языка"
-#    save_load_caption: "... and view history"
+    save_load_caption: "... и посмотреть историю"
     options_caption: "Выбор настроек"
 #    guide_caption: "Docs and tips"
     multiplayer_caption: "Играй с друзьями!"
-#    auth_caption: "Save your progress."
+    auth_caption: "Сохранить прогресс."
 
   inventory:
     choose_inventory: "Выбрать предметы"
-#    equipped_item: "Equipped"
-#    available_item: "Available"
-#    should_equip: "(double-click to equip)"
-#    equipped: "(equipped)"
-#    locked: "(locked)"
+    equipped_item: "Выбранный"
+    available_item: "Доступный"
+    should_equip: "(двойной клик чтобы одеть)"
+    equipped: "(выбранный)"
+    locked: "(заблокированный)"
 
   choose_hero:
     choose_hero: "Выберите героя"
@@ -314,13 +314,13 @@ module.exports = nativeDescription: "русский", englishDescription: "Russi
     io_blurb: "Простой, но непонятный."
     status: "Статус"
     weapons: "Оружие"
-#    attack: "Damage" # Can also translate as "Attack"
+    attack: "Урон" # Can also translate as "Attack"
     health: "Жизнь"
     speed: "Скорость"
-#    regeneration: "Regeneration"
-#    range: "Range" # As in "attack or visual range"
-#    blocks: "Blocks" # As in "this shield blocks this much damage"
-#    skills: "Skills"
+    regeneration: "Регенерация"
+    range: "Зона" # As in "attack or visual range"
+    blocks: "Блокирует" # As in "this shield blocks this much damage"
+    skills: "Умения"
 
   save_load:
     granularity_saved_games: "Сохранено"

app/models/Level.coffee

@@ -100,6 +100,7 @@ module.exports = class Level extends CocoModel
           levelThangComponent.config.pos ?= {}
           levelThangComponent.config.pos.x = placeholderConfig.pos.x
           levelThangComponent.config.pos.y = placeholderConfig.pos.y
+          levelThangComponent.config.rotation = placeholderConfig.rotation
         else if placeholderConfig.team  # Pull in Allied team
           levelThangComponent.config.team = placeholderConfig.team
         else if placeholderConfig.significantProperty  # For levels where we cheat on what counts as an enemy
@@ -108,6 +109,8 @@ module.exports = class Level extends CocoModel
           # Take the ThangType default Programmable and merge level-specific Component config into it
           copy = $.extend true, {}, placeholderConfig
           levelThangComponent.config = _.merge copy, levelThangComponent.config
+        else if placeholderConfig.extraHUDProperties
+          levelThangComponent.config.extraHUDProperties = _.union(levelThangComponent.config.extraHUDProperties ? [], placeholderConfig.extraHUDProperties)
 
     if isHero
       if equips = _.find levelThang.components, {original: LevelComponent.EquipsID}

app/models/User.coffee

@@ -91,6 +91,16 @@ module.exports = class User extends CocoModel
     application.tracker.identify branchingGroup: @branchingGroup unless me.isAdmin()
     @branchingGroup
 
+  getCastButtonTextGroup: ->
+    # Group 0 is original behavior
+    unless @castButtonTextGroup?
+      if me.isAdmin()
+        @castButtonTextGroup = 0
+      else
+        @castButtonTextGroup = me.get('testGroupNumber') % 7
+        application.tracker.identify castButtonTextGroup: @castButtonTextGroup
+    @castButtonTextGroup
+
   getHighlightArrowSoundGroup: ->
     return @highlightArrowGroup if @highlightArrowGroup
     group = me.get('testGroupNumber') % 8

app/schemas/subscriptions/tome.coffee

@@ -85,9 +85,6 @@ module.exports =
     problems: {type: 'array'}
     isCast: {type: 'boolean'}
 
-  'tome:thang-list-entry-popover-shown': c.object {title: 'Thang List Entry Popover Shown', description: 'Published when we show the popover for a thang in the master list', required: ['entry']},
-    entry: {type: 'object'}
-
   'tome:spell-shown': c.object {title: 'Spell Shown', description: 'Published when we show a spell', required: ['thang', 'spell']},
     thang: {type: 'object'}
     spell: {type: 'object'}
@@ -126,3 +123,10 @@ module.exports =
 
   'tome:winnability-updated': c.object {title: 'Winnability Updated', description: 'When we think we can now win (or can no longer win), we may want to emphasize the submit button versus the run button (or vice versa), so this fires when we get new goal states (even preloaded goal states) suggesting success or failure change.', required: ['winnable']},
     winnable: {type: 'boolean'}
+
+  # Problem Alert
+  'tome:show-problem-alert': c.object {title: 'Show Problem Alert', description: 'A problem alert needs to be shown.', required: ['problem']},
+    problem: {type: 'object'}
+    lineOffsetPx: {type: ['number', 'undefined']}
+  'tome:hide-problem-alert': c.object {title: 'Hide Problem Alert'}
+  'tome:jiggle-problem-alert': c.object {title: 'Jiggle Problem Alert'}

app/styles/base.sass

@@ -312,9 +312,56 @@ kbd
   .arrow
     display: none
 
+.btn.btn-illustrated
+  background: 0
+  border: 0
+  border-radius: 0
+  @include box-shadow(none)
+  border-image: url(/images/common/button-background-active-border.png) 14 20 20 20 fill round
+  border-width: 7px 10px 10px 10px
+  padding: 0
+  font-family: Open Sans Condensed
+  text-transform: uppercase
+  font-weight: bold
+  color: rgb(248, 197, 146)
+
+  &:active
+    border-image: url(/images/common/button-background-pressed-border.png) 14 16 16 20 fill round
+    padding: 2px 0 0 2px
+    border-width: 7px 8px 8px 10px
+
+  &.disabled, &:disabled
+    border-image: url(/images/common/button-background-disabled-border.png) 14 20 20 20 fill round
+    @include opacity(1)
+
+    > *
+      @include opacity(0.5)
+
+  > *
+    @include opacity(0.75)
+
+  &:hover > *
+    @include opacity(1)
+
+
 html.no-borderimage
   .popover
     border: 0
     background: transparent url(/images/level/popover_background.png)
     background-size: 100% 100%
     padding: 10px 20px
+
+  .btn.btn-illustrated
+    border: 0
+    background-image: url(/images/common/button-background-active.png)
+    background-size: 100% 100%
+    padding: 7px 10px 10px 10px
+    
+    &:active
+      background-image: url(/images/common/button-background-pressed.png)
+      padding: 9px 8px 8px 12px
+      border: 0
+
+    &.disabled, &:disabled
+      background-image: url(/images/common/button-background-disabled.png)
+

app/styles/game-menu/game-menu-modal.sass

@@ -1,88 +1,66 @@
 @import "app/styles/mixins"
 
 #game-menu-modal
+
+  //- Clear modal defaults
   
-  .close
-    // We have to style this indendently because it's not in the header (we don't have a header).
-    position: absolute
-    top: -5px
-    right: 0
-    padding: 15px
-    font-size: 28px
-    background-color: transparent
-    z-index: 1
-
-    @include opacity(0.60)
-
-    &:hover
-      @include opacity(1)
-
-  // Make room for an overlaid close button in the lower right (we don't have a footer).
-  .overlaid-close-button
-    position: absolute
-    right: 35px
-    bottom: 20px
-  
-  #inventory-view #available-equipment
-    bottom: 60px
-
   .modal-dialog
-    margin-top: 0
-    width: 963px
+    width: 820px
+    height: 570px
+    padding: 0
+    background: none
+    position: relative
+    top: 40px
 
-  .nav-tabs
-    h2
-      margin: 0
+    
+  //- Background
+  
+  #game-menu-background
+    position: absolute
+    top: -146px
+    left: -3px
+
+
+  //- Nav bar
+
+  #game-menu-nav
+    position: absolute
+    top: 53px
+    left: 42px
+    width: 178px
+
+    li
+      background: url(/images/pages/play/modal/menu-tab.png)
+      padding: 5px
+      margin: -5px 0
+      height: 80px
+      padding: 0
+      
+      &.active
+        background: url(/images/pages/play/modal/menu-tab-selected.png)
+        width: 197px
 
-    .auth-tab
       a
-        h2, em
-          pointer-events: none
-  
-  .tab-pane
-    h3:first-child
-      margin-top: 0
-  
-  // http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
-  .tabs-left
-    > .nav-tabs
-      float: left
-      width: 185px
-      border-bottom: 0
+        font-size: 18px
+        line-height: 50px
+        background: none
+        color: rgb(195,153,124)
+        font-weight: bold
+        padding: 14px 20px
+        font-family: Open Sans Condensed
+        text-transform: uppercase
+    
+        .glyphicon
+          margin-right: 6px
 
-    > .tab-content
-      padding: 0px 15px
-      margin-left: 185px
-   
-  .tab-content > .tab-pane, .pill-content > .pill-pane
-    display: none
-   
-  .tab-content > .active, .pill-content > .active
-    display: block
-   
-  .tabs-left
-    > .nav-tabs > li
-      float: none
-   
-      > a
-        min-width: 74px
-        margin-right: 0
-        margin-bottom: 0
-   
-  .tabs-left > .nav-tabs
-    border-right: 1px solid #ddd
-   
-    > li > a
-      margin-right: -1px
-      -webkit-border-radius: 4px 0 0 4px
-      -moz-border-radius: 4px 0 0 4px
-      border-radius: 4px 0 0 4px
-   
-      &:hover, &:focus
-        border-color: #eee #ddd #eee #eee
-   
-    > .active a
-      &, &:hover, &:focus
-        border-color: #ddd transparent #ddd #ddd
-        *border-right-color: #fff
 
+  //- Tab panels
+  
+  .game-menu-tab-content
+    position: absolute
+    left: 219px
+    top: 21px
+    width: 571px
+    height: 518px
+    padding: 50px
+    overflow: scroll

app/styles/game-menu/inventory-modal.sass

@@ -19,9 +19,15 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
   @include box-shadow(0 0 10px #28f)
   z-index: 9001
 
-#inventory-view
-  position: relative
-  height: $inventoryHeight
+#inventory-modal
+  .modal-dialog
+    margin: 30px auto 0 auto
+    width: 720px
+
+    .modal-body
+      height: 450px
+      margin: 0
+
   +user-select(none)
   
   h3
@@ -34,7 +40,7 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
   #equipped
     width: $equippedWidth
     position: absolute
-    left: 0
+    left: 20px
     top: 0
     bottom: 0
     //bottom: $selectedAreaHeight + 10
@@ -197,7 +203,7 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
   #available-equipment
     width: $stashWidth
     position: absolute
-    right: 0
+    right: 20px
     top: 0 
     bottom: 0
     overflow-y: scroll

app/styles/game-menu/options-view.sass

@@ -1,45 +1,137 @@
 @import "app/styles/bootstrap/variables"
 
 #options-view
-  .select-group, .slider-group
-    display: block
-    min-height: 20px
-    margin-top: 10px
-    margin-bottom: 10px
-    padding-left: 20px
-    vertical-align: middle
+  
+  //- Volume slider
+  
+  #volume-group
+    position: relative
+    width: 100%
+    height: 25px
+    margin: 15px 0
+    
+    & > *
+      position: absolute
+      
+    .ui-slider
+      left: 40px
+      right: 40px
+      top: 4px
+      background-color: rgb(248,169,67)
+      border: 4px solid rgb(26,21,18)
+      height: 18px
+      border-radius: 18px
+      
+      .ui-slider-handle
+        background-color: rgb(26,21,18)
+        width: 28px
+        height: 28px
+        border-radius: 28px
+        top: -9px
+        outline: 0
+      
+    .glyphicon
+      font-size: 30px
+      top: -2px
+      color: rgb(26,21,18)
+      
+    .glyphicon-volume-down
+      position: absolute
+      left: 0
+      
+    .glyphicon-volume-up
+      position: absolute
+      right: 0
+    
+    
+  //- header, horizontal rule
+  
+  .hr
+    width: 100%
+    height: 10px
+    
+  h3
+    margin-top: 5px
+    color: rgb(26,21,18)
+    
 
+  //- All form groups
+  
+  .form-group
+    font-size: 16px
+    color: rgb(51,51,51)
+    padding-top: 4px
+    padding-left: 40px
+   
+  label
+    font-weight: normal
+
+  //- Check boxes
+  
+  .form-group.checkbox
+    
     label
-      font-weight: normal
-      margin-right: 20px
-      margin-bottom: 0
-
-    .slider
-      width: 200px
-
-  .form-group.radio-inline
+      position: relative
+    
     input
-      margin-left: 0px
-      margin-right: 5px
-
-    .radio-inline-parent-label
-      padding-left: 0
+      display: none
+      
+      & + .custom-checkbox
+        .glyphicon
+          display: none
+        
+      &:checked + .custom-checkbox .glyphicon
+        display: inline
+        color: rgb(248,169,67)
+        text-align: center
+        text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black
+        font-size: 14px
+        position: relative
+        top: -1px
+  
+    .custom-checkbox
+      border-radius: 2px
+      height: 27px
+      width: 27px
+      border: 4px solid rgb(26,21,18)
+      position: absolute
+      background: rgb(228,217,196)
+      text-align: center
 
+      // this undoes the padding of the form groups
+      left: -40px 
+      top: -4px
+    
 
+  //- Select boxes
+  
+  select
+    border: 3px solid black
+    text-transform: uppercase
+      
+  //.form-group.radio-inline
+  //  input
+  //    margin-left: 0px
+  //    margin-right: 5px
+  //
+  //  .radio-inline-parent-label
+  //    padding-left: 0
+  //
+  //
   #player-avatar-container
     position: relative
-    margin: 0px 0px 15px 15px
+    margin: 0 auto 40px
     width: 230px
     max-height: 230px
     border-radius: 6px
-
+  
     img.profile-photo
       width: 100%
       border-radius: 6px
-
+  
       &.saving
         opacity: 0.5
-
+  
     .profile-caption
       background-color: rgba(0, 0, 0, 0.5)
       color: white
@@ -52,7 +144,7 @@
       text-align: center
       border: 0
       font-size: 18px
-
+  
     .editable-icon
       display: block
       position: absolute
@@ -61,11 +153,11 @@
       font-size: 20px
       color: $blue
       opacity: 0.5
-
+  
     &:hover
       cursor: pointer
       box-shadow: 0px 0px 2px 1px $blue
-
+  
       .editable-icon
         opacity: 1.0
         cursor: pointer

app/styles/play/level.sass

@@ -50,12 +50,15 @@ $level-resize-transition-time: 0.5s
     #stop-real-time-playback-button
       display: block
       z-index: 20
+    #level-dialogue-view
+      display: none
 
     .level-content
       margin: 0px auto
 
   .level-content
     position: relative
+    overflow: hidden
 
   #canvas-wrapper
     top: 50px
@@ -88,7 +91,7 @@ $level-resize-transition-time: 0.5s
 
   #code-area
     @include box-sizing(border-box)
-    padding: 10px 1%
+    padding: 0px 0.9% 10px 1.4%
     width: 45%
     background: transparent url(/images/level/wood_texture.png)
     background-size: 100% 100%
@@ -97,6 +100,7 @@ $level-resize-transition-time: 0.5s
     top: 0px
     bottom: 0
     @include transition(width $level-resize-transition-time ease-in-out, right $level-resize-transition-time ease-in-out)
+    overflow: hidden
     
   // Level Docs
   .ui-effects-transfer
@@ -231,9 +235,6 @@ body.ipad #level-view
   #code-area, .footer, #thang-hud
     display: none
 
-  #goals-view
-    left: 40px
-
   #level-chat-view
     bottom: 40px
 

app/styles/play/level/control_bar.sass

@@ -15,6 +15,9 @@
   font-family: Open Sans Condensed
   font-weight: bold
 
+  &.controls-disabled
+    @include filter(brightness(50%))
+
   .levels-link-area
     position: absolute
     left: 40px

app/styles/play/level/gold.sass

@@ -5,7 +5,8 @@
   display: none
   position: absolute
   right: 46%
-  top: 42px
+  top: 62px
+  z-index: 6
   @include transition(box-shadow .2s linear)
   @include user-select(none)
   padding: 4px
@@ -17,7 +18,7 @@
     box-shadow: 2px 2px 2px black
 
   .team-gold
-    font-size: 16px
+    font-size: 18px
     margin: 0
     line-height: 20px
     color: hsla(205,0%,51%,1)

app/styles/play/level/hud.sass

@@ -1,315 +1,205 @@
 @import "app/styles/mixins"
 @import "app/styles/bootstrap/variables"
 
-#thang-hud.no-selection
-  .center
-    > *
-      display: none
-
-    .no-selection-message
-      //display: block  // we fade this in
-      margin: auto
-      width: 100%
-      height: 100%
-      text-align: center
-      background: transparent url(/images/level/no_selection_pointer.png) no-repeat 50% 40%
-      background-size: 40px 37px
-      @include opacity(75)
-
-      &:hover
-        @include opacity(100)
-
-      div
-        padding-top: 70px
-        font-size: 14px
-
 #thang-hud
   width: 55%
-  height: 120px
+  height: 80px
   position: relative
+  overflow: visible
 
-  .left-wing
+  &.controls-disabled
+    pointer-events: none
+
+    .wood-background, .hinge, .avatar-wrapper-container, .center
+      @include filter(brightness(50%))
+
+  .wood-background
     position: absolute
-    width: 50%
-    height: 100%
     left: 0
-    top: 0
-    z-index: 0
-    background-image: url(/images/level/hud_left_wing.png)
-    background-position: right
+    top: -2px
+    background: transparent url(/images/level/hud_wood_background.png)
+    background-size: auto 100%
+    width: 100%
+    height: 100px
+    z-index: 4
 
-  .right-wing
+  .hinge
     position: absolute
-    width: 50%
-    height: 100%
-    right: 0
+    top: -16px
+    background: transparent url(/images/level/hud_hinge.png)
+    width: 27px
+    height: 44px
+    background-size: contain
+    z-index: 4
+    pointer-events: none
+
+  .hinge-0
+    left: 3%
+  .hinge-1
+    left: 12%
+  .hinge-2
+    left: 86%
+    @include scaleX(-1)
+  .hinge-3
+    left: 95%
+    @include scaleX(-1)
+
+  .avatar-wrapper-container
+    position: absolute
+    width: 100px
+    height: 100px
     top: 0
-    z-index: 0
-    background-image: url(/images/level/hud_right_wing.png)
-    background-position: left
+    left: 18%
+    left: -webkit-calc(50% - (560px - 100px) / 2 - 10px)
+    left: calc(50% - (560px - 100px) / 2 - 10px)
+    z-index: 5
 
-  &.hide-hud-properties .center
-    .thang-props, .thang-actions
-      visibility: hidden
-      position: absolute
-
-  .center
-    width: 560px
-    height: 120px
-    padding: 4px 20px 0 20px
-    margin: auto
-    background-image: url(/images/level/hud_center.png)
-    color: #BEBEBE
-    font-size: 12px
-    overflow: hidden
-    z-index: 1
-    position: relative
-
-    .no-selection-message
-      display: none
-
-    .thang-canvas-wrapper, .speaker-image-wrapper
-      width: 100px
-      height: 100px
-      margin: 7px 7px 7px 22px
-      float: left
-      overflow: hidden
-      border: 1px solid #888
+    .thang-canvas-wrapper
+      width: 80px
+      height: 80px
+      position: relative
       border-radius: 4px
       @include gradient-radial-custom-stops(hsla(205,0%,74%,1), 20%, hsla(205,0%,31%,1), 70%)
-
+  
       &.team-humans
         border-color: darkred
         @include gradient-radial-custom-stops(hsla(4,80%,74%,1), 20%, hsla(4,80%,51%,1), 70%)
-
+  
       &.team-ogres
         border-color: darkblue
         @include gradient-radial-custom-stops(hsla(205,100%,74%,1), 20%, hsla(205,100%,31%,1), 70%)
-
+  
       &.team-allies, &.team-minions
         border-color: darkgreen
         @include gradient-radial-custom-stops(hsla(116,80%,74%,1), 20%, hsla(116,80%,31%,1), 70%)
+  
+      .thang-canvas
+        width: 100%
+  
+      .avatar-frame
+        position: absolute
+        left: -18%
+        top: -19%
+        width: 145%
+
+  &.hide-hud-properties .center:hover
+    // Don't allow them to hover over confusing HUD stuff until later levels
+    top: 24px
+
+  .center
+    width: 560px
+    height: 166px
+    position: absolute
+    top: 24px
+    left: 13%
+    left: -webkit-calc(50% - 560px / 2)
+    left: calc(50% - 560px / 2)
+    padding: 10px 20px 0 145px
+    background-image: url(/images/level/hud_background.png)
+    color: white
+    text-transform: uppercase
+    font-family: Open Sans Condensed
+    font-weight: bold
+    font-size: 16px
+    z-index: 4
+    @include transition(0.5s ease)
+
+    &:hover
+      top: -36px
+
+    .thang-name
+      font-size: 18px
+      margin: 10px 0 0 0
 
     .thang-props
-      margin: 8px 8px 0 0
+      margin: 24px 0 0 0
       float: left
+      @include user-select(text)
 
-      .thang-props-column
+      .prop:not([name="health"])
+        min-width: 120px
+        display: inline-block
+        line-height: 16px
+
+      &.nonexistent
+        visibility: hidden
+
+      .text-prop
+        width: 50%
+
+      .prop-label-icon
+        $iconSize: 16px
+        display: inline-block
+        width: $iconSize
+        height: $iconSize
+        margin-right: 5px
+        background: transparent url(/images/level/hud_info_icons.png) no-repeat
+        background-size: auto $iconSize
         float: left
-        width: 144px
-        height: 100px
-        @include user-select(text)
-  
-        &.nonexistent
-          visibility: hidden
 
-        .text-prop
-          width: 50%
+        &.prop-label-icon-pos
+          background-position: (-1 * $iconSize) 0px
+        &.prop-label-icon-target
+          background-position: (-2 * $iconSize) 0px
+        &.prop-label-icon-collectedThangIDs
+          background-position: (-3 * $iconSize) 0px
+        &.prop-label-icon-visualRange
+          background-position: (-4 * $iconSize) 0px
+        &.prop-label-icon-attackDamage
+          background-position: (-5 * $iconSize) 0px
+        &.prop-label-icon-attackRange, &.prop-label-icon-attackNearbyEnemyRange
+          background-position: (-6 * $iconSize) 0px
+        &.prop-label-icon-maxSpeed
+          background-position: (-7 * $iconSize) 0px
+        &.prop-label-icon-gold, &.prop-label-icon-bountyGold
+          background-position: (-8 * $iconSize) 0px
 
-        .prop-label-icon
-          $iconSize: 16px
-          display: inline-block
-          width: $iconSize
-          height: $iconSize
-          margin-right: 5px
-          background: transparent url(/images/level/hud_info_icons.png) no-repeat
-          background-size: auto $iconSize
-          float: left
-
-          &.prop-label-icon-pos
-            background-position: (-1 * $iconSize) 0px
-          &.prop-label-icon-target
-            background-position: (-2 * $iconSize) 0px
-          &.prop-label-icon-collectedThangIDs
-            background-position: (-3 * $iconSize) 0px
-          &.prop-label-icon-visualRange
-            background-position: (-4 * $iconSize) 0px
-          &.prop-label-icon-attackDamage
-            background-position: (-5 * $iconSize) 0px
-          &.prop-label-icon-attackRange, &.prop-label-icon-attackNearbyEnemyRange
-            background-position: (-6 * $iconSize) 0px
-          &.prop-label-icon-maxSpeed
-            background-position: (-7 * $iconSize) 0px
-          &.prop-label-icon-gold, &.prop-label-icon-bountyGold
-            background-position: (-8 * $iconSize) 0px
-  
-        .prop-value.bar-prop
-          width: 100px
-          display: inline-block
-          height: 6px
-          background: #ddd
-          border: 1px solid black
-          border-radius: 6px
-          overflow: hidden
-  
-          .bar
-            background: black
-            width: 100%
-            height: 100%
-  
-        .prop[name="health"] .bar
-          background: #C5362B
-  
-        .message
-          text-align: center
-          display: table
-          height: 100%
-          width: 100%
-  
-          p
-            display: table-cell
-            vertical-align: middle
-            font-size: 20px
-
-    .thang-actions
-      width: 212px
-      height: 100px
-      margin: 8px 24px 8px 0
-      float: left
-      overflow-y: auto
-      overflow-x: hidden
-
-      .table-container
-        position: relative
-
-        .progress-indicator
-          position: absolute
-          right: 45px
-          background-color: #fce
-          z-index: 1
-
-        .progress-arrow
-          width: 14px
-          height: 6px
-          top: -6px
-          // Could put top: 0 to make the arrow go inside, but it doesn't have enough contrast over the bar
-          right: 39px
-          background: transparent url(/images/level/action_timeline_indicator.png) no-repeat center
-
-        .progress-line
-          width: 1px
-          height: 100%
-          top: 0
-          background-color: #A4A198
-
-        table
-          border: 1px solid #5B5855
-          border-radius: 2px
-          line-height: 17px
-          width: 100%
-
-          tr
-            border: 1px solid #5b5855
-
-          .action-indicator
-            width: 10px
-
-          .action-label
-            width: 75px
-
-          .action-timeline
-            padding: 0
-
-            .timeline-wrapper
-              position: relative
-              width: 100%
-              height: 19px
-
-              div
-                border-radius: 1px
-                background-color: #6BA1C8
-                height: 100%
-                border-bottom: 2px groove darken(#6BA1C8, 30%)
-                border-right: 1px solid darken(#6BA1C8, 10%)
-                position: absolute
-                top: 0
-
-        .current-action
-          font-weight: bold
-
-          .action-indicator
-            background: #4B4133 url(/images/level/current_action_indicator.png) no-repeat center
-
-          td
-            background-color: #4B4133
-
-    .dialogue-area
-      opacity: 0.0
-      position: relative
-      height: 100%
-      width: 100%
-      z-index: 1
-
-      .bubble
+      .prop[name="health"]
         position: absolute
-        left: 140px
-        right: 8px
-        top: 8px
-        bottom: 0px
-        padding: 10px
-        color: black
-        font-weight: bold
-        background: #FFFFFF
-        border: black solid 1px
-        border-radius: 10px
-        font-size: 14px
+        right: 35px
+        top: 23px
+        height: 18px
         line-height: 18px
+        font-size: 18px
 
-        strong
-          color: #09B057
+        .prop-value.bar-prop
+          width: 150px
+          margin: 1px 10px 0 0
+          height: 16px
+          background: rgb(32, 27, 21)
+          padding: 4px
+          border-radius: 8px
+          border: 0
 
-        .hud-hint
-          font-weight: normal
-          color: #999
-
-        .enter
-          position: absolute
-          right: 7px
-          bottom: 7px
-          div.dot
-            background: #337
-            width: 8px
+          .bar
+            background: rgb(234, 35, 45)
             height: 8px
-            position: absolute
-            right: 8px
-            top: 9px
-            border-radius: 5px
+            border-radius: 4px
 
-        button, .alert
-          padding: 2px 5px
+        .bar-prop-value
+          vertical-align: top
 
-        .enter button.with-dot
-          padding-right: 20px
+      .prop-value.bar-prop
+        width: 100px
+        display: inline-block
+        height: 6px
+        background: #ddd
+        border: 1px solid black
+        border-radius: 6px
+        overflow: hidden
 
-        h3
-          margin: 0
-          font-size: 16px
-          line-height: 16px
-          color: #338
+        .bar
+          background: black
+          width: 100%
+          height: 100%
 
-        button
-          margin-left: 10px
+      .message
+        text-align: center
+        display: table
+        height: 100%
+        width: 100%
 
-      .bubble:after
-        content: ""
-        position: absolute
-        top: 55px
-        left: -27px
-        border-style: solid
-        border-width: 11px 27px 11px 0
-        border-color: transparent #FFFFFF
-        display: block
-        width: 0
-        z-index: 1
-
-      .bubble:before
-        content: ""
-        position: absolute
-        top: 55px
-        left: -28px
-        border-style: solid
-        border-width: 11px 27px 11px 0
-        border-color: transparent black
-        display: block
-        width: 0
-        z-index: 0
+        p
+          display: table-cell
+          vertical-align: middle
+          font-size: 20px

app/styles/play/level/level-dialogue-view.sass

@@ -0,0 +1,102 @@
+@import "app/styles/mixins"
+@import "app/styles/bootstrap/variables"
+
+#level-dialogue-view
+  +keyframes(speakingPulse)
+    from
+      @include box-shadow(0px 0px 8px #333)
+      color: white
+    50%
+      @include box-shadow(0px 0px 35px skyblue)
+      color: skyblue
+    to
+      @include box-shadow(0px 0px 8px #333)
+      color: white
+
+  width: 417px
+  height: 296px
+  background: transparent url(/images/level/code_palette_wood_background.png)
+  background-size: 100% auto
+  position: absolute
+  bottom: -296px + 40px
+  left: 300px
+  left: -webkit-calc(55% - 417px)
+  left: calc(55% - 417px)
+  // Bounce in
+  @include transition(1s cubic-bezier(.17,.89,.42,1.36))
+  z-index: 2
+
+  &.active
+    display: block
+    bottom: -20px
+
+  &.speaking
+    .dialogue-area
+      .bubble
+        @include animation(speakingPulse 1.5s infinite)
+
+  .dialogue-area
+    position: relative
+    height: 100%
+    width: 100%
+    z-index: 1
+
+    .bubble
+      position: relative
+      margin: 20px
+      padding: 10px 10px 30px 10px
+      color: white
+      font-weight: bold
+      background: rgb(45, 35, 234)
+      border: black solid 1px
+      border-radius: 10px
+      font-size: 18px
+      line-height: 20px
+
+      strong
+        color: #09B057
+
+      .hud-hint
+        font-weight: normal
+        color: #ddd
+        font-size: 14px
+        line-height: 16px
+        vertical-align: middle
+
+      .enter
+        position: absolute
+        right: 10px
+        bottom: 10px
+        div.dot
+          background: #337
+          width: 8px
+          height: 8px
+          position: absolute
+          right: 8px
+          top: 9px
+          border-radius: 5px
+
+      button, .alert
+        padding: 2px 5px
+
+      .enter button.with-dot
+        padding-right: 20px
+
+      h3
+        margin: 0
+        font-size: 16px
+        line-height: 16px
+        color: #338
+
+      button
+        margin-left: 10px
+
+body.ipad #level-dialogue-view
+  left: auto
+  right: 0
+
+  &.active
+    bottom: -60px
+
+  .hud-hint
+    visibility: hidden

app/styles/play/level/loading.sass

@@ -35,11 +35,7 @@
     padding: 10px
     text-align: center
     // http://matthewlein.com/ceaser/  Bounce down a bit, then snap up.
-    -webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, 0, 0.670, 0)
-    -webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
-    -moz-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
-    -o-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
-    transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
+    @include transition(top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600))
 
     .load-progress
       position: absolute
@@ -88,9 +84,9 @@
   .left-wing
     @include wing-background('/images/level/loading_left_wing.png', right)
     left: -50%
-    transition: all $UNVEIL_TIME ease
+    @include transition(all $UNVEIL_TIME ease)
 
   .right-wing
     @include wing-background('/images/level/loading_right_wing.png', left)
     right: -50%
-    transition: all $UNVEIL_TIME ease
+    @include transition(all $UNVEIL_TIME ease)

app/styles/play/level/modal/editor_config.sass

@@ -1,12 +0,0 @@
-#level-editor-config-modal
-  .select-group
-    display: block
-    min-height: 20px
-    margin-top: 10px
-    margin-bottom: 10px
-    padding-left: 20px
-    vertical-align: middle
-
-    label
-      font-weight: normal
-      margin-right: 20px

app/styles/play/level/playback.sass

@@ -12,7 +12,11 @@
   background-size: 100% 100%
   // Counteract 50px height of absolutely positioned control bar, but overlap by 10px of jagged transparent top.
   margin-top: 50px - 10px
-  z-index: 2
+  z-index: 3
+
+  &.controls-disabled
+    pointer-events: none
+    @include filter(brightness(50%))
 
   button
     font-size: 26px

app/styles/play/level/thang_avatar.sass

@@ -7,10 +7,8 @@
     @include box-shadow(0px 0px 10px rgba(79, 79, 213, 1.0))
 
   .thang-avatar-wrapper
+    width: 100%
     position: relative
-    margin: 5px 5px 1px
-    border: 1px solid #888
-    border-radius: 4px
     @include gradient-radial-custom-stops(hsla(205,0%,74%,1), 20%, hsla(205,0%,31%,1), 70%)
 
     &.team-humans
@@ -25,6 +23,15 @@
       border-color: darkgreen
       @include gradient-radial-custom-stops(hsla(116,80%,74%,1), 20%, hsla(116,80%,31%,1), 70%)
 
+    .avatar
+      width: 100%
+
+    .avatar-frame
+      position: absolute
+      left: -18%
+      top: -19%
+      width: 145%
+
     .badge
       $radius: 8px
       $diameter: 2 * $radius

app/styles/play/level/tome/cast_button.sass

@@ -17,8 +17,8 @@
     @include box-shadow(0px 0px 8px #333)
     color: white
   50%
-    @include box-shadow(0px 0px 35px #87FFCE)
-    color: #87FFFF
+    @include box-shadow(0px 0px 35px #87CEFF)
+    color: #87CEFF
   to
     @include box-shadow(0px 0px 8px #333)
     color: white
@@ -31,40 +31,113 @@
   width: 100%
   border-radius: 6px
 
-  .btn
-    padding: 3px 10px
-    height: 40px
-    font-size: 22px
+  background: transparent url(/images/level/code_toolbar_background.png)
+  background-size: 100% 100%
+  left: -15px
+  right: 15px
+  height: 94px
+  margin-top: -8px
+  padding: 20px 2.8%
 
-  .submit-button
-    margin-left: 20px
-    min-width: 150px
+  .btn.btn-illustrated
+    height: 46px
+    font-size: 24px
+    line-height: 24px
+    width: 45%
+    width: -webkit-calc(50% - 10px)
+    width: calc(50% - 10px)
+    border-image: url(/images/level/code_toolbar_run_button_active.png) 14 20 20 20 fill round
+    border-width: 7px 10px 10px 10px
+
+    &:active
+      border-image: url(/images/level/code_toolbar_run_button_active_pressed.png) 14 20 20 20 fill round
+      padding: 2px 0 0 2px
+
+    &.submit-button
+      margin-left: 10px
+      border-image: url(/images/level/code_toolbar_submit_button_active.png) 14 20 20 20 fill round
+      
+      &:active
+        border-image: url(/images/level/code_toolbar_submit_button_active_pressed.png) 14 20 20 20 fill round
   
   .cast-button
-    margin-left: 10px
-    min-width: 150px
     @include opacity(0.77)
   
     &:hover, &.castable
       @include opacity(1)
+
+  .submit-button > *
+    @include opacity(0.9)
   
+    &:hover
+      @include opacity(1)
+
   &:not(.winnable)
 
-    .cast-button.castable
-      font-weight: bold
-      -webkit-animation-name: castablePulse
-      -webkit-animation-duration: 3s
-      -webkit-animation-iteration-count: infinite
+    .btn.btn-illustrated
 
-    .submit-button
-      font-size: 16px
+      &.cast-button.castable
+        font-weight: bold
+        @include animation(castablePulse 3s infinite)
+        border-image: url(/images/level/code_toolbar_run_button_zazz.png) 14 20 20 20 fill round
+
+        &:active
+          border-image: url(/images/level/code_toolbar_run_button_zazz_pressed.png) 14 20 20 20 fill round
+
+      &.submit-button
+        font-size: 16px
 
   &.winnable
-    .submit-button
-      font-weight: bold
-      -webkit-animation-name: winnablePulse
-      -webkit-animation-duration: 3s
-      -webkit-animation-iteration-count: infinite
 
-    .cast-button
-      font-size: 16px
+    .btn.btn-illustrated
+      &.submit-button
+        font-weight: bold
+        @include animation(winnablePulse 3s infinite)
+
+        border-image: url(/images/level/code_toolbar_submit_button_zazz.png) 14 20 20 20 fill round
+
+        &:active
+          border-image: url(/images/level/code_toolbar_submit_button_zazz_pressed.png) 14 20 20 20 fill round
+
+      &.cast-button
+        font-size: 16px
+
+html.no-borderimage #cast-button-view
+  .btn.btn-illustrated
+    border: 0
+    background-image: url(/images/level/code_toolbar_run_button_active.png)
+    background-size: 100% 100%
+    padding: 7px 10px 10px 10px
+  
+    &:active
+      background-image: url(/images/level/code_toolbar_run_button_active_pressed.png)
+      padding: 9px 8px 8px 12px
+      border: 0
+
+    &.submit-button
+      background-image: url(/images/level/code_toolbar_submit_button_active_pressed.png)
+      border: 0
+
+      &:active
+        background-image: url(/images/level/code_toolbar_submit_button_active_pressed.png)
+        border: 0
+
+  &:not(.winnable)
+    .btn.btn-illustrated
+      &.cast-button.castable
+        border: 0
+        background-image: url(/images/level/code_toolbar_run_button_zazz.png)
+
+        &:active
+          background-image: url(/images/level/code_toolbar_run_button_zazz_pressed.png)
+
+  &.winnable
+    .btn.btn-illustrated
+      &.submit-button
+        border: 0
+        background-image: url(/images/level/code_toolbar_submit_button_zazz.png)
+
+        &:active
+          border: 0
+          background-image: url(/images/level/code_toolbar_submit_button_zazz_pressed.png)
+          

app/styles/play/level/tome/problem_alert.sass

@@ -1,26 +1,47 @@
 @import "app/styles/mixins"
 @import "app/styles/bootstrap/variables"
 
-.problem-alert
+
+#problem-alert-view.problem-alert
   z-index: 10
   position: absolute
   // Position these at the end of the spell editor, right above the spell toolbar.
-  bottom: -20px
-  left: 10px
-  right: 10px
+  top: 45px
+  right: 500px
   background: transparent
   border: 1px solid transparent
   padding: 0
+  font-size: 18px
   text-shadow: none
   color: white
   word-wrap: break-word
   border-image: url(/images/level/code_editor_error_background.png) 16 20 fill round
   border-width: 16px 20px
 
+  // Jiggle animation
+  +keyframes(jiggle)
+    0%
+      transform: rotate(0deg)
+    25%
+      transform: rotate(1deg)
+    50%
+      transform: rotate(0deg)
+    75%
+      transform: rotate(-1deg)
+    100%
+      transform: rotate(0deg)
+
+  &.jiggling
+    @include animation(jiggle .3s infinite)
+
   &.no-hint
     // Since it's probably only one line, let's make it not look weird by being tiny.
     padding: 7px
 
+  .problem-alert-title
+    color: white
+    border-bottom: 1px solid white
+
   .close
     @include opacity(0.80)
     text-shadow: none

app/styles/play/level/tome/spell.sass

@@ -2,37 +2,37 @@
 @import "app/styles/bootstrap/variables"
 
 @mixin editor-height($extraHeight)
-  @include box-sizing(border-box)
   width: 98%
   height: 83%
-  height: unquote("-webkit-calc(100% - 60px -")$extraHeight unquote(")")
-  height: unquote("calc(100% - 60px -")$extraHeight unquote(")")
+  height: unquote("-webkit-calc(100% - 100px -")$extraHeight unquote(")")
+  height: unquote("calc(100% - 100px -")$extraHeight unquote(")")
 
 #spell-view
-  position: absolute
-  left: 10px
-  top: 48px
-  right: 10px
-  padding-bottom: 10px
-  z-index: 1
-  // Set z-index above palette
+  margin-top: 10px
+  padding-top: 20px
+  padding-left: 30px
+  padding-bottom: 95px
   display: none
+  position: relative
+  z-index: 1
 
   &.shown
     display: block
 
   .code-background
     position: absolute
-    top: 0
+    top: -68px
+    left: 0px
     height: 100%
-    width: 100%
+    right: -10px
     
   span.code-background
-    border-width: 40px
-    border-image: url(/images/level/code_editor_background.png) 40 fill round
+    border-width: 124px 76px 64px 40px
+    border-image: url(/images/level/code_editor_background_border.png) 124 76 64 40 fill round
 
   img.code-background
     display: none
+    width: 100%
 
   .save-status
     display: none
@@ -43,7 +43,7 @@
   .firepad
     // When Firepad is active, it wraps .ace_editor in .firepad.
     @include editor-height(0px)
-    width: 98%
+    width: 94%
 
     .ace_editor
       width: 100%
@@ -55,7 +55,7 @@
   .ace_editor
     // When Firepad isn't active, .ace_editor needs the width/height set itself.
     @include editor-height(0px)
-    width: 98%
+    width: 94%
     position: relative
     background-color: transparent
     line-height: 20px
@@ -64,19 +64,31 @@
     font-family: Monaco, Menlo, Ubuntu Mono, Consolas, "source-code-pro", monospace !important
 
     &.disabled
-      @include opacity(80)
-      .ace_cursor
-        @include opacity(20)
+      @include opacity(0.8)
+      .ace_cursor, .executing, .ace_active-line, .ace_gutter-active-line
+        @include opacity(0.2)
 
     .ace_gutter
-      background-color: rgba(255, 255, 255, 0.25)
+      background-color: transparent
+      border-right: 1px solid rgb(195, 178, 156)
+      //background-color: rgba(255, 255, 255, 0.25)
       width: 47px
       margin-left: 4px
-      border-bottom: 1px dotted #2f261d
+      
+    // override ace visible to get the experimental large current line executing arrow visible
+    .ace_gutter
+      overflow: visible
+      
+    .ace_layer
+      overflow: visible
+    // End experiment....
 
     .ace_scroller
       background-color: transparent
-      border-bottom: 1px dotted #2f261d
+      //padding-left: 10px  // Interrupts gutter and line highlighting
+
+    .ace_active-line, .ace_gutter-active-line
+      background-color: rgba(255, 255, 255, 0.4)
 
     .ace_content
       .executing, .executed, .problem-marker-info, .problem-marker-warning, .problem-marker-error
@@ -93,22 +105,53 @@
       @include box-shadow(0 0 0px black)
     .executed
       background-color: rgba(110, 110, 110, 0.12)
+
+    +keyframes(pulseRedBackground)
+      from
+        background-color: rgba(255, 45, 27, 0.25)
+      50%
+        background-color: rgba(255, 45, 27, 0.125)
+      to
+        background-color: rgba(255, 45, 27, 0.25)
+
+    // problem-marker-#{@aetherProblem.level} set in Problem.coffee
     .problem-marker-info
       background-color: rgba(196, 163, 184, 0.25)
     .problem-marker-warning
       background-color: rgba(100, 65, 20, 0.25)
     .problem-marker-error
-      background-color: rgba(110, 45, 27, 0.25)
+      // TODO: Pulses too quickly during playback
+      @include animation(pulseRedBackground 1s infinite)
+
 
     &:not(.playback-ended)
       .executing:not(.ace_gutter-cell)
         background-size: 40px 40px
         @include animation(progress-bar-stripes 0.5s linear infinite)
 
-    .ace_gutter-cell.executing:not(.ace_error):not(.ace_warning):not(.ace_info)
-      margin-left: 1px
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMjgwMTE3NDA3MjA2ODExOEE2REU4Q0M1MTM1MkIxRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQjVEQUNDMzQ4RUIxMUUxOEVGRUUyNzFENDM3RDVFMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQjVEQUNDMjQ4RUIxMUUxOEVGRUUyNzFENDM3RDVFMCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU1MjE3RDIzMTIwNjgxMThEQkI4NTlBMjQ1QTEwOTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMThBNkRFOENDNTEzNTJCMUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7SazaGAAAAiElEQVR42mL8//8/AzUBEwOVweA3kAWboI2jCyhgDwBx4ZH9ey5Qy4UOQHweaHg/EAtQ08sFUIMDqBmGCkC8HmgoCCtQM1ICoK5toGYsg8KzHmjo+UGbDj8AcSMwORkSnQ7xgA3QtPmApISNBTyAGrSBGl6eAMSGxBhGyIVkZT3G0fKQYgAQYACL+C2ZM6PC7AAAAABJRU5ErkJggg==)
-      background-position: 0px center
+    .ace_gutter-cell.executing:not(.ace_error):not(.ace_warning):not(.ace_info):after
+      
+      // Experimenting with a larger executing-line-pointer
+      content: "\e072"
+      position: relative
+      top: -31px
+      left: -39px
+      display: inline-block
+      font-family: 'Glyphicons Halflings'
+      font-style: normal
+      font-weight: normal
+      line-height: 1
+      color: white
+      text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black
+      font-size: 39px
+      -webkit-font-smoothing: antialiased
+      -moz-osx-font-smoothing: grayscale
+      
+      
+      //display: block
+      //margin-left: 1px
+      //background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMjgwMTE3NDA3MjA2ODExOEE2REU4Q0M1MTM1MkIxRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQjVEQUNDMzQ4RUIxMUUxOEVGRUUyNzFENDM3RDVFMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQjVEQUNDMjQ4RUIxMUUxOEVGRUUyNzFENDM3RDVFMCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU1MjE3RDIzMTIwNjgxMThEQkI4NTlBMjQ1QTEwOTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMThBNkRFOENDNTEzNTJCMUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7SazaGAAAAiElEQVR42mL8//8/AzUBEwOVweA3kAWboI2jCyhgDwBx4ZH9ey5Qy4UOQHweaHg/EAtQ08sFUIMDqBmGCkC8HmgoCCtQM1ICoK5toGYsg8KzHmjo+UGbDj8AcSMwORkSnQ7xgA3QtPmApISNBTyAGrSBGl6eAMSGxBhGyIVkZT3G0fKQYgAQYACL+C2ZM6PC7AAAAABJRU5ErkJggg==)
+      //background-position: 0px center
 
     .ace_gutter-cell.executed:not(.ace_error):not(.ace_warning):not(.ace_info)
       margin-left: 1px
@@ -146,10 +189,10 @@
       .ace_searchbtn, .ace_replacebtn
         padding: 0px 4px
 
+
 html.no-borderimage
   #spell-view
     span.code-background
       display: none
     img.code-background
       display: block
-

app/styles/play/level/tome/spell_list_entry.sass

@@ -2,7 +2,7 @@
 @import "app/styles/bootstrap/variables"
 
 .spell-list-entry-view
-  code
+  .method-signature
     background-color: transparent
     border: 0
     font-size: 1.1em
@@ -10,32 +10,60 @@
     padding: 4px
 
 .spell-list-entry-view.spell-tab
-  $height: 38px
-  $childMargin: 2px
-  $childSize: $height - 2 * $childMargin
+  $height: 87px
+  $paddingTop: 10px
+  $paddingBottom: 25px
+  $childSize: $height - $paddingTop - $paddingBottom
+  width: 100%
   height: $height
-  width: 90%
-  width: -webkit-calc(100% - 50px)
-  width: calc(100% - 50px)
-  padding: 0px 8px
-  border-width: 3px
-  border-image: url(/images/level/code_editor_tab_background.png) 4 fill repeat
+  padding: $paddingTop 25px $paddingBottom 25px
   white-space: nowrap
   position: relative
+  background: transparent url(/images/level/code_editor_top_bar_wood_background.png)
+  background-size: 100% 100%
+  z-index: 2
+
+  .hinge
+    position: absolute
+    top: 0
+    background: transparent url(/images/level/code_editor_top_bar_hinge.png)
+    width: 24px
+    height: 20px
+    background-size: contain
+
+  .hinge-0
+    left: 20%
+  .hinge-1
+    left: 40%
+  .hinge-2
+    left: 60%
+  .hinge-3
+    left: 80%
 
   &.read-only
-    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%), url(/images/level/code_editor_tab_background.png)
+    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url(/images/level/code_editor_top_bar_wood_background.png)
     background-size: 100% 100%
+    > *:not(.spell-tool-buttons)
+      @include opacity(0.5)
   
-  .spell-list-button, .thang-avatar-wrapper, .reload-code, .beautify-code, .fullscreen-code
-    width: $childSize
-    height: $childSize
-    margin: $childMargin
-    box-sizing: border-box
-
-  .spell-list-button, .thang-avatar-wrapper
+  .thang-avatar-view
+    width: $childSize - 10px
+    margin: 5px 0.4vw
+    display: inline-block
     float: left
 
+  .btn.btn-small
+    margin-top: 15px
+    margin-right: 1.3vw
+    font-size: 18px
+
+    .glyphicon
+      font-size: 16px
+    
+  .btn.btn-small.spell-list-button
+    float: left
+    margin-top: 5px
+
   .spell-tool-buttons
     position: absolute
     right: 0px
@@ -51,29 +79,32 @@
   .fullscreen-code
     float: right
     &:not(.maximized)
-      .icon-resize-small
+      .glyphicon-resize-small
         display: none
     &.maximized
-      .icon-fullscreen
+      .glyphicon-fullscreen
         display: none
 
-  .btn.btn-small
-    background: transparent
-    padding: 0
-
-    &:not(:hover)
-      border-color: transparent
-      @include box-shadow(none)
-
-    .icon-chevron-down, .icon-repeat, .icon-magnet, .icon-fullscreen, .icon-resize-small
-      margin-top: 7px
-    
   .thang-avatar-wrapper
     border-width: 0
 
-  code
-    margin-top: 7px
-    font-size: 1vw
+  .method-name-area
+    margin-left: 10px
+    margin-top: 10px
+    text-transform: uppercase
+    display: inline-block
+    font-family: Open Sans Condensed
+    font-weight: bold
+
+    .method-label
+      font-size: 12px
+      color: rgb(243, 211, 59)
+      margin-bottom: -5px
+
+    .method-signature
+      color: white
+      font-size: 18px
+      padding: 0
 
 .spell-list-entry-view:not(.spell-tab)
   cursor: pointer
@@ -89,7 +120,7 @@
   &.shows-top-divider:not(:first-child)
     border-top: 1px dashed #ccc
 
-  code
+  .method-signature
     margin-top: 5px
 
   .thang-names
@@ -113,9 +144,9 @@
       //margin: 2px 10px 2px 5px
 
 
-html.no-borderimage 
-  .spell-list-entry-view.spell-tab  
-    border-width: 0
-    border-image: none
-    background: transparent url(/images/level/code_editor_tab_background.png) no-repeat
-    background-size: 100% 100%
+//html.no-borderimage 
+//  .spell-list-entry-view.spell-tab  
+//    border-width: 0
+//    border-image: none
+//    background: transparent url(/images/level/code_editor_tab_background.png) no-repeat
+//    background-size: 100% 100%

app/styles/play/level/tome/spell_palette.sass

@@ -3,55 +3,48 @@
 
 #spell-palette-view
   position: absolute
-  padding-bottom: 10px
   left: 10px
   right: 10px
-  //height: 140px
-  // Height relates to .tab-content height
-  padding-top: 35px
-  padding-left: 12px
-  padding-right: 4px
-  color: #333
-  // Get crazy with the backgrounds so that we can lower the opacity on the editor background above it, making a gradient of the disabled background color on the top around where it's usually covered
+  padding: 0 4px 10px 40px
   background-color: transparent
   background-size: 100% 100%
-  z-index: 0
+  z-index: 2
   //overflow-y: auto
-  
+
   .code-palette-background
-    position: absolute
-    left: 0
-    top: 0
     width: 100%
-    height: 100%
+    position: absolute
+    left: 0px
     z-index: -1
-    
-  span.code-palette-background
-    border-width: 25px
-    border-image: url(/images/level/code_palette_background.png) 25 fill round
 
-  img.code-palette-background
-    display: none
+  &.controls-disabled
+    .code-palette-background
+      @include filter(brightness(75%))
 
-  &.disabled
-    @include opacity(0.80)
+    > :not(.code-palette-background)
+      @include opacity(0.50)
 
   h4
-    color: #333
+    color: white
     font-size: 16px
     line-height: 16px
-    margin: 0 4px
+    margin: 25px 0 5px 2px
     font-weight: normal
+    text-transform: uppercase
 
   .nav > li > a
     padding: 2px 20px 0px 20px
     margin-bottom: 3px
 
   ul.nav.nav-pills
+    margin-top: 15px
+
+    h4
+      margin-top: 2px
     li.active a
       background-color: transparent
     &.multiple-tabs li.active a
-      background-color: lighten(rgb(230, 212, 146), 10%)
+      background-color: darken(rgb(230, 212, 146), 30%)
     &.multiple-tabs li:not(.active) a
       cursor: pointer
 
@@ -82,8 +75,9 @@
       @include flexbox()
       @include flex-wrap()
       @include flex-center()
-      outline: 1px dashed #b86
       position: relative
+      background-color: rgb(20, 13, 8)
+      margin: 1px
   
       img.item-image
         width: 38px
@@ -91,49 +85,11 @@
         position: absolute
 
       &:not(:hover) img.item-image
-        -webkit-filter: sepia(100%)
-        filter: sepia(100%)
+        -webkit-filter: contrast(50%) sepia(100%) saturate(500%) hue-rotate(7deg)
+        filter: contrast(50%) sepia(100%) saturate(1000%) hue-rotate(7deg)
   
       .spell-palette-entry-view
         margin-left: 38px
         width: 174px
         width: -webkit-calc(100% - 38px)
         width: calc(100% - 38px)
-
-  .code-language-logo
-    position: absolute
-    width: 16px
-    height: 16px
-    left: 16px
-    top: 36px
-    z-index: 10
-    background-color: transparent
-    background-repeat: no-repeat
-    background-size: contain
-    cursor: pointer
-
-    &.javascript
-      background-image: url(/images/common/code_languages/javascript_icon.png)
-    &.python
-      background-image: url(/images/common/code_languages/python_icon.png)
-    &.coffeescript
-      background-image: url(/images/common/code_languages/coffeescript_icon.png)
-    &.clojure
-      background-image: url(/images/common/code_languages/clojure_icon.png)
-    &.lua
-      background-image: url(/images/common/code_languages/lua_icon.png)
-    &.io
-      background-image: url(/images/common/code_languages/io_icon.png)
-
-    &:hover
-      outline: 1px outset #ccc
-
-      &:active
-        outline: 1px inset #ccc
-
-html.no-borderimage
-  #spell-palette-view
-    span.code-palette-background
-      display: none
-    img.code-palette-background
-      display: block

app/styles/play/level/tome/spell_palette_entry.sass

@@ -25,20 +25,21 @@
     background-color: darken(#FFFFFF, 25%)
 
   // Originally pulled these colors from the most relevant textmate-theme classes, but then fudged them a lot.
-  &.function
-    color: black
-  &.object
-    color: rgb(6, 150, 14)
-  &.string
-    color: rgb(3, 106, 7)
-  &.number
-    color: rgb(0, 0, 205)
-  &.boolean
-    color: rgb(88, 92, 246)
-  &.snippet
-    color: blue
-  &.undefined
-    color: rgb(197, 6, 11)
+  //&.function
+  //  color: black
+  //&.object
+  //  color: rgb(6, 150, 14)
+  //&.string
+  //  color: rgb(3, 106, 7)
+  //&.number
+  //  color: rgb(0, 0, 205)
+  //&.boolean
+  //  color: rgb(88, 92, 246)
+  //&.snippet
+  //  color: blue
+  //&.undefined
+  //  color: rgb(197, 6, 11)
+  color: rgb(243, 169, 49)
 
 .spell-palette-popover.popover
   // Only those popovers which are our direct children (spell documentation)

app/styles/play/level/tome/thang_list.sass

@@ -1,22 +0,0 @@
-@import "app/styles/mixins"
-@import "app/styles/bootstrap/variables"
-
-#thang-list-view
-  margin: 50px 15px 15px 15px
-  overflow: auto
-  height: 80%
-  height: -webkit-calc(100% - 65px)
-  height: calc(100% - 65px)
-
-  h3
-    line-height: 25px
-    margin: 0
-    text-align: center
-    letter-spacing: 0.1em
-  
-  .thang-list-section
-    margin: 5px
-    padding: 5px
-    background-color: rgba(200, 200, 200, 0.25)
-    border-radius: 5px
-    overflow: hidden

app/styles/play/level/tome/thang_list_entry.sass

@@ -1,38 +0,0 @@
-@import "app/styles/mixins"
-@import "app/styles/bootstrap/variables"
-
-.thang-list-entry-view
-  @include opacity(0.90)
-  cursor: pointer
-  float: left
-  box-sizing: border-box
-  width: 20%
-  max-width: 100px
-  position: relative
-
-  &.dead
-    @include opacity(0.75)
-
-    &:after
-      content: "×"
-      font-size: 160px
-      color: red
-      @include opacity(0.75)
-      position: absolute
-      bottom: 0
-      height: 100%
-      width: 100%
-      text-align: center
-      line-height: 100px
-      font-family: monospace
-
-    .thang-name
-      text-decoration: line-through
-
-  &.disabled
-    @include opacity(0.25)
-    cursor: default
-
-  &:hover:not(.disabled)
-    @include opacity(1)
-

app/styles/play/level/tome/thang_list_entry_spells.sass

@@ -1,16 +0,0 @@
-@import "app/styles/mixins"
-@import "app/styles/bootstrap/variables"
-
-.thang-list-entry-spells
-
-  .thang-list-entry-spell
-    padding: 4px
-    cursor: pointer
-
-    &:hover
-      background-color: hsla(240, 40, 80, 0.25)
-
-  code
-    background-color: transparent
-    border: 0
-    font-size: 1.1em

app/styles/play/modal/play-heroes-modal.sass

@@ -77,10 +77,10 @@ $heroCanvasHeight: 265px
           height: 98px
           margin: 0 -11px
           position: relative
-          background: url(/images/pages/play/modal/hero_portrait_picker_inactive.png)
+          background: url(/images/pages/play/modal/hero-portrait.png)
           border: none
           &.active
-            background: url(/images/pages/play/modal/hero_portrait_picker_active.png)
+            background: url(/images/pages/play/modal/hero-portrait-selected.png)
             z-index: 5
 
           .hero-avatar

app/styles/play/modal/play-items-modal.sass

@@ -12,6 +12,7 @@
     overflow: hidden
     text-overflow: ellipsis
 
+
   //- Clear modal defaults
   .modal-dialog
     padding: 0
@@ -86,7 +87,7 @@
     width: 178px
     
     li
-      background: url(/images/pages/play/modal/play-items-modal-tab.png)
+      background: url(/images/pages/play/modal/menu-tab.png)
       padding: 5px
       margin: -5px 0
       height: 80px
@@ -100,11 +101,9 @@
         font-weight: bold
         padding: 10px 7px
         
-      //img
-        
       
     li.active
-      background: url(/images/pages/play/modal/play-items-modal-selected-tab.png)
+      background: url(/images/pages/play/modal/menu-tab-selected.png)
       width: 197px
       
       a
@@ -136,7 +135,7 @@
     padding: 10px
     height: 195px
     float: left
-    background: url(/images/pages/play/modal/play-items-modal-item-background.png)
+    background: url(/images/pages/play/modal/item-box-background.png)
     margin: 4px
     text-align: center
     position: relative
@@ -220,7 +219,7 @@
       font-size: 16px
 
     &.selected
-      background: url(/images/pages/play/modal/play-items-modal-selected-item-background.png)
+      background: url(/images/pages/play/modal/item-box-background-selected.png)
 
     
   //- Item list scrollbar

app/templates/about.jade

@@ -111,7 +111,7 @@ block content
 
         li.row
     
-          img(src="/images/pages/about/placeholder.png").img-thumbnail
+          img(src="/images/pages/about/matt_small.png").img-thumbnail
   
           .team_bio
 

app/templates/game-menu/game-menu-modal.jade

@@ -1,34 +1,28 @@
-extends /templates/modal/modal_base
+.modal-dialog
+  .modal-content
+    img(src="/images/pages/play/modal/game-menu-background.png")#game-menu-background
 
-block modal-header
+    ul#game-menu-nav.nav.nav-pills.nav-stacked
+      li
+        a#change-hero-tab
+          span.glyphicon.glyphicon-user
+          span(data-i18n='play.change_hero')
 
-block modal-body-content
-  .button.close(type="button", data-dismiss="modal", aria-hidden="true") ×
-  .tabbable.tabs-left
-    - var submenus = ["inventory", "choose-hero", "save-load", "options", "guide", "multiplayer"]
-    - if (!showsGuide) {
-    -   submenus.splice(4, 1);
-    - }
-    - if (!showDevBits) {  // Not done yet.
-    -   submenus.splice(2, 1);
-    - }
-    - if (!showInventory)
-    -   submenus.splice(0, 1);
-    ul.nav.nav-tabs#game-menu-nav
       for submenu, index in submenus
-        li(class=submenu === showTab || index === 0 && !showTab ? "active" : "")
+        li(class=submenu === showTab ? "active" : "")
           a(href='#' + submenu + '-view', data-toggle='tab')
-            h2(data-i18n='game_menu.' + submenu.replace('-', '_') + '_tab')
-            em(data-i18n='game_menu.' + submenu.replace('-', '_') + '_caption')
+            span.glyphicon(class="glyphicon-"+iconMap[submenu])
+            span(data-i18n='game_menu.' + submenu.replace('-', '_') + '_tab')
       if me.get('anonymous')
         li.auth-tab(data-toggle='coco-modal', data-target="modal/AuthModal")
           a(data-toggle='coco-modal', data-target="modal/AuthModal")
-            h2(data-i18n='game_menu.auth_tab')
-            em(data-i18n='game_menu.auth_caption')
-    .tab-content
+            span.glyphicon.glyphicon-pencil
+            span(data-i18n='game_menu.auth_tab')
+
+    .tab-content.game-menu-tab-content
       for submenu, index in submenus
         .tab-pane(id=submenu + '-view')
-  .clearfix
-
-block modal-footer
-  button.btn.btn-primary.btn-lg.overlaid-close-button(type="button", data-dismiss="modal", aria-hidden="true", data-i18n="modal.close") Close
+//  .clearfix
+//
+//block modal-footer
+//  button.btn.btn-primary.btn-lg.overlaid-close-button(type="button", data-dismiss="modal", aria-hidden="true", data-i18n="modal.close") Close

app/templates/game-menu/inventory-modal.jade

@@ -0,0 +1,68 @@
+extends /templates/modal/modal_base
+
+block modal-header-content
+  h1#choose-inventory-header.choose-inventory-active(data-i18n="inventory.choose_inventory") Equip Items
+
+block modal-body-content
+  #equipped
+    .item-slot-row
+      for slot in ['left-ring', 'neck', 'eyes', 'head', 'wrists', 'right-ring']
+        .item-slot(data-slot=slot)
+          .placeholder
+          .item-container
+            if equipment[slot]
+              .replace-me(data-item-id=equipment[slot].get('original'))
+  
+    .item-slot-column.pull-left
+      // TODO: add in 'misc-0' again somehow? Used to be where 'flag' is now.
+      for slot in ['minion', 'torso', 'gloves', 'left-hand', 'flag']
+        .item-slot(data-slot=slot)
+          .placeholder
+          .item-container
+            if equipment[slot]
+              .replace-me(data-item-id=equipment[slot].get('original'))
+  
+    .hero-container
+      canvas.equipped-hero-canvas
+      .hero-feature-image
+        img
+      #selected-items
+        #selected-equipped-item.well
+          h3(data-i18n="inventory.equipped_item") Equipped
+          .item-view-stub
+        #selected-available-item.well
+          h3(data-i18n="inventory.available_item") Available
+          .item-view-stub
+  
+    .item-slot-column.pull-right
+      for slot in ['pet', 'waist', 'feet', 'right-hand', 'programming-book']
+        .item-slot(data-slot=slot)
+          .placeholder
+          .item-container
+            if equipment[slot]
+              .replace-me(data-item-id=equipment[slot].get('original'))
+  
+    // TODO: work in misc 1 again
+    //hr.slot-row-separator
+    //
+    //.item-slot-row.row-4
+    //  for slot in ['misc-1']
+    //    .item-slot(data-slot=slot)
+    //      .placeholder
+    //      .item-container
+    //        if equipment[slot]
+    //          .replace-me(data-item-id=equipment[slot].get('original'))
+  
+  #available-equipment
+    h4#unlocked-description
+    ul.list-group
+      for item in unlockedItems
+        li.list-group-item(class=item.classes, data-item-id=item.get('original'))
+    h4#locked-description
+    ul.list-group
+      for item in lockedItems
+        li.list-group-item(class=item.classes, data-item-id=item.get('original'), style="display: none")
+
+block modal-footer-content
+  button#choose-hero-button.btn.btn-lg.btn-primary.choose-inventory-active.pull-left(data-i18n="play.change_hero") Change Hero
+  button#play-level-button.btn.btn-lg.btn-success.choose-inventory-active(data-i18n="common.play") Play

app/templates/game-menu/inventory-view.jade

@@ -1,59 +0,0 @@
-#equipped
-  .item-slot-row
-    for slot in ['left-ring', 'neck', 'eyes', 'head', 'wrists', 'right-ring']
-      .item-slot(data-slot=slot)
-        .placeholder
-        .item-container
-          if equipment[slot]
-            .replace-me(data-item-id=equipment[slot].get('original'))
-
-  .item-slot-column.pull-left
-    // TODO: add in 'misc-0' again somehow? Used to be where 'flag' is now.
-    for slot in ['minion', 'torso', 'gloves', 'left-hand', 'flag']
-      .item-slot(data-slot=slot)
-        .placeholder
-        .item-container
-          if equipment[slot]
-            .replace-me(data-item-id=equipment[slot].get('original'))
-
-  .hero-container
-    canvas.equipped-hero-canvas
-    .hero-feature-image
-      img
-    #selected-items
-      #selected-equipped-item.well
-        h3(data-i18n="inventory.equipped_item") Equipped
-        .item-view-stub
-      #selected-available-item.well
-        h3(data-i18n="inventory.available_item") Available
-        .item-view-stub
-
-  .item-slot-column.pull-right
-    for slot in ['pet', 'waist', 'feet', 'right-hand', 'programming-book']
-      .item-slot(data-slot=slot)
-        .placeholder
-        .item-container
-          if equipment[slot]
-            .replace-me(data-item-id=equipment[slot].get('original'))
-
-  // TODO: work in misc 1 again
-  //hr.slot-row-separator
-  //
-  //.item-slot-row.row-4
-  //  for slot in ['misc-1']
-  //    .item-slot(data-slot=slot)
-  //      .placeholder
-  //      .item-container
-  //        if equipment[slot]
-  //          .replace-me(data-item-id=equipment[slot].get('original'))
-
-#available-equipment
-  h4#unlocked-description
-  ul.list-group
-    for item in unlockedItems
-      li.list-group-item(class=item.classes, data-item-id=item.get('original'))
-  h4#locked-description
-  ul.list-group
-    for item in lockedItems
-      li.list-group-item(class=item.classes, data-item-id=item.get('original'), style="display: none")
-      

app/templates/game-menu/options-view.jade

@@ -1,4 +1,4 @@
-#player-avatar-container(title="Click to change your avatar").pull-right
+#player-avatar-container(title="Click to change your avatar")
   if !me.get('photoURL')
     .editable-icon.glyphicon.glyphicon-pencil
   img.profile-photo(src=me.getPhotoURL(230))
@@ -6,60 +6,72 @@
     input#player-name.profile-caption(name="playerName", type="text", value=me.get('name', true))
 
 .form
-  h3(data-i18n="options.general_options") General Options
 
-  .form-group.slider-group
-    label(for="option-volume")
-      span(data-i18n="options.volume_label") Volume
-      span.spr :
-      span#option-volume-value= (me.get('volume') * 100).toFixed(0) + '%'
-    #option-volume.slider
+  h3(data-i18n="options.general_options") General Options
+  
+  .form-group.slider-group#volume-group
+    span.glyphicon.glyphicon-volume-down
+    #option-volume.slider.spr.spl
+    span.glyphicon.glyphicon-volume-up
 
   .form-group.checkbox
-    label(for="option-music")
+    label(for="option-music").control-label
       input#option-music(name="option-music", type="checkbox", checked=music)
+      span.custom-checkbox
+        .glyphicon.glyphicon-ok
       span(data-i18n="options.music_label") Music
     span.help-block(data-i18n="options.music_description") Turn background music on/off.
 
   .form-group.select-group
     label.control-label(for="option-autorun-delay", data-i18n="options.autorun_label") Autorun
-    select#option-autorun-delay(name="autorunDelay")
+    select#option-autorun-delay.form-control(name="autorunDelay")
       option(value=1000, selected=(autorunDelay === 1000), data-i18n="common.delay_1_sec") 1 second
       option(value=3000, selected=(autorunDelay === 3000), data-i18n="common.delay_3_sec") 3 seconds
       option(value=5000, selected=(autorunDelay === 5000), data-i18n="common.delay_5_sec") 5 seconds
       option(value=90019001, selected=(autorunDelay === 90019001), data-i18n="common.manual") Manual
     span.help-block(data-i18n="options.autorun_description") Control automatic code execution.
+  
+
+  img.hr(src="/images/pages/play/modal/hr.png")
 
   h3(data-i18n="options.editor_config_title") Editor Configuration
-
+  
   .form-group.select-group
     label.control-label(for="option-key-bindings", data-i18n="options.editor_config_keybindings_label") Key Bindings
-    select#option-key-bindings(name="keyBindings")
+    select#option-key-bindings.form-control(name="keyBindings")
       option(value="default", selected=(aceConfig.keyBindings === "default"), data-i18n="options.editor_config_keybindings_default") Default (Ace)
       option(value="vim", selected=(aceConfig.keyBindings === "vim")) Vim
       option(value="emacs", selected=(aceConfig.keyBindings === "emacs")) Emacs
     span.help-block(data-i18n="options.editor_config_keybindings_description") Adds additional shortcuts known from the common editors.
-
+  
   .form-group.checkbox
     label(for="option-live-completion")
       input#option-live-completion(name="liveCompletion", type="checkbox", checked=aceConfig.liveCompletion)
+      span.custom-checkbox
+        .glyphicon.glyphicon-ok
       span(data-i18n="options.editor_config_livecompletion_label") Live Autocompletion
     span.help-block(data-i18n="options.editor_config_livecompletion_description") Displays autocomplete suggestions while typing.
-
+  
   .form-group.checkbox
     label(for="option-invisibles")
       input#option-invisibles(name="invisibles", type="checkbox", checked=aceConfig.invisibles)
+      span.custom-checkbox
+        .glyphicon.glyphicon-ok
       span(data-i18n="options.editor_config_invisibles_label") Show Invisibles
     span.help-block(data-i18n="options.editor_config_invisibles_description") Displays invisibles such as spaces or tabs.
-
+  
   .form-group.checkbox
     label(for="option-indent-guides")
       input#option-indent-guides(name="indentGuides", type="checkbox", checked=aceConfig.indentGuides)
+      span.custom-checkbox
+        .glyphicon.glyphicon-ok
       span(data-i18n="options.editor_config_indentguides_label") Show Indent Guides
     span.help-block(data-i18n="options.editor_config_indentguides_description") Displays vertical lines to see indentation better.
-
+  
   .form-group.checkbox
     label(for="option-behaviors")
       input#option-behaviors(name="behaviors", type="checkbox", checked=aceConfig.behaviors)
+      span.custom-checkbox
+        .glyphicon.glyphicon-ok
       span(data-i18n="options.editor_config_behaviors_label") Smart Behaviors
     span.help-block(data-i18n="options.editor_config_behaviors_description") Autocompletes brackets, braces, and quotes.

app/templates/play/level.jade

@@ -20,6 +20,8 @@
 
   #gold-view
 
+  #problem-alert-view
+
   #level-chat-view
   
   #multiplayer-status-view
@@ -28,6 +30,8 @@
   
   #thang-hud
 
+  #level-dialogue-view
+
   button.btn.btn-lg.btn-warning.banner.header-font#stop-real-time-playback-button(title="Stop real-time playback", data-i18n="play_level.skip") Skip
 
 .footer

app/templates/play/level/hud.jade

@@ -1,29 +1,14 @@
-.center
+.wood-background
 
+.hinge.hinge-0
+.hinge.hinge-1
+.hinge.hinge-2
+.hinge.hinge-3
+
+.avatar-wrapper-container
   .thang-canvas-wrapper.thang-elem
     canvas.thang-canvas
-  
+
+.center
+  .thang-name
   .thang-props.thang-elem
-    .thang-name
-  
-  .thang-actions.thang-elem
-    .nano
-      .nano-content
-        .action-header(data-i18n="play_level.action_timeline") Action Timeline
-        .table-container
-          .progress-arrow.progress-indicator
-          .progress-line.progress-indicator
-          table
-            tbody
-  
-  .dialogue-area
-    p.bubble.dialogue-bubble
-
-  .no-selection-message
-    div(data-i18n="play_level.click_to_select") Click on a unit to select it.
-
-.left-wing
-  .gradient#hud-left-gradient.gradient
-
-.right-wing
-  .gradient#hud-right-gradient.gradient

app/templates/play/level/hud_action.jade

@@ -1,5 +0,0 @@
-tr(name="#{action}")
-  td.action-indicator 
-  td.action-label #{action}
-  td.action-timeline 
-    .timeline-wrapper

app/templates/play/level/level-dialogue-view.jade

@@ -0,0 +1,2 @@
+.dialogue-area
+  p.bubble.dialogue-bubble