refactor(style): Remove unneeded buttons`container

static/index.html

@@ -45,11 +45,9 @@
       </section>
       <section class="output" data-mode="booster" data-state="ready">
         <div class="actions" aria-hidden="true">
-          <div class="buttons">
             <button class="save" tabindex="-1">Save</button>
             <button class="toggle-name" data-include tabindex="-1">Trainer Name</button>
             <button class="generate-new" tabindex="-1">New Pokémon</button>
-          </div>
         </div>
         <div class="scene">
           <div class="booster" title="Open booster pack for new card">

static/style.css

@@ -66,7 +66,7 @@ main {
     width: 95%;
   }
 
-  main > section.info h1  {
+  main > section.info h1 {
     font-size: 2.5rem;
   }
 
@@ -85,7 +85,7 @@ main {
   }
 
   .output .scene {
-    margin-top: -4rem ;
+    margin-top: -4rem;
   }
 }
 
@@ -189,13 +189,13 @@ section {
   height: 45px;
   box-sizing: border-box;
   padding: 0.5rem 1rem 0.5rem 5rem;
+  margin: 0;
   border: 3px solid hsl(0 0% 70%);
   border-right: none;
-  margin: 0;
+  border-radius: 1rem 0 0 1rem;
   text-align: center;
   font-size: 1.25rem;
   transition: box-shadow 0.5s ease-out;
-  border-radius: 1rem 0 0 1rem;;
   box-shadow: none;
 }
 
@@ -210,10 +210,10 @@ input:focus {
 
 form button {
   height: 2.8125rem;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
   margin: 0;
   font-size: 0.85rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .info p {
@@ -248,11 +248,12 @@ info a:is(:hover, :focus, :active, :visited) {
   gap: 1rem;
   width: 100%;
   margin: 1rem auto 1.5rem;
+  transition: transform 0.5s ease;
   z-index: 5;
 }
 
-.output .buttons {
-  display: contents;
+[data-mode='booster'][data-state='completed'] .actions {
+  transform: translateY(-25%);
 }
 
 button {
@@ -263,15 +264,13 @@ button {
   font-weight: bold;
   color: white;
   transform-origin: bottom;
-
-  transition: transform 0.5s ease, box-shadow 0.1s, outline-offset 0.25s ease-out, filter 0.25s ease-out, opacity 0.25s;
+  transition: box-shadow 0.1s, outline-offset 0.25s ease-out, filter 0.25s ease-out, opacity 0.25s;
   whitespace: nowrap;
   filter: saturate(1);
   cursor: pointer;
 }
 
 .actions button {
-  transform: translateY(-25%);
   box-shadow: 0 0.2rem 0.375rem hsl(158 100% 33% / 60%);
   user-select: none;
   pointer-events: none;
@@ -279,13 +278,11 @@ button {
 }
 
 [data-mode='card'][data-state='completed'] button {
-  transform: translateY(0);
   pointer-events: auto;
   opacity: 1;
 }
 
 button:active {
-  transform: translateY(0.1rem);
   box-shadow: none;
 }
 
@@ -500,7 +497,7 @@ button.toggle-name.off {
 .face.front,
 .face.back {
   background-size: var(--width);
-  background-image: url("booster-background.svg");
+  background-image: url('booster-background.svg');
   background-position: center;
 }
 
@@ -881,9 +878,9 @@ header > * {
 }
 
 header > div {
-  width: max-content;
   position: absolute;
   right: 1rem;
+  width: max-content;
 }
 
 .hp {