Android build v1.0.38

src/App.css

@@ -1683,7 +1683,8 @@ h2 {
 
 .equipment-screen .equipment-layout,
 .equipment-screen .crafting-panel,
-.talent-screen .talent-tree {
+.talent-screen .talent-tree,
+.talent-screen .spell-effect-layout {
   flex: 1;
   min-height: 0;
 }
@@ -3474,6 +3475,8 @@ h2 {
 .effect-pool-panel {
   background: #191b25;
   border: 2px solid #090a0d;
+  display: flex;
+  flex-direction: column;
   min-height: 0;
   outline: 2px solid #3a3944;
   padding: 12px;
@@ -3581,24 +3584,30 @@ h2 {
 }
 
 .effect-pool {
+  align-content: start;
   display: grid;
+  flex: 1;
   gap: 10px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: repeat(2, 62px);
   margin-top: 12px;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .effect-pool > button {
-  align-items: center;
+  align-content: center;
   background: #20222d;
   border: 2px solid #090a0d;
   color: var(--ink);
   cursor: pointer;
   display: grid;
-  gap: 10px;
-  grid-template-columns: 34px minmax(0, 1fr) auto;
-  min-height: 72px;
+  gap: 6px;
+  grid-template-columns: 26px minmax(0, 1fr);
+  min-height: 0;
   outline: 2px solid #3a3944;
-  padding: 9px;
+  overflow: hidden;
+  padding: 7px;
   text-align: left;
 }
 
@@ -3623,7 +3632,7 @@ h2 {
   color: var(--gold);
   display: flex;
   font-family: 'Press Start 2P', monospace;
-  height: 34px;
+  height: 26px;
   justify-content: center;
 }
 
@@ -3634,17 +3643,54 @@ h2 {
 
 .effect-pool strong {
   font-family: 'Press Start 2P', monospace;
-  font-size: 8px;
+  font-size: 7px;
   line-height: 1.35;
 }
 
 .effect-pool small {
   color: var(--muted);
-  font-size: 14px;
+  font-size: 11px;
   line-height: 1;
   margin-top: 5px;
 }
 
+.effect-pool > button i {
+  grid-column: 1 / -1;
+  line-height: 1;
+}
+
+.effect-pager {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.effect-pager button {
+  background: #15161c;
+  border: 2px solid #090a0d;
+  color: var(--ink);
+  cursor: pointer;
+  font-family: 'Press Start 2P', monospace;
+  font-size: 7px;
+  min-height: 28px;
+  outline: 2px solid #41404a;
+  padding: 4px 8px;
+  text-transform: uppercase;
+}
+
+.effect-pager button:disabled {
+  color: #676773;
+  cursor: not-allowed;
+}
+
+.effect-pager span {
+  color: var(--gold);
+  font-family: 'Press Start 2P', monospace;
+  font-size: 8px;
+}
+
 @media (max-width: 800px) {
   .spell-effect-layout {
     grid-template-columns: 1fr;
@@ -3655,7 +3701,7 @@ h2 {
   }
 
   .effect-pool {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .selected-effect-strip {
@@ -7576,6 +7622,125 @@ h2 {
     margin-top: 4px;
   }
 
+  .workshop-shell .spell-effect-layout {
+    gap: 6px;
+    grid-template-columns: 172px minmax(0, 1fr);
+    margin-top: 5px;
+    overflow: hidden;
+  }
+
+  .workshop-shell .effect-slots-panel,
+  .workshop-shell .effect-pool-panel {
+    padding: 5px;
+  }
+
+  .workshop-shell .effect-slots-panel {
+    gap: 5px;
+    grid-auto-rows: minmax(43px, 1fr);
+  }
+
+  .workshop-shell .effect-slot {
+    min-height: 0;
+    overflow: hidden;
+    padding: 5px;
+  }
+
+  .workshop-shell .effect-slot span,
+  .workshop-shell .effect-pool > button i,
+  .workshop-shell .effect-panel-heading > span,
+  .workshop-shell .effect-pager span {
+    font-size: 6px;
+  }
+
+  .workshop-shell .effect-slot strong {
+    font-size: 6px;
+    line-height: 1.15;
+    margin-top: 3px;
+  }
+
+  .workshop-shell .effect-slot small {
+    font-size: 9px;
+    line-height: 1;
+    margin-top: 2px;
+    max-height: 18px;
+    overflow: hidden;
+  }
+
+  .workshop-shell .effect-panel-heading h2 {
+    font-size: 9px;
+    line-height: 1.1;
+  }
+
+  .workshop-shell .selected-effect-strip {
+    gap: 6px;
+    grid-template-columns: minmax(0, 1fr) auto;
+    margin-top: 5px;
+    padding: 5px;
+  }
+
+  .workshop-shell .selected-effect-strip .eyebrow {
+    display: none;
+  }
+
+  .workshop-shell .selected-effect-strip strong {
+    font-size: 7px;
+    line-height: 1.1;
+    margin-top: 0;
+  }
+
+  .workshop-shell .selected-effect-strip small {
+    font-size: 10px;
+    line-height: 1;
+    margin-top: 3px;
+    max-height: 20px;
+    overflow: hidden;
+  }
+
+  .workshop-shell .selected-effect-strip .primary-button {
+    font-size: 7px;
+    min-height: 25px;
+    min-width: 72px;
+    padding: 3px 6px;
+  }
+
+  .workshop-shell .effect-pool {
+    gap: 5px;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-rows: repeat(2, 52px);
+    margin-top: 5px;
+  }
+
+  .workshop-shell .effect-pool > button {
+    gap: 4px;
+    grid-template-columns: 22px minmax(0, 1fr);
+    padding: 4px;
+  }
+
+  .workshop-shell .effect-pool > button > span {
+    height: 22px;
+  }
+
+  .workshop-shell .effect-pool strong {
+    font-size: 6px;
+    line-height: 1.15;
+  }
+
+  .workshop-shell .effect-pool small {
+    font-size: 9px;
+    margin-top: 2px;
+  }
+
+  .workshop-shell .effect-pager {
+    gap: 5px;
+    margin-top: 4px;
+  }
+
+  .workshop-shell .effect-pager button {
+    font-size: 6px;
+    min-height: 22px;
+    padding: 2px 5px;
+  }
+
   .workshop-shell .talent-tier {
     gap: 6px;
     grid-template-columns: 66px minmax(0, 1fr);