Android build v1.0.35

src/App.css

@@ -3454,6 +3454,174 @@ h2 {
   margin-top: 17px;
 }
 
+.talent-empty-state {
+  background: var(--panel-light);
+  border: 2px solid #090a0d;
+  margin-top: 17px;
+  outline: 2px solid #41404a;
+  padding: 18px;
+}
+
+.spell-effect-layout {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: 260px minmax(0, 1fr) 260px;
+  margin-top: 17px;
+  min-height: 0;
+}
+
+.effect-slots-panel,
+.effect-pool-panel,
+.effect-detail-panel {
+  background: #191b25;
+  border: 2px solid #090a0d;
+  min-height: 0;
+  outline: 2px solid #3a3944;
+  padding: 12px;
+}
+
+.effect-slots-panel {
+  display: grid;
+  gap: 10px;
+  grid-auto-rows: minmax(76px, auto);
+}
+
+.effect-slot {
+  background: #20222d;
+  border: 2px solid #090a0d;
+  color: var(--ink);
+  cursor: pointer;
+  outline: 2px solid #3a3944;
+  padding: 10px;
+  text-align: left;
+}
+
+.effect-slot.filled {
+  background: #29291f;
+  outline-color: var(--gold);
+}
+
+.effect-slot.locked {
+  opacity: 0.58;
+}
+
+.effect-slot span,
+.effect-pool > button i {
+  color: var(--gold);
+  font-family: 'Press Start 2P', monospace;
+  font-size: 8px;
+  text-transform: uppercase;
+}
+
+.effect-slot strong,
+.effect-slot small {
+  display: block;
+}
+
+.effect-slot strong {
+  font-family: 'Press Start 2P', monospace;
+  font-size: 8px;
+  line-height: 1.35;
+  margin-top: 8px;
+}
+
+.effect-slot small {
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1;
+  margin-top: 6px;
+}
+
+.effect-panel-heading {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.effect-panel-heading > span {
+  color: var(--gold);
+  font-family: 'Press Start 2P', monospace;
+  font-size: 9px;
+}
+
+.effect-pool {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 12px;
+}
+
+.effect-pool > button {
+  align-items: 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;
+  outline: 2px solid #3a3944;
+  padding: 9px;
+  text-align: left;
+}
+
+.effect-pool > button.active {
+  background: #29291f;
+  outline-color: var(--gold);
+}
+
+.effect-pool > button.selected {
+  border-color: var(--gold);
+}
+
+.effect-pool > button:disabled:not(.active) {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.effect-pool > button > span {
+  align-items: center;
+  background: #15161c;
+  border: 1px solid #55515f;
+  color: var(--gold);
+  display: flex;
+  font-family: 'Press Start 2P', monospace;
+  height: 34px;
+  justify-content: center;
+}
+
+.effect-pool strong,
+.effect-pool small {
+  display: block;
+}
+
+.effect-pool strong {
+  font-family: 'Press Start 2P', monospace;
+  font-size: 8px;
+  line-height: 1.35;
+}
+
+.effect-pool small {
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1;
+  margin-top: 5px;
+}
+
+.effect-detail-panel h2 {
+  color: var(--gold);
+  font-size: 22px;
+  margin-top: 10px;
+}
+
+.effect-detail-panel p {
+  color: var(--muted);
+  font-size: 17px;
+  line-height: 1.1;
+  margin: 12px 0;
+}
+
 .talent-tier {
   align-items: stretch;
   border-bottom: 1px solid #393943;
@@ -5109,6 +5277,19 @@ h2 {
   margin-bottom: 4px;
 }
 
+.speed-badge {
+  background: var(--gold);
+  border: 2px solid #0a0b0e;
+  color: #21180a;
+  display: inline-block;
+  font-family: 'Press Start 2P', monospace;
+  font-size: 8px;
+  line-height: 1;
+  margin: 0 0 5px;
+  padding: 5px 7px;
+  text-transform: uppercase;
+}
+
 .action-panel .resource-row {
   justify-content: flex-start;
 }