na

app/assets/stylesheets/application.css

@@ -554,46 +554,56 @@ main, .modal-panel {
     view-transition-name: stage-header;
   }
 
-  html[data-screen-transition="stage-in"] .hero-container {
+  html[data-screen-transition="last-save-in"] .last_save > .stage-header-container {
+    view-transition-name: stage-header;
+  }
+
+  html:is([data-screen-transition="stage-in"], [data-screen-transition="last-save-in"]) .hero-container {
     view-transition-name: hero;
   }
 
-  html[data-screen-transition="stage-in"] .stage .answers-container {
+  html:is([data-screen-transition="stage-in"], [data-screen-transition="last-save-in"]) :is(.stage, .last_save) > .answers-container {
     view-transition-name: answers;
   }
 
-  html[data-screen-transition="stage-in"] .stage .hero-container svg.ico-wave {
+  html:is([data-screen-transition="stage-in"], [data-screen-transition="last-save-in"]) :is(.stage, .last_save) .hero-container svg.ico-wave {
     opacity: 0;
   }
 
-  .stage.is-settling .hero-container {
+  :is(.stage, .last_save).is-settling .hero-container {
     overflow: clip;
   }
 
-  .stage.is-settling .hero-container svg.ico-wave {
+  :is(.stage, .last_save).is-settling .hero-container svg.ico-wave {
     animation: wave-slide-in var(--dur-fast) var(--ease-out) both;
   }
 
   html[data-screen-transition="stage-in"]::view-transition-group(stage-header),
   html[data-screen-transition="stage-in"]::view-transition-group(hero),
+  html[data-screen-transition="last-save-in"]::view-transition-group(hero),
   html[data-screen-transition="stage-in"]::view-transition-old(stage-header),
   html[data-screen-transition="stage-in"]::view-transition-new(stage-header) {
     animation-duration: var(--dur-base);
     animation-timing-function: var(--ease-out);
   }
 
-  html[data-screen-transition="stage-in"]::view-transition-old(hero) {
+  html[data-screen-transition="last-save-in"]::view-transition-new(stage-header) {
+    animation: header-drop-in var(--dur-base) var(--ease-out) calc(var(--dur-base) * 0.3) both;
+    mix-blend-mode: normal;
+  }
+
+  html:is([data-screen-transition="stage-in"], [data-screen-transition="last-save-in"])::view-transition-old(hero) {
     height: 100%;
     object-fit: cover;
     object-position: top;
     animation: none;
   }
 
-  html[data-screen-transition="stage-in"]::view-transition-new(hero) {
+  html:is([data-screen-transition="stage-in"], [data-screen-transition="last-save-in"])::view-transition-new(hero) {
     animation: hero-rise var(--dur-base) var(--ease-out) both;
   }
 
-  html[data-screen-transition="stage-in"]::view-transition-new(answers) {
+  html:is([data-screen-transition="stage-in"], [data-screen-transition="last-save-in"])::view-transition-new(answers) {
     animation: answers-slide-up var(--dur-base) var(--ease-out) both;
     mix-blend-mode: normal;
   }
@@ -753,6 +763,7 @@ main, .modal-panel {
     position: absolute;
     right: 0;
     bottom: var(--slide-copy-height, 0px);
+    margin-bottom: -0.5px;
     width: 190px;
     height: 96px;
     display: block;

app/javascript/application.js

@@ -39,6 +39,10 @@ const SCREEN_TRANSITIONS = {
   "stage>bad_answer": "answer",
   "good_answer>stage": "stage-in",
   "bad_answer>stage": "stage-in",
+  "good_answer>last_save": "last-save-in",
+  "bad_answer>last_save": "last-save-in",
+  "last_save>good_answer": "answer",
+  "last_save>bad_answer": "answer",
   "good_answer>results": "slide-up",
   "bad_answer>results": "slide-up"
 }

app/views/game/stage_result.html.erb

@@ -38,7 +38,8 @@
                   class: "cta", data: { action: "click->answer#exit", answer_full_param: true } %>      
 
     <% elsif @result_node.parent.chance? and @result_node.bad_answer? %>
-      <%= link_to tag.span(t("game.let_me_try")), {action: "last_save" }, class: "cta last_save" %>    
+      <%= link_to tag.span(t("game.let_me_try")), { action: "last_save" }, class: "cta last_save",
+                  data: { action: "click->answer#exit", answer_full_param: true } %>    
     <% else %>
       <%= link_to tag.span(t("game.next_stage")), { action: "stage", id: stage_index + 1 },
                   class: "cta", data: { action: "click->answer#exit" } %>